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

テンプレートを組む前に、もうひとつだけtheme.jsonでやっておきたいことがあります。

それがカラーパレットの設定です。
大事なのは「色の名前（slug）」を先に決めておくことで、この設計をしておくだけで、ヘッダーの色を変えたい・サイト全体の雰囲気を変えたい、そんなときに1箇所を変えるだけで全部変わる仕組みができあがります。

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

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

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

settings.color.palette

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

エディターの色選択パネルに「自分の色だけ」を表示させます。ここに書いただけでは、サイトの見た目はまだ変わりません。

👉 この記事でやること

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

styles.color

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

背景色・文字色など、サイト全体のベース色をここで指定します。paletteに登録した色を、slugの名前で呼び出して使います。

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

💡 settings は「色の候補を用意する場所」、styles は「実際に着る服を決める場所」のイメージです。

slugが「色の住所」になる

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

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

    // メインカラーを登録

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

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

つまり、後から#4a7c7eを別の色に変えても、テンプレートは壊れません。slugという住所は変わっていないので、新しい色が自動的に反映されます。

✅ slugで紐づけた場合

色の値を変える
　↓
サイト全体に自動反映 🎉

1箇所変えるだけでOK

⚠️ カスタムカラーで直塗りした場合

色の値がそのまま埋め込まれる
　↓
1つ1つ手作業で変更が必要 😱

着せ替えの仕組みが使えない

💡 基本的に、エディターで色を選ぶときは、カスタムカラーではなくパレットから選ぶ。

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": "ui-info",    "color": "#e8f4fd", "name": "情報" },
    { "slug": "ui-success", "color": "#e8f5e9", "name": "おすすめ" },
    { "slug": "ui-warning", "color": "#fff8e1", "name": "注意" },
    { "slug": "ui-danger",  "color": "#fdecea", "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": "ui-info",    "color": "#e8f4fd", "name": "情報" },
        { "slug": "ui-success", "color": "#e8f5e9", "name": "おすすめ" },
        { "slug": "ui-warning", "color": "#fff8e1", "name": "注意" },
        { "slug": "ui-danger",  "color": "#fdecea", "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！

パレットのイメージ

メイン

サブ

アクセント

ベーステキスト

白

情報

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

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

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

【ブロックテーマ入門②】サイトエディターの歩き方目次「サイトエディター」を開いてみよう2つの「状態」選択モード：「玄関ホール」を理解しよう！編集モード：「机の形」を覚えよう保存するときの「謎のチェックボックス」〜最後のお買い物確認〜失敗しても安心！『リセットボタン』の […]

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

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

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

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

リストビューのイメージ

▼ グループ選択中

　段落

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

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

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

パレットからメイン（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）が埋め込まれているのがポイントです。
後からpaletteの色の値を変えるだけで、テンプレート側は何も触らずに色が変わります。

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

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

エディターの設定

コンテンツ幅を使用する
インナーブロック → オン

→

コードに出てくる

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

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

slugの色を変えるだけで着せ替えできる

ここまでの設計ができていると、サイトの色を変えたくなったときにやることはシンプルです。

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

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

変えたいslugのcolorの値だけ書き換える

保存する → サイト全体に自動反映 🎉

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

before

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

after

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

💡 最初に「色より名前（slug）を決める」設計をしておくと、あとからサイトの雰囲気をまるごと変えることができます。これがカラーパレットを活用する一番の理由です。

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