クリエイターモードには、CSSを記述できる場所が2種類あります。
それぞれの役割の違いを理解しておくと、意図した通りにデザインを設定しやすくなります。
全ページ共通CSS
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」欄
ここに記述したCSSは、ショップ内のすべてのページ（トップページ・商品詳細ページ・カートページなど）に適用されます。 フォントや文字サイズ、ボタンの色など、ショップ全体で統一したいスタイルを記述する場所です。
各ページのCSS欄
ショップデザイン / テンプレート選択・編集 / クリエイターモード /（トップ・商品詳細など各ページ）「CSS」欄
ここに記述したCSSは、そのページのみに適用されます。
「トップページだけスライドショーのスタイルを変えたい」、「商品詳細ページだけ見出しのデザインを変えたい」
といった場合に使用します。
例）商品詳細「CSS」欄 赤枠内
CSSが読み込まれる順番
クリエイターモードでは、CSSは以下の順番で読み込まれます。
① 全ページ共通「CSS」欄（ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」欄） ↓ ② 各ページの「CSS」欄（例：トップ「CSS」欄、商品詳細「CSS」欄 など）
後から読み込まれたCSSが優先されるため、同じセレクタに対してスタイルが競合した場合、各ページの「CSS」欄に書いた内容が全ページ共通CSSより優先して適用されます。
『全体のベースは全ページ共通「CSS」欄で設定しておき、ページごとに変えたい部分だけ各ページの「CSS」欄で上書きする』
という使い方が基本的な流れです。
使い分けの目安
| やりたいこと | 書く場所 |
|---|---|
| ショップ全体のフォントを変えたい | 全ページ共通「CSS」欄 |
| トップページのバナーだけ装飾したい | トップページの「CSS」欄 |
| 商品詳細ページの見出しだけ変えたい | 商品詳細ページの「CSS」欄 |
補足
- 全ページ共通CSSに書いたスタイルが各ページで意図せず上書きされている場合は、各ページのCSS欄の記述との競合を確認してみてください。
- まずは全ページ共通CSSにまとめて書いておき、ページごとに上書きしたい部分だけ各ページのCSS欄に追記するやり方がおすすめです。
「競合」とはどういう状態ですか？
「競合」とは、同じ要素に対して複数の場所からCSSが当たっていて、どちらを適用するか優先順位が決まる状態のことです。
例えば、全ページ共通CSSで「見出しの文字色を黒にする」と書き、さらにトップページのCSS欄で「見出しの文字色を赤にする」と書いた場合、両方の指定がトップページに同時に当たります。この場合、後から読み込まれる各ページのCSS欄の指定が優先されるため、トップページの見出しは赤になります。
意図せず競合が起きると「書いたはずなのに色が変わらない」「ページによって見た目が違う」といった状態になります。そのような場合は、同じセレクタへの指定が複数の場所に書かれていないかを確認してみてください。