【WordPress ブロックテーマ自作④】色は後から変えられる！カラーパレットのslug設計とおすすめ構成

カラーパレットの設定をします。

この記事では、私がおすすめするslug構成と、実際の使い方を紹介します。

色設定の2段構造をざっくり知っておく

theme.jsonの色設定は2段階になっています。ざっくりイメージだけつかんでおきましょう。

settings.color.palette

「使える色の候補」を登録する場所

👉 この記事でやること

↓ ここに登録した色を「どこに使うか」を指定する

styles.color

「サイト全体に実際に適用する」場所

⚠️ ここに書かないと、パレットに登録しても見た目は変わらない

💡 settings は「色の候補を用意する場所」、styles は「実際に着る服を決める場所」のイメージです。
今回、stylesはさわりません。ブロックを組むときにパレット（色の候補）から選べるように準備します。

slugが「色の住所」になる

カラーパレットに色を登録するとき、それぞれの色にslug（スラッグ）という名前をつけます。これが色の「住所」になります。

theme.jsonの書き方（イメージ）

    // メインカラーを登録

    { “slug”: “primary”, “color”: “#4a7c7e”, “name”: “メイン” }

この場合、テンプレートの中では色の値（#4a7c7e）ではなく、slug（primary）で色が紐づきます。

💡 エディターで色を選ぶときに、カスタムカラーではなくパレットから選んだところは、あとから一括で変更できます。

theme.jsonにカラーパレットを追加する

settingsの中に以下をコピペしてください。色の値は仮のものでOKです。あとから自由に変えられます。

"color": {
  "defaultPalette": false,
  "palette": [
     { "slug": "primary",    "color": "#4a7c7e", "name": "メイン" },
     { "slug": "secondary",  "color": "#c8956c", "name": "サブ" },
     { "slug": "accent",     "color": "#e8b4a0", "name": "アクセント" },
     { "slug": "base",       "color": "#333333", "name": "ベーステキスト" },
     { "slug": "white",      "color": "#ffffff", "name": "白" },
     { "slug": "gray-light", "color": "#f8f9fa", "name": "薄灰(背景)" },
     { "slug": "gray-medium","color": "#e9ecef", "name": "中灰(枠線)" },
     { "slug": "ui-info",    "color": "#eef7f8", "name": "情報" },
     { "slug": "ui-success", "color": "#eff3ef", "name": "おすすめ" },
     { "slug": "ui-warning", "color": "#fcf8ed", "name": "注意" },
     { "slug": "ui-danger",  "color": "#f9efee", "name": "危険" }
    ]
  }

⚠️ "defaultPalette": false を忘れずに。これがないとWordPressデフォルトの色が大量に表示されてパレットが混沌とします。

theme.jsonの全体像はこうなります。

{
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px"
    },
    "color": {
      "defaultPalette": false,
      "palette": [
       { "slug": "primary",    "color": "#4a7c7e", "name": "メイン" },
       { "slug": "secondary",  "color": "#c8956c", "name": "サブ" },
       { "slug": "accent",     "color": "#e8b4a0", "name": "アクセント" },
       { "slug": "base",       "color": "#333333", "name": "ベーステキスト" },
       { "slug": "white",      "color": "#ffffff", "name": "白" },
       { "slug": "gray-light", "color": "#f8f9fa", "name": "薄灰(背景)" },
       { "slug": "gray-medium","color": "#e9ecef", "name": "中灰(枠線)" },
       { "slug": "ui-info",    "color": "#eef7f8", "name": "情報" },
       { "slug": "ui-success", "color": "#eff3ef", "name": "おすすめ" },
       { "slug": "ui-warning", "color": "#fcf8ed", "name": "注意" },
       { "slug": "ui-danger",  "color": "#f9efee", "name": "危険" }
     ]
    }
  },
  "styles": {
    "spacing": {
      "padding": {
        "top": "0px",
        "right": "20px",
        "bottom": "0px",
        "left": "20px"
      }
    }
  },
  "templateParts": [
    { "name": "header", "title": "ヘッダー", "area": "header" },
    { "name": "footer", "title": "フッター", "area": "footer" },
    { "name": "sidebar", "title": "サイドバー", "area": "uncategorized" }
  ]
}

