theme.jsonは、色・フォント・見出しスタイルを1つのファイルでまとめて管理できる「サイトの司令塔」。
この記事では、実際のサンプルコードを見ながら図解でざっくり理解することを目指します！
① theme.jsonって何をするファイル？
WordPressでブロックテーマを使うとき、サイト全体の「色・フォント・見出しのスタイル」をまとめて管理できるのがtheme.jsonです。
今まではCSSファイルにスタイルをあれこれ書いていたのが、theme.json1つに集約できるイメージです。
😓 今まで（CSSファイル）
style.css、追加CSS、子テーマのCSS…
あちこちに書き散らかして
どこを直せばいいかわからない😭
😊 theme.jsonなら
1つのファイルに全部まとまってる！
サイト全体に一括で反映されるから
修正もラク😊
✅ つまりtheme.jsonは「サイトのデザインルールをまとめて決める設定ファイル」です。
CSSの知識がなくてもある程度整ったデザインが作れるのが最大のメリット！
② 全体の構造をざっくり見てみよう
theme.jsonの中身は大きく2階建てになっています。
まずはこの2つだけ覚えれば大丈夫です！
順番としては👇
🎨
settingsで
色を登録
✏️
stylesで
見出しに適用
🌐
サイト全体に
自動反映
📝 ざっくり覚え方：
「settings＝部品を用意する」「styles＝その部品を使って飾り付ける」
この2つのセットで動いています！
③ 色とフォントを登録する（settings）
settingsは「このサイトで使える色とフォントサイズを登録する場所」です。
ここで登録した色が、エディターのカラーパレットに並びます。
カラーパレットの作り方
こんなふうに書きます👇
"settings": {
"color": {
"palette": [
{ "slug": "base", "color": "#f9f7f4", "name": "ベース" },
{ "slug": "primary", "color": "#fff2b2", "name": "黄色" },
{ "slug": "secondary", "color": "#a7d9dd", "name": "青緑" },
{ "slug": "accent", "color": "#ee7d50", "name": "オレンジ" }
]
}
}
slug
CSS変数の名前になる
英数字で書く
color
実際の色コード
#から始まる16進数
name
エディターに表示される
日本語でもOK
💡 登録するとどうなる？
エディターのカラーパレットにこの色が並ぶようになります。
さらにvar(--wp--preset--color--primary)というCSS変数として
styles のセクションでも使えるようになります！
フォントサイズの登録
フォントサイズも同じように登録できます👇
"settings": {
"typography": {
"fontSizes": [
{ "slug": "small", "size": "0.875rem", "name": "小" },
{ "slug": "normal", "size": "1rem", "name": "標準" },
{ "slug": "medium", "size": "1.125rem", "name": "中" },
{ "slug": "large", "size": "1.375rem", "name": "大" }
]
}
}
✅ まとめると
settings に登録した色・フォントサイズは
① エディターのパレットに並ぶ
② CSS変数として styles で使い回せる
この2つが自動でできるようになります！
④ 見出しやブロックにスタイルをつける（styles）
settingsで登録した色を、実際に見出しに適用するのがstylesの役割です。
elementsでh2に背景色をつける
こんなふうに書きます👇
"styles": {
"elements": {
"h2": {
"color": {
"background": "var(--wp--preset--color--primary)"
},
"spacing": {
"padding": {
"top": "0.5rem", "bottom": "0.5rem",
"left": "1rem", "right": "1rem"
}
},
"typography": {
"fontSize": "var(--wp--preset--font-size--large)",
"fontWeight": "600"
}
}
}
}
❌ Before
h2の見出しテキスト
スタイルなし・シンプルすぎる
✅ After
h2の見出しテキスト
背景色がついて見やすくなった！
blocksでコアブロックの初期スタイルを変える
elementsが見出しやリンクなどHTML要素に適用するのに対して、
blocksはWordPressのブロック単位でスタイルを適用できます。
例えば引用ブロック（core/quote）に左ボーダーをつけるにはこう書きます👇
"styles": {
"blocks": {
"core/quote": {
"border": {
"left": {
"color": "var(--wp--preset--color--primary)",
"width": "4px",
"style": "solid"
}
},
"spacing": {
"padding": { "left": "1rem" }
},
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
}
}
}
}
❌ Before
「ブロックテーマの醍醐味は、サイト全体を自分の手でプロデュースできること」
デフォルトのまま・引用感が薄い
✅ After
「ブロックテーマの醍醐味は、サイト全体を自分の手でプロデュースできること」
左ボーダーで引用感がひと目でわかる！
📖 elementsとblocksの使い分け
例：見出しのフォントサイズ、リンクの色 blocks core/quote・core/table などブロック単位で適用
例：引用ブロックのボーダー、テーブルの背景色
⑤ 実際のtheme.jsonを見てみよう
ここまで説明してきた内容を、実際に動くtheme.jsonにまとめました。
これが最小構成のサンプルコードです。コピーしてそのまま使えます！
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"appearanceTools": true,
"useRootPaddingAwareAlignments": true,
"color": {
"defaultPalette": false,
"palette": [
{ "slug": "base", "color": "#faf8f5", "name": "ベース（背景）" },
{ "slug": "text", "color": "#2c2c2c", "name": "テキスト" },
{ "slug": "white", "color": "#ffffff", "name": "白" },
{ "slug": "muted", "color": "#888888", "name": "グレー" }
]
},
"typography": {
"lineHeight": true,
"fontFamilies": [
{
"fontFamily": "\"Helvetica Neue\", Arial, \"Hiragino Kaku Gothic Pro\", \"メイリオ\", Meiryo, sans-serif",
"slug": "sans",
"name": "ゴシック"
},
{
"fontFamily": "Georgia, \"游明朝\", YuMincho, \"Hiragino Mincho Pro\", serif",
"slug": "serif",
"name": "明朝"
}
],
"fontSizes": [
{ "slug": "small", "size": "0.875rem", "name": "小" },
{ "slug": "normal", "size": "1rem", "name": "標準" },
{ "slug": "medium", "size": "1.125rem", "name": "中" },
{ "slug": "large", "size": "1.375rem", "name": "大" },
{ "slug": "x-large", "size": "1.75rem", "name": "特大" }
]
},
"spacing": {
"units": [ "px", "em", "rem", "vh", "vw", "%" ]
},
"layout": {
"contentSize": "800px",
"wideSize": "1000px"
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--base)",
"text": "var(--wp--preset--color--text)"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--sans)",
"fontSize": "var(--wp--preset--font-size--medium)",
"lineHeight": "1.8"
},
"elements": {
"link": {
"color": { "text": "var(--wp--preset--color--text)" },
"typography": { "textDecoration": "underline" }
},
"h1": {
"typography": {
"fontSize": "var(--wp--preset--font-size--x-large)",
"fontWeight": "600",
"lineHeight": "1.4"
}
}
},
"blocks": {
"core/post-content": {
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)",
"lineHeight": "1.8"
}
},
"core/quote": {
"border": {
"left": {
"color": "var(--wp--preset--color--muted)",
"width": "4px",
"style": "solid"
}
}
}
}
},
"templateParts": [
{ "name": "header", "title": "ヘッダー", "area": "header" },
{ "name": "footer", "title": "フッター", "area": "footer" }
]
}
📖 コードの見方
⚠️ 使うときの注意
テーマフォルダの直下に theme.json という名前で保存してください。
ファイル名が違うと反映されません！
JSONファイルの書き方で迷ったら
theme.jsonを初めて見ると「カッコだらけで何がなんだか…」ってなりますよね😅
よくハマるポイントを3つだけ覚えておきましょう！
⚠️ よくあるミス① 最後のカンマ問題
❌ ダメな書き方
{
"slug": "primary",
"color": "#fff2b2", ← カンマ
}
✅ 正しい書き方
{
"slug": "primary",
"color": "#fff2b2" ← カンマなし
}
最後の項目の後ろにカンマをつけるとエラーになります。
「最後の子にはカンマなし」と覚えましょう！
💡 {} と [] の使い分け
{ }
オブジェクト
「名前：値」のセット
1つのまとまりを表す
[ ]
配列
同じものの並び
カラーパレットなど複数登録するとき
"palette": [ ← [] 複数の色を並べるから配列
{ ← {} 1つの色のまとまり
"slug": "primary",
"color": "#fff2b2"
}, ← カンマあり（次の{}がまだある）
{ ← {} 2つ目の色
"slug": "secondary",
"color": "#a7d9dd"
} ← カンマなし（最後）
]
🛠️ エラーが出たときの確認方法
theme.jsonを保存してエディターを開いたときに
スタイルが反映されていない場合は👇
- カンマの過不足がないか確認
- {}と[]が正しく閉じているか確認
- JSONLint（無料）にコードを貼り付けるとエラー箇所を教えてくれます！
もっと使いこなしたい人へ
theme.jsonの基本が理解できたら、次のステップに進んでみましょう！
ここでは2つ紹介します。
細かな設定いろいろ（覚えなくてOK！）
theme.jsonには他にも便利な設定がいくつかあります。
今は「こんなものがあるんだな」程度で大丈夫です😊
"appearanceTools": true
余白・ボーダー・リンクカラーなど、よく使うデザイン設定をまとめてONにできるスイッチです。ほぼ必須の設定です。
"useRootPaddingAwareAlignments": true
全幅ブロックを使うときに左右の余白を正しく計算してくれます。サイドバーありのレイアウトなら入れておくと安心です。
"defaultPalette": false
WordPressのデフォルトカラーパレット（青・赤・緑など）を非表示にします。自分で登録した色だけをエディターに表示したいときに使います。
"fluid": true
フォントサイズを画面幅に応じて自動で伸び縮みさせる機能です。スマホでは小さく・PCでは大きく、が自動でできます。慣れてきたら試してみてください。
📖 もっと詳しく知りたい方は
WordPressの公式ドキュメント（英語）に全設定の一覧があります。
Theme.json リファレンス → developer.wordpress.org
register_block_styleとの組み合わせ
theme.jsonで「サイト全体のルール」を決めたら、次はregister_block_styleで「ブロックのスタイルバリエーション」を追加できます。
📋 theme.json の役割
サイト全体のデザインルール
- 色・フォントの登録
- 見出しの基本スタイル
- レイアウトの幅
🎨 register_block_style の役割
ブロックのスタイル追加
- まとめボックス
- ポイントボックス
- 注意ボックス
💡 イメージとしては
theme.json＝家の設計図（全体のルール）
register_block_style＝家具のバリエーション（パーツの使い分け）
この2つを組み合わせると、HTMLを書かなくてもエディターだけでスタイルを切り替えられるようになります！
※ register_block_styleの詳しい使い方は別記事で解説予定です。