2026年5月20日

WordPressでCSSカスタムプロパティ（変数）を使う方法

テーマ・デザイン

はじめに

CSSカスタムプロパティ（CSS変数）はサイト全体のデザイントークンを一元管理できる機能です。WordPressでは :root での定義・theme.json の自動生成・Customizer連携・JavaScriptからの動的変更が可能です。

症状・原因

ブランドカラーを1箇所で管理してサイト全体に反映したい
テーマのカラーをカスタマイザーから変更できるようにしたい
JavaScriptでCSSの値を動的に変更したい
theme.jsonとCSS変数の関係が分からない

解決手順

ステップ1：:rootでカスタムプロパティを定義する

/* style.css */
:root {
    /* カラートークン */
    --color-primary:     #2271b1;
    --color-primary-dark: #135e96;
    --color-accent:      #d63638;
    --color-text:        #1d2327;
    --color-text-muted:  #50575e;
    --color-bg:          #ffffff;
    --color-bg-alt:      #f0f0f1;
    --color-border:      #c3c4c7;

    /* スペーシングトークン */
    --space-xs:  8px;
    --space-sm:  16px;
    --space-md:  24px;
    --space-lg:  48px;
    --space-xl:  80px;

    /* タイポグラフィ */
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.25rem;
    --font-size-xl:   1.5rem;
    --line-height-base: 1.7;

    /* レイアウト */
    --content-width: 800px;
    --wide-width:    1200px;
    --border-radius: 4px;
}

/* 使用例 */
.site-header {
    background: var(--color-primary);
    padding: var(--space-sm) var(--space-md);
}

.wp-element-button {
    background: var(--color-primary);
    border-radius: var(--border-radius);
}

ステップ2：theme.jsonから自動生成されるCSS変数を活用する

// theme.json のpalette定義
{
    "settings": {
        "color": {
            "palette": [
                { "slug": "primary", "color": "#2271b1", "name": "プライマリ" }
            ]
        }
    }
}

自動生成されるCSS変数：

/* WordPressが自動生成 */
--wp--preset--color--primary: #2271b1;
--wp--preset--font-size--medium: 1rem;
--wp--preset--spacing--md: 24px;

/* これらをカスタムCSSで参照 */
:root {
    --color-primary: var(--wp--preset--color--primary);
}

ステップ3：Customizerでカスタムプロパティを動的変更する

// functions.php — Customizerにカラー設定を追加
add_action('customize_register', function(WP_Customize_Manager $wp_customize): void {
    $wp_customize->add_setting('primary_color', [
        'default'           => '#2271b1',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage', // リアルタイムプレビュー
    ]);

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'primary_color', [
        'label'   => 'プライマリカラー',
        'section' => 'colors',
    ]));
});

// CSS変数としてインライン出力
add_action('wp_head', function(): void {
    $color = get_theme_mod('primary_color', '#2271b1');
    echo '<style>:root { --color-primary: ' . sanitize_hex_color($color) . '; }</style>' . "\n";
});

ステップ4：JavaScriptからCSS変数を読み書きする

// CSS変数の値を取得
const primary = getComputedStyle(document.documentElement)
    .getPropertyValue('--color-primary').trim();
// → "#2271b1"

// CSS変数を動的に変更（テーマ切り替えなど）
document.documentElement.style.setProperty('--color-primary', '#d63638');

// 複数変数を一括変更
const theme = {
    '--color-primary': '#d63638',
    '--color-bg':      '#1a1a2e',
    '--color-text':    '#ffffff',
};
Object.entries(theme).forEach(([key, value]) => {
    document.documentElement.style.setProperty(key, value);
});

注意事項

CSSカスタムプロパティはIE11では動作しません。IE11サポートが必要な場合はポリフィルを使用するか、フォールバック値を記述してください（例: color: #2271b1; color: var(--color-primary);）
theme.json で生成される --wp--preset--* 変数はWordPressが管理するため、直接上書きは避けてください。:root { --color-primary: var(--wp--preset--color--primary); } のように参照して使うのが推奨です
transport: 'postMessage' でCustomizerのリアルタイムプレビューが有効になります。JavaScriptでの更新も合わせて実装してください

まとめ

:root にデザイントークンを定義し、var(--color-primary) で参照します。theme.json のpalette定義から --wp--preset--color--{slug} が自動生成されます。Customizerと連携するには get_theme_mod() → wp_head でインラインCSSとして出力します。

Post Views: 11