テーマの CSS に何度も出てくる色・余白・文字サイズを CSS 変数（カスタムプロパティ）にまとめておくと、色を変えたいときに一か所を書き換えるだけで済むようになります。この記事では、既存の子テーマの CSS を変数へ移す手順、ブロックテーマで theme.json が出力する変数との付き合い方、変数化でつまずきやすい点と確認方法を説明します。
カスタムプロパティの基本
カスタムプロパティは -- で始まる名前で値を定義し、var() で呼び出す CSS の機能です。
:root {
--color-primary: #1e6fd9;
--space-m: 1.5rem;
}
.button {
background-color: var(--color-primary);
padding: var(--space-m);
}:root に書いた変数はページ全体から参照できます。var( --color-primary, #1e6fd9 ) のように第2引数を書くと、変数が定義されていなかったときの代替値になります。Sass の変数と違ってブラウザ上で動くため、メディアクエリの中や特定の要素の中で値を上書きでき、上書きした範囲の子要素にだけ新しい値が効きます。
作業の前に：子テーマで行う
親テーマの style.css を直接書き換えると、テーマ更新で変更が消えます。変数化の作業は子テーマの style.css（または子テーマから読み込む別の CSS ファイル）で行ってください。作業前には子テーマのフォルダごとバックアップを取り、できればステージング環境で確認してから本番へ反映します。
子テーマの CSS が親テーマより後に読み込まれるよう、wp_enqueue_style() の依存関係に親テーマのハンドル名を指定しておくと、上書きの順番が安定します。
手順1：繰り返し使われている値を洗い出す
いきなり全体を書き換えるのではなく、まず CSS の中で何度も出てくる値を探します。エディターの検索で # から始まる色コードや、px・rem の値を検索すると、同じ値があちこちに散らばっている様子が分かります。
洗い出したら、役割ごとに分類します。
- 色：メインカラー、文字色、背景色、境界線の色
- 余白：小・中・大の3〜4段階程度
- 文字：本文の文字サイズ、行の高さ、見出しのサイズ
- その他：角丸の大きさ、影、コンテンツ幅
「ほぼ同じだけれど微妙に違う値」（#333 と #343434 など）が見つかることもよくあります。デザイン上の意図がなければ、この段階で一つにまとめるとすっきりします。
手順2：変数を2層に分けて定義する
変数は「具体的な値」と「用途」の2層に分けると、後の変更に強くなります。
:root {
/* 具体的な値 */
--blue-600: #1e6fd9;
--gray-900: #222222;
--gray-100: #f5f5f5;
/* 用途（ここを各ルールで使う） */
--color-primary: var(--blue-600);
--color-text: var(--gray-900);
--color-bg-subtle: var(--gray-100);
--radius: 6px;
}各ルールでは用途側の変数（--color-primary など）だけを使います。こうしておくと、「ボタンの色だけ緑にしたい」ときに --color-primary の参照先を変えるだけで済み、青そのものの定義を変える必要がありません。名前は見た目（--blue）ではなく役割（--color-primary）で付けるのが、長く使えるコツです。
手順3：既存のルールを少しずつ置き換える
定義ができたら、既存のルールの値を var() に置き換えます。一度にすべてを変えると、表示崩れが起きたときに原因を特定しにくくなるため、色だけ、余白だけ、と範囲を区切って進め、そのたびに表示を確認します。
置き換えの効果が分かりやすいのがダークモードです。変数の値を上書きするだけで、ルール側を一切触らずに配色を切り替えられます。
@media (prefers-color-scheme: dark) {
:root {
--color-text: #eeeeee;
--color-bg-subtle: #1a1a1a;
}
}特定の箇所だけ色を変えたい場合も、その要素の中で変数を上書きします。たとえば .site-footer { --color-text: #ffffff; } と書けば、フッターの中だけ文字色の変数が白になります。
ブロックテーマでは theme.json の変数を活かす
ブロックテーマ（またはクラシックテーマでも theme.json を持つテーマ）では、theme.json に登録したカラーパレットや文字サイズが、WordPress によって CSS 変数として出力されます。
- カラーパレット：
--wp--preset--color--{slug} - 文字サイズ：
--wp--preset--font-size--{slug} - 余白：
--wp--preset--spacing--{slug} - フォント：
--wp--preset--font-family--{slug}
theme.json の settings.custom に書いた値も --wp--custom-- で始まる変数になります。キー名のキャメルケースはハイフン区切りに変換され、入れ子は -- でつながります。
{
"version": 3,
"settings": {
"custom": {
"lineHeight": {
"body": "1.8"
}
}
}
}この例では --wp--custom--line-height--body という変数が出力されます。ブロックテーマで独自の変数を :root に定義すると、エディターのパレットと値が二重管理になりがちです。色や文字サイズは theme.json に寄せ、追加 CSS からは var(--wp--preset--color--primary) のように WordPress が出力する変数を参照すると、エディターの色選択と CSS の値がずれません。どの変数が出力されているかは、ページのソースにある WordPress のインラインスタイルで確認できます（スラッグはテーマごとに異なります）。
PHP の値を変数に渡すとき
カスタマイザーの設定値などを CSS 変数に渡したい場合は、wp_add_inline_style() で親となるスタイルシートの後に出力します。ユーザーが入力できる値を CSS に出すときは、そのまま出力せず検証します。
<?php
add_action( 'wp_enqueue_scripts', function () {
$color = sanitize_hex_color( get_theme_mod( 'my_primary_color', '#1e6fd9' ) );
if ( $color ) {
wp_add_inline_style( 'my-child-style', ':root{--color-primary:' . $color . ';}' );
}
}, 20 );my-child-style は子テーマの CSS を読み込むときに付けたハンドル名に合わせてください。sanitize_hex_color() は正しいカラーコードでなければ空の値を返すため、不正な文字列が CSS に入るのを防げます。
つまずきやすい点と確認方法
変数名を打ち間違えても、CSS はエラーを出しません。定義されていない変数を参照したプロパティは無効扱いになり、代替値がなければ親から引き継いだ値や初期値で表示されます。「前に書いた別の宣言が残る」わけではない点に注意してください。
また、変数はメディアクエリの条件部分（@media (min-width: var(--bp)) のような書き方）には使えません。ブレークポイントは数値で書きます。
確認にはブラウザの開発者ツールを使います。要素を選択するとスタイル欄に変数の参照が表示され、変数名にカーソルを合わせると現在の値が分かります。コンソールで getComputedStyle(document.documentElement).getPropertyValue('--color-primary') を実行すると、ページ全体での値を直接確かめられます。変更が見えないときは、キャッシュ系プラグインやブラウザのキャッシュも削除してください。
ブラウザの対応状況は（2026年10月現在）、主要なブラウザで問題なく使える状態です。
まとめ
- 繰り返し出てくる色・余白・文字サイズを洗い出し、子テーマの CSS で
:rootに変数として定義します - 変数は「具体的な値」と「用途」の2層に分け、ルールでは用途側を使います
- 置き換えは範囲を区切って進め、ダークモードや部分的な配色変更は変数の上書きで行います
- ブロックテーマでは theme.json が出力する
--wp--preset--の変数を参照し、二重管理を避けます - 変数の打ち間違いはエラーにならないため、開発者ツールで値を確認します