- ストア構築の準備をしよう
- 商品を登録しよう
- コレクションを登録しよう
- ブログ記事を作成しよう
- サイトのデザインを選ぼう
- テーマを編集しよう（セクション編）
- テーマを編集しよう（テーマ設定編）（← 今回はここ）
- ティザーサイトを作成しよう
- サイトのフォントを編集しよう
- アカウントページを作成しよう
- コンタクトフォーム を作成しよう
- About ページを作成しよう
- 規約を入力しよう
- メニューの編集をしよう
- 送料を設定しよう
- 一般設定を編集しよう
- 各種設定を編集しよう
- 決済テストを行おう
- ストアの所有権を移行しよう
前回は、テーマを編集（セクション編）しました。
前回の記事はこちら
今回は、引き続きテーマをカスタマイズしていきます。カスタマイズ画面から、フォントや色などを編集する方法を解説していきます。
今回の記事は、以下の記事を参考にしています。
今回の目標
- テーマ設定で編集できる項目を理解する
- テーマ設定から色やフォントを編集できるようになる
デモサイトを構築する際に使用する商品画像や CSV ファイルのダウンロードをしてない方はこちらからダウロードしてください。
【Shopify マスターへの道】商品画像・CSV ファイルのダウンロード
テーマ設定とは
テーマ設定では、テーマの共通設定を編集することができます。例えば、テーマのフォントを編集することができます。ここで設定したフォントは、サイトの全てのページに適用されます。
テーマ設定で編集することができる項目は、テーマにより異なります。今回は Dawn を参考に代表的な設定を行なっていきます。
では実際に、テーマ設定を編集していきましょう！
テーマの設定を編集しよう
ストアの管理画面で「テーマ ＞ 現在のテーマ ＞ カスタマイズ」と進み、カスタマイズ画面に移動します。
サイドバーにある「テーマ設定（歯車アイコン）」をクリックすると、テーマ設定の項目が表示されます。
それでは、各項目を設定していきましょう。
※設定していく順番は、（解説の都合上）サイドバーの順番通りではありませんので、ご注意ください。
カート
まずは、カートの設定をしていきます。「カート」をクリックしてください。
カートタイプ
「カートタイプ」の項目では、カートの挙動を設定できます。
デフォルトでは「ポップアップ通知」になっています。この設定の場合、商品ページなどで商品をカートに追加すると、画面の右上にポップアップが表示されます。
「ページ」の設定の場合は、商品をカートに追加すると、カート画面に遷移します。
「ドロワー」の設定の場合、カートページは無効になり、画面右側にドロワーが表示されるようになります。
今回は、デフォルトの設定にもなっている「ポップアップ通知」を選択しておきます。
販売元を表示
「販売元を表示」のチェックボックスでは、カートの商品に販売元を表示するかどうかを選択できます。今回は表示しないままにしたいので、チェックは外してください。
カートメモを有効にする
「カートメモを有効にする」のチェックボックスでは、カートページに注文のメモを表示するかどうかを選択できます。今回はチェックをつけておきます。
色
「色」の項目では、見出しや本文、背景などの色を設定することができます。
色の設定はスキームというセットで定義されています。
例で「スキーム：1」のボタンの色を変えてみます。
「スキーム：1」をクリックしてください。
「ソリッドカラーのボタンの背景」の色を変更します。ボタンの色が変更されれば OK です。
配色はデフォルトのままでいくので、色は戻しておきましょう。
タイポグラフィー
「タイポグラフィー」の項目では、テーマ内のテキストのフォントや文字サイズを編集できます。
見出し
見出しのフォントとフォントサイズを設定できます。
「フォント」で見出しに設定したいフォントを選択します。今回は、日本語に対応したフォントを選択したいので、オーソドックスな日本語フォントである「Noto Sans Japanese」を選択します。
「フォント・サイズ・スケール」で見出しのフォントサイズを設定できます。フォントのサイズはスケールで設定することができ、最大で 1.5 倍の大きさで見出しのテキストを設定できます。特に大きくしたくないので、100% のままで大丈夫です。
本文
見出しと同様に本文のフォントとフォントサイズを設定できます。今回は見出しと同じように「Noto Sans Japanese」を設定してください。フォントサイズも 100% のままで大丈夫です。
SNS
「SNS」の項目では、ストアに表示する SNS のリンクを設定することができます。前回、フッターメニューの設定のところで、SNS のリンクを追加しているのですでに設定されているはずです。
ここからも設定できるので覚えておきましょう。
ロゴ
「ロゴ」の項目では、ヘッダーなどに表示されるロゴ画像とブラウザのタブなどに表示されるファビコン画像を設定できます。
ロゴは前回、ヘッダーの設定時に登録しているので、今回はファビコン画像を設定します。ファビコンとは、ブラウザのタブに表示されるアイコンのようなものです。
「ファビコン画像」の項目で、ファビコン画像を設定することができます。ここにはお好きな画像を設定してください。画像は正方形ものを使用しましょう。
通過形式
「通過形式」の項目では、テーマ上で表示される価格の表示形式を設定できます。
「通過コードを表示する」のチェックボックスで、通過コードを表示するかどうかを設定できます。デフォルトではチェックがついているため、価格のところには「JPY」という通過コードが表示されています。今回は、チェックを外して通過コードを表示しないようにしましょう。
あとは、そのほか代表的な設定を紹介します。
レイアウト
「レイアウト」の項目では、ページの幅やセクション間のスペースなどのテーマ全体の共通レイアウトの設定ができます。
アニメーション
「アニメーション」の項目では、テーマ全体のアニメーションに関する設定を編集できます。
ボタン
「ボタン」の項目では、ボタンの線の枠線の太さや角の丸みなどを設定できます。
カスタム CSS
「カスタム CSS」の項目では、テーマ全体に独自の CSS を反映させることができます。
そのほかにも設定項目はありますが、今回は割愛させていただきます。
まとめ
今回は、テーマ設定について解説してきました。テーマ設定は、ストアの全体に影響する設定を変数することができました。
特に色なんかは、ストアの雰囲気に影響を与えるのでしっかり設定したいところです。
今回の記事は、以下の記事を参考にしています。
今回の振り返り
- テーマ設定で編集できる項目を理解できた
- テーマ設定から色やフォントを編集できるようになった
今回はここまでです。お疲れ様でした。
次回は、トップページ以外を編集します。
次回の記事はこちら
また、デモサイトの構築の際に使えるアプリはこちらです。
- シンプルのし（熨斗）アプリ
「シンプルのし（熨斗）アプリ」は、ストアにのし選択機能を導入できるアプリです。
Shopify にのし（熨斗）を設定できるアプリについて徹底解説｜ご利用ガイド
- シンプルギフトラッピング｜お手軽ギフト包装アプリ
「シンプルギフトラッピング｜お手軽ギフト包装」は、ストアにギフトラッピング選択機能を導入できるアプリです。
Shopify でギフトラッピング機能を実現するアプリについて徹底解説｜ご利用ガイド
- シンプルノベルティ｜お手軽ギフト特典
「シンプルノベルティ｜お手軽ギフト特典」は、条件を満たした注文に対してノベルティを付与できるアプリです。
.png&w=1920&q=75)
.png&w=1920&q=75)
.png&w=1920&q=75)
