- スクリーンショットを撮りたい画面を表示して「F2」を押す
- クイックコマンドウィンドウが立ち上がるので、「Capture」と入力
- スクショの方法が4つ表示されるのでお好きなのを選択。
Shopifyのテーマカスタマイズ画面にフォントピッカーを追加する方法
備忘録でっす。
テーマカスタマイズ画面にフォントピッカーを追加する
今回は無料テーマのDebutの「テキストオーバーレイ付き画像」セクションを改造しちゃうぞ~。
- フォントピッカーを追加したいセクションのテーマファイルを探すよ。
sectionsフォルダ内にあるはずだよ。「テキストオーバーレイ付き画像」の場合はhero.liquidって名前です。 - ファイルを開いたら下記を探すよ。
{% schema %}
hoge
{% endschema %}
- すでにカスタマイズ画面に出ている機能がずらりと並んでいるはず。
- 括弧の位置に注意しながら、フォントピッカーを追加したいところにコードを書いていくよ。
{
"name": "Typography",
"settings": [
/* ↓↓ ここに入れるよ~ ↓↓ */
{
"type": "font_picker",
"label": "Heading font",
"id": "heading_font",
"default": "helvetica_n4"
}
/* ↑↑ ここに入れたよ~ ↑↑ */
]
}
- ファイルを保存してshopifyにテーマをアップロード。Shopifyのテーマキット使ってると簡単だよ。
- もしかしたらスキーマがどうこうってエラーが出るかも。いちどShopifyの管理画面に行きます。
- 管理画面からテーマのカスタマイズを選ぶよ。
- フォントピッカーを追加したセクションを開くよ。ちゃんとフォントピッカーが表示されてればおk。
- 適当なフォントを選択して保存するよ。
- Shopifyのテーマキットを使ってる人は、いちどtheme downloadしときましょう。
- テーマファイルのconfig/settings_data.jsonを開くよ。
- さっき追加したフォントピッカーの値がちゃんとあればばっちり!どこにあるかはセクションによって違うよ。「テキストオーバーレイ付き画像」に追加した人はこのへんにあるはず↓
︙
"sections": {
︙
"hero": {
"type": "hero",
"settings": {
"heading_font": "itc_stone_informal_n4"
}
},
︙
- これでフォントピッカーを使えるようになったよ。
選んだフォントをデザインに反映するよ~
選んだフォントをデザインに適用してみよう~。
残念なことに、スタイルシート用のtheme.scss.liquidファイルからはセクション内でカスタマイズした値を読めないっぽいんだ 😥
しゃーないので、セクションのテーマファイルの中に直接CSSを書いちゃうよ!
- さっきフォントピッカーを追加したliquidファイルを開いてね。
- 下記を適当な位置に入れてあげます。
<style>
{% assign sample_heading_font = section.settings.heading_font %}
{{ sample_heading_font | font_face }}
</style>
- これでさっき選んだフォントが@font-faceで読み込まれて、指定できるようになるよ。
- フォントを使いたいタグに下記を入れてあげましょう。classやidでの指定がいい人はそうしてね。
<h2 style="font-family:' {{ sample_heading_font.family }};'">
- 保存したらテーマをアップロードするよー。
- さて実際のサイトで表示してみましょう。うまく適用されてるかな??
めっちゃ参考になるサイト様
Configuring theme settings ・ Shopify Help Center
The font object ・ Shopify Help Center
Fonts ・ Shopify Help Center
Shopify’s font library ・ Shopify Help Center
Liquid Font filters in Shopify ? Avada Commerce
Unable to access section setting in sections.scss file ・ Issue #714 ・ Shopify/slate ・ GitHub
Shopifyのフォントライブラリー、すごい色々選べるから、使いこなせれば管理画面から簡単にデザインの変更できてお客さんハッピーになれるだろうな。
まだまだ奥が深いぜShopify。
Shopifyのテーマをローカルで開発するのに超絶便利なTheme Kitの使い方
Theme Kitとは?
Shopifyが提供している、開発者用のコマンドラインツールです。
https://shopify.github.io/themekit/
Theme Kitをダウンロード
「Installation」のセクションから、お使いの環境に合ったTheme Kitをダウンロードします。
コマンドラインに慣れている素敵な貴方はコマンドラインから。
お願いだからexeファイルください…とヨボヨボな貴方と私は「Manual Installation」しましょうね。
Theme Kitのインスコ
管理人はWindowsユーザーなので、Windowsの解説しますよー。
- program filesフォルダの中に「Theme Kit」フォルダ作ります。名前はなんでも大丈夫だよ。
- さっきダウンロードしたtheme.exeを作ったフォルダにぶち込みます。
- パスを通します。環境変数ってやつだね。英語だけどここがスクショ付きで説明しているのでわかりやすいです。
pathのところに「C:\Program Files\Theme Kit」が追加されれば大丈夫! - Powershell(かコマンドプロンプト)を立ち上げて、下記コマンドを打ってみましょう。
theme
theme kitの説明がずら~と表示されればインスコ成功です!
macやlinuxの方は下記を参照にがんばって。
Linux & macOS
Download the themekit binary that works for your system.
Compare checksums of the binary by running md5 theme
Put the binary on your path. We recommend somewhere like /usr/local/bin
Ensure that it works as expected by running theme version
APIアクセス権をもらうよ
Shopifyの管理画面から、APIでアクセスするための設定をします。
Theme Kitのページに、すんごいわかりやすいgifがあるので参考にしてね。
- 管理画面から「Apps > Manage private apps」
- 「Create a new private app」をクリック、下の方に小さくあるよ。
- Private App Name(なんでもいいです。Theme Kit Accessとかでいんじゃない。)と自分のメアドを入力。
- 「Theme templates and theme assets」の権限を「Read and write」に設定
- 「Save」を押下。
Shopifyとローカルをつなげちゃうよ
- Shopifyのテーマを保存したい場所にフォルダを作ります。
- そのフォルダでPowershellを立ち上げます。フォルダ上で「shift+右クリック>この場所でpowershellを開く」で開けるよ。
- つなげてみましょう。下記コマンドを打つよ!
theme configure --password=[APIのパスワード] --store=[shopifyストアのURL(hoge.myshopify.com)] --themeid=[テーマのID(※)]
※ テーマのIDは管理画面でテーマのカスタマイズ開いたときのURLでわかります。数字が並んでいる箇所がテーマIDだよ。 - config.ymlファイルができているはずです。
Shopifyからテーマをダウンロードしてみよう
- 下記コマンドを打つよ。
theme download
- テーマのダウンロードが始まります。
- パーセンテージが100%になったらフォルダを確認してみよう。Shopifyからテーマファイルがダウンロードされているはず。
Shopifyと同期してみよう
この機能がマジ神です。
ローカルでファイルを変更すると、Shopifyにダイレクトに反映されます。
- 下記コマンドを打つよ。
theme watch
- ローカルでなにかファイルを変更してみましょう。
- ファイルを保存すると、自動でファイルがアップロードされます。Powershellにもログが出ているよ。
- Shopify上で表示を確認してみましょう。変更されたかな?
- 同期の終了は「ctrl+c」です。
神動画
イケメンがShopify Theme Kitの使い方を手取り足取り教えてくれます。
この人若いっぽいのに有能…すごい…!!
セルフジェル 10-3
捨てた
本2冊。自炊でデジタル化したので本体はポイ。
タッパーの蓋。何個か本体だけ割れて捨てていたけど、蓋はまだ捨ててなかった。
ショーパン
ニーソ3つ。日本でストッキング代わりに(お見せするの申し訳ないので絶対領域は見えないように)履いてたけど、こっちじゃ使わぬ。
キャミ1つ
ボロボロになったTシャツ。ウェスに。
腕時計。お気に入りだったけど文字盤が壊れて、かつ電池もなくなった。
ずっと昔のシェアメイトが置いていった扇風機。使わないしでかいのに数年我が家に鎮座。邪魔なのでさようなら。
ぶっこわれた製氷器
ぶっこわれた電気ケトル
テンション高いニット。もう着ないので寄付
タートルネック3枚。真冬の日本に帰ったときに買ったけど、こっちじゃぜんぜん着ないので寄付。
ユニクロフリース。もともと貰い物で気に入ってなかった上、十分部屋着として着たので寄付。
豪のパスポート申請テラ細かす その2
豪のパスポート申請テラ細かす で、いかに面倒かをお伝えいたしましたが、その後更に3回郵便局に足を運ぶ羽目になりました…。
一度目:
写真の裏のサインとテキストの位置が反対と言われる。詳しくは前回参照。
二度目:
写真の裏のサインには保証人の名前は書いちゃダメで、サインのみにしてほしいとのこと。また、両親のサインに必要な証人のサインは青のペンではなく黒のペンじゃなくちゃダメ。
…そんなん一回目で言われてないし…!
これだけ直せば絶対もう大丈夫なのね?!と念を押して、また保証人と証人にサインを貰いにいくはめに…
三度目:
万全の体制で三度目に挑むも、まさかの写真のサイズがダメと言われる。
今まで何度も確認して貰ってオッケーって言われてたのに!!!
もう面倒なので、追加料金払ってその場で撮ってもらうことに。
子を連れてくるため一度撤退。
四度目:
写真はすんなり撮れて、ようやく申請できることに。
しかし、新しく撮った写真の裏には保証人のサインがない。
また貰ってこなきゃなの?と聞くと今までの写真があるから要らないよとのこと…
なんなんそれ…何のためのサインだか全くわからん…
いやしかし、この申請でいちばんムカついたのが、担当者によって言うこと全然違うこと!
マジ困ったわ…
んもう、久しぶりにオーストラリア人にやられたぜ…
これでパスポート申請に不備がありましたとか言われたら、郵便局殴り込みにいってやるんだからー!
豪のパスポート申請テラ細かす
子の豪パスポート申請に行ってきました。
(子は二重国籍です。なんてオシャンティ。)
人から話を聞くに、物凄い審査細かいし時間かかるよ!と言われていたので、体制ばっちり、時間にも余裕をもって参戦しました。
ちなみにその友人は細かい書類や写真の不備で2~3度出直す羽目になったそう。
オーストラリア人、仕事出来ないくせに人の仕事には細か…いやなんでもないです。
書類は何度も確認したし、保証人のサインも情報もおっけい、写真も複数枚用意したし一発オッケーだといいな!
…うん、だめだったよね。
何が引っ掛かったかと言うと、予想以上に細かいところでした。
提出する写真の裏に「この写真は(名前)本人です」と一筆書いて、保証人のサインが必要なんですが、文章書いてからサイン書かないと駄目らしい。
管理人が用意したのはサインが先で、文章が後だったので駄目だそう…
えええー、良いじゃんよ!
どっちがどっちだって変わらないじゃん!
仕方ないのでまた保証人の人にサインを貰いにいかねばなりません…とほほほ…。
ちなみに前述の友人は、豪の永住権持っているにも関わらず、パスポートにビザラベルが貼られていないのでダメと言われたそう。
今、豪の移民局、電子化に伴いビザラベル貼ってくんないんですよね…。
ラベル貼るのにはわざわざブリスベンまで行って、お金払って(しかもそれなりに高い)ラベル貼ってもらわなきゃいけません。
そのせいで友人は生後間もない子を抱えてブリスベンまでいく羽目に…。
うちは夫がビザラベル持っていたので事なきを得ましたが、同じ目に合っている人ごまんといそうだ。
明日再度提出にいくのですが、今度こそサクッと通過することを祈ります!
中の人は外の人になりました
報告がおくれましたが、一月半くらいまえに、無事子を産みました。
いやぁ、子が居るとなかなかPC開けません。
ここにきてスマホのすごいポテンシャルを感じてます。
この投稿もスマホからの更新です。
またぼちぼち更新再開していきたい所存です。
スチームモップ買った。
スチームモップが欲しいってエントリ前に書きましたね。
買いましたー。
これ買いましたー。
KARCHER 家庭用スチームクリーナー SC1040(豪だと型番がSC1020)。
最初はシャークやH2Oのスタンド型スチームクリーナーを買おうと思っていたのですが、いろいろ調べているうちに、ケルヒャーのこのタイプを発掘。
形状は掃除機型で、床掃除にも床掃除以外にも万能に使えるタイプです。
しかもメーカーは高圧洗浄機で有名なケルヒャー、ドイツ製。
口コミも上々で、値段も高くありません。
いやー、このこ、予想以上の働きしてくれます!
買ってきてまず試したのが床掃除。
掃除機のように立ったまますいすいできるので、雑巾がけより数倍楽ー!
家中床掃除してもまだスチームが残っていたので、洗面台まわりとシャワールームまわりを掃除。
高圧スチームで汚れ吹っ飛ばすの超楽しいwww
連続使用時間があまり持たないかなーと思っていたのですが、いい意味で期待を裏切られました。
一度起動するとかなり持ちます。
ほかにもソファのお手入れや、臭いが気になるベビーベッドの洗浄などがっつり使っています。
こりゃーいい買い物したぞー。
そういや、我が家にある掃除機、これで3台目です。
1台目:ダイソン
2台目:ルンバ
3台目:ケルヒャー ← new!
そ、それぞれ用途違うし、いいよね!!
捨てた
最後の「捨てた」からちょこちょこ捨ててたものの、ブログに書いてなかった。
いや、書く必要もないんだけども。
一気にうpします。
- ずっと前にもらったブランドもののアイシャドウ
- 100均で買った卓上クリーナー
- 100均で買ったミニ花瓶2個
- 自作の壁掛け3つ
- レギンス3つ
- パンツスーツ
- スーツ上下
- 仕事用スカート
- 雑誌に付いて来た付録のエコー写真アルバム
豪のサイズと全然合わないのでさよなら - 結婚式の時の小物
- 時計
- 電話線いくつか
- 二色コード
- 小さめラグ2個
- CDの蓋が閉まらない古いミニコンポ