💡 ハイライトしている部分が今回追加した箇所です。

エディターでパレットを確認する

theme.jsonを保存したら、エディターで登録した色が反映されているか確認しましょう。

外観 → エディターを開く

左メニュー「スタイル」

「色」→「パレット」→「テーマ」に登録した色が並んでいればOK！

新しいパレットの構成案

メイン

サブ

アクセント

ベース

白

薄灰(背景)

中灰(枠線)

情報

実際にヘッダーで使ってみる

💡 ヘッダーの本格的な作り込みは次の記事でやります。今回は「パレットの色がコードに反映される」ことを体感するのがゴールです。

サイトエディターの使い方がわからないという方へ
既存のテーマ前提ですが👇の記事で解説しています。

【ブロックテーマ入門②】サイトエディターの歩き方ブロックテーマの醍醐味は、「サイトエディター」。これを使えば、本文だけでなく、ヘッダーもサイドバーも、サイト全体のデザインを丸ごとあなたの手でプロデュースできる…

ヘッダーを開いてグループを追加する

外観 → エディター → パターン → テンプレートパーツ → ヘッダーを選択して開く

左上の「リストビュー」アイコンをクリックして開いておくと便利です。

エディター上の「＋」からグループブロックを追加する

⚠️ リストビューで「グループ」が選択中になっているか必ず確認しましょう。段落など別のブロックが選ばれていると、色の設定先が変わってしまいます。

パレットから背景色を選ぶ

リストビューでグループを選択中の状態で、右パネル「スタイル」→「色」→「背景」をクリック

パレットからメイン（primary）を選択する

マークアップを確認する

リストビューの「グループ」の右側にある︙をクリック → 「コピー」を選択

メモ帳などに貼り付けて確認する

💡 リストビューからコピーすると、選択したグループブロックだけのコードが取れます。

貼り付けたコードの中に、こんな記述があればOKです。

  <!– wp:group {

    “backgroundColor”:”primary”,

    “layout”:{“type”:”constrained”}

  } –>

  <div class=”wp-block-group has-primary-background-color has-background”>

  <!– /wp:group –>

“backgroundColor”:”primary”

色の値ではなくslugの名前が入っている → 着せ替え可能な状態

has-primary-background-color

WordPressが自動で生成するCSSクラス。slugを元に作られる

💡 色の値（#4a7c7e）ではなくslug名（primary）が埋め込まれているのがポイントです。
パレットの色を変えると、テンプレート側は触らずに色が変わります。

💡 "layout":{"type":"constrained"} ってなに？

グループブロックの右パネル「レイアウト」→「コンテンツ幅を使用するインナーブロック」がオンになっているとこの記述がつきます。

これがついていると、theme.jsonで設定したcontentSize・wideSizeの幅が尊重されます。ヘッダーのグループにはこれがついているのが自然な状態です。

（参考まで）サイトエディターで色を変える

サイトの色を変えたくなったときにやることはシンプルです。

色を変えたいときにやること

サイトエディターでスタイルを開く

色 → パレットを編集 → 色を変更

保存する（変更をレビューから） → サイトに自動反映 🎉

before

“slug”: “primary”,
“color”: “#4a7c7e”

after

“slug”: “primary”,
“color”: “#7c4a6e”

ファイル（theme.json）のコードは一切触らなくてOKです。元に戻したい時は「︙」から「リセット」できます。

次の記事では、いよいよヘッダーとフッターを本格的に組んでいきます。エディターでブロックを並べて、コピーして貼り付けるだけ——コードをゼロから書く必要はありません。