- ストア構築の準備をしよう
- 商品を登録しよう
- コレクションを登録しよう
- ブログ記事を作成しよう
- サイトのデザインを選ぼう
- テーマを編集しよう（セクション編）
- テーマを編集しよう（テーマ設定編）
- トップページ以外を編集しよう
- サイトのフォントを編集しよう（← 今回はここ）
- アカウントページを作成しよう
- コンタクトフォーム を作成しよう
- About ページを作成しよう
- 規約を入力しよう
- メニューの編集をしよう
- 送料を設定しよう
- 一般設定を編集しよう
- 各種設定を編集しよう
- 決済テストを行おう
- ストアの所有権を移行しよう
前回は、トップページ以外の編集方法を解説しました。
前回の記事はこちら
今回は、フォントの編集を行なっていきます。見出しのフォントに Google Fonts を使う方法を解説していきます。
プログラミングの基本的な知識（HTML や CSS）があった方が編集しやすいですが、プログラミングの知識がない方でもできるようになるべくわかりやすく解説していきます。
頑張っていきましょう！
今回の記事は以下の記事を参考にしています。
【Shopify マスターへの道】#9 サイトのフォントを編集しよう
今回の目標
- フォントの種類を編集する
- フォントのサイズを編集する
デモサイトを構築する際に使用する商品画像や CSV ファイルのダウンロードをしてない方はこちらからダウロードしてください。
【Shopify マスターへの道】商品画像・CSV ファイルのダウンロード
フォントの編集
今回は、ベースフォントに「Noto Sans Japanese」、大きい見出しに「Dancing Script」というフォントを使います。
ベースのフォントに関しては、テーマ設定にある「タイポグラフィー」の項目で設定済みです。設定方法については以下の記事を参考にしてください！
「Dancing Script」は、Google フォントで提供されているフォントで、無料で使うことができます。外部の Web フォントを使用する際には、テーマのコードを編集する必要があります。
今回の記事では、この Web フォントを設定する方法について詳しく解説していきます。
コードを編集する前に
コードを編集する前に、テーマをコピーしておきます。コピーしてバックアップを取っておくことで、トラブルが起きた際に最初の状態に簡単に戻すことができます。特に初心者の方は、しっかりとコピーを残しておきましょう。
では、テーマをコピーします。「オンラインストア > テーマ > 現在のテーマ」の「3 点アイコン」の中にある「複製」をクリックしてください。
現在のテーマの複製がテーマライブラリーに追加されます。
名前を変更しておきます。複製されたテーマの「3 点アイコン」の中にある「名前を変更」でテーマの名前を変更します。今回はバックアップなので、「Dawn_Custom_Backup」としておきます。
コード編集画面を開く
コードの編集画面を開きます。「オンラインストア > テーマ > 現在のテーマ」の「3 点アイコン」の中にある「コードを編集する」をクリックします。クリックすると、画像のようなテーマのコード編集画面が表示されます。
画像のようなテーマのコード編集画面が表示されます。
フォントを編集するコードを追記していく、ファイルは「テンプレート」フォルダの中にある「theme.liquid」なので、このファイルを開きます。
（コードを全く書いたことがない人向けに、記事の一番最後に今回の内容を簡単にまとめた章があります。コピペするだけで編集が完了するので、コードの編集が難しく感じる方は、そちらだけを読んでいただいても結構です。一番下までスクロールしてください。）
Google デベロッパーツールも使うので、プレビュー画面も開いておきましょう。
「オンラインストア」の横にある「目のマーク」をクリックし、プレビュー画面を開きます。プレビュー画面は、別タブで開きます。
見出しのフォントを「Dancing Script」にする
「Dancing Script」は Google フォントから使用します。
Google フォントを使うと、デバイスに依存せずに全ての端末で同じフォントを表示させることができます。ユーザーがサイトを開くたびに、Google フォントとの通信が発生するので、全ての文字を Google フォントにするとサイトの表示速度が遅くなってしまいます。そのため、今回は見出し部分だけを Google フォントで表示させます。
では、Google フォントのサイトを開いてください。
サイトへアクセスしたら、検索窓で「Dancing Script」と検索します。「Dancing Script」が出てきたら、クリックしてフォントの詳細ページへ移動します。
詳細ページでは、フォントのスタイルを選択することができます。右上に表示されている「Get font」をクリックします。
以下の画面が表示されます。「Ge embed code」をクリックすると、選択したフォントを埋め込むためのコードを取得できる画面が表示されます。
今回は @import を使用してフォントを読み込みたいので、「Web」のタブに表示されている「@import」を選択します。
まず、「Embed code in the <head> of your html」のコードをコピーします。
コード編集画面に戻り、コピーしたコードを theme.liquid の head タグの中に貼り付けます。
今回は、</head>（head の閉じタグ）の直前の 283 行目の直前に貼り付けていきます。（行数は Dawn のバージョンによっては異なる場合があるので注意してください。）
貼り付けると以下の状態になります。（インデントは適当に揃えています。）
では、大きな見出しを「Dancing Script」に変更します。Google デベロッパーツールで調べると、リッチテキストの見出しなどには、「.h1」というクラス名が付けられているようです。そこで、今回は「h1」タグと「.h1」クラスに「Dancing Script」を適用させます。
以下のコードを追加します。追加する場所は、先ほど貼り付けたコードの </style> の直前です。
h1, .h1 {
}
再度 Google フォントへ戻り、「Dancing Script: CSS class for a variable style」に記述してあるコードをコピーします。コピーしたコードを、コードの編集画面に戻り { } の中に貼り付けます。
以下にコードを置いておきます。
font-family: "Dancing Script", cursive;
これをは英字にのみ適用されるフォントなので、日本語には適用されません。日本語の場合は「Noto Sans Japanese」を適用したいので、以下のようにコードを書き換えます。
font-family: "Dancing Script", cursive, 'Noto Sans Japanese', sans-serif;
これで見出しが英字の時は「Dancing Script」、日本語の時は「游明朝体」を適用することができました。コードの変更を保存してください。
プレビュー画面で確認してみて、以下のように見出しのフォントが変更されていれば OK です。
フォントの種類の変更は以上で終了です。HTML と CSS の知識がないと、この辺の編集は難しく感じると思います。
フォントサイズの編集
フォントサイズもテーマ設定で設定することができますが、今回はコードを編集してみたいと思います。
スライドショーの見出しを「48px」に変更してみます。フォントの大きさは、作るストアの雰囲気に合わせて設定すると良いでしょう。
先ほどの <style> タグの中にコードを追加していきます。
スライドショーの見出しのクラス名を Google デベロッパーツールで調べます。
スライドショーの見出しは「h2」タグで書かれていて「banner__heading」というクラス名が付けられています。そこで、以下のコードを追加します。「!important」は、何よりもこの設定を優先するという意味があります。メディアクエリの設定が関係しているのですが、ここでは割愛します。
.banner__heading {
font-size: 48px!important;
}
コードを追加したら、保存しプレビュー画面で確認します。
このように、フォントサイズが変更されていれば OK です。
以上でフォントの編集は終了です。
かなりお洒落な感じの雰囲気になったと思います。それだけフォントがストアの雰囲気に与える影響が大きいということですね。
フォントの編集（コードを編集することが難しい方向け）
ここからは、コードの編集をすることが難しく感じた方向けに今回の内容を簡単にまとめたものになります。
ではいきましょう。
このブロックを読んでいただいている方は、次の画面が表示されていると思います。
このファイルにの 283 行目に </head> という文字があるはずなので、その直前に以下のコードを貼り付けます。（行数は Dawn のバージョンによっては異なる場合があるので注意してください。）
<style>
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
h1, .h1 {
font-family: "Dancing Script", cursive, 'Noto Sans Japanese', sans-serif;
}
.banner__heading {
font-size: 48px!important;
}
</style>
コードを貼り付けたら、変更を保存してください。
保存したらプレビュー画面で変更が適用されているかどうか確認します。
「オンラインストア」の横にある「目のマーク」をクリックし、プレビュー画面を開きます。プレビュー画面は、別タブで開きます。
どうでしょうか、ちゃんと変更が反映されていれば編集は終了です。
まとめ
今回は、フォントの編集を行ってきました。テーマの liquid ファイルを編集しなければいけなかったので、少し難しかったと思います。
HTML や CSS の知識があれば、今回の内容くらいの編集は簡単にできます。これまで全然コードには触れたことがなかったという方は、ぜひ勉強してみてください。基礎知識をつけるだけで対応できると思いますよ。
今回の記事は以下の記事を参考にしています。
【Shopify マスターへの道】#9 サイトのフォントを編集しよう
今回の振り返り
- フォントの種類を編集できた
- フォントのサイズを編集できた
今回もお疲れ様でした。次回は、アカウントページを作成します。
次回の記事はこちら
また、以下のようなアプリを使うことでコーディングなしで簡単にページをアレンジすることができます。合わせてご確認ください。
- シンプルスライドショー｜お手軽画像スライダー
「シンプルスライドショー｜お手軽画像スライダー」は、ストアにノーコードでスライドショーを表示できるアプリです。
Shopify にスライドショーを追加して画像をスライダー表示できるアプリについて徹底解説｜ご利用ガイド
- シンプル流れるロゴ｜流れるロゴリスト挿入アプリ
「シンプル流れるロゴ｜流れるロゴリスト挿入アプリ」は、ストアにノーコードで流れるロゴリストを挿入できるアプリです。
Shopify に流れるロゴリストを設置して画像のスライドショーを表示できるアプリについて徹底解説｜ご利用ガイド
- シンプル余白調整｜お手軽レイアウト
「シンプル余白調整｜お手軽レイアウト」は、ストアにノーコードで余白を挿入できるアプリです。
Shopify に余白（マージン）を挿入してページデザインの調整ができるアプリについて徹底解説｜ご利用ガイド
- シンプル画像バナー｜お手軽広告バナーアプリ
「シンプル画像バナー｜お手軽広告バナーアプリ」は、ストアにノーコードで画像バナーを挿入できるアプリです。
Shopify に画像バナーを追加できるアプリについて徹底解説｜ご利用ガイド
- シンプル流れる告知｜流れるお知らせ挿入アプリ
「シンプル流れる告知｜流れるお知らせ挿入アプリ」は、ストアにノーコードで流れる告知を挿入できるアプリです。
.png&w=1920&q=75)
.png&w=1920&q=75)
.png&w=1920&q=75)
