はじめに
CSS変数（カスタムプロパティ）を使うと、色・フォントサイズ・余白などのデザイントークンを一元管理できます。WordPressのtheme.jsonと連携させることで、Gutenbergブロックエディタとも設定を共有できます。
症状・原因
- カラーを変更するたびに複数箇所のCSSを修正している
- ダークモードの実装が複雑になっている
- テーマのブランドカラーをJavaScriptから変更したい
- Gutenbergブロックの色とテーマCSSが統一されていない
解決手順
ステップ1：:root でCSS変数を定義する
/* style.css または css/variables.css */
:root {
/* ブランドカラー */
--color-primary: #2271b1;
--color-primary-dark: #1a568a;
--color-secondary: #00a32a;
--color-danger: #d63638;
--color-warning: #dba617;
/* テキスト */
--color-text: #1d2327;
--color-text-muted: #50575e;
--color-border: #c3c4c7;
/* 背景 */
--color-bg: #ffffff;
--color-bg-subtle: #f6f7f7;
/* タイポグラフィ */
--font-size-base: 1rem; /* 16px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.5rem; /* 24px */
--line-height: 1.7;
/* スペーシング */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;
--space-xl: 64px;
/* ボーダー */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
/* シャドウ */
--shadow-sm: 0 1px 3px rgba(0,0,0,.12);
--shadow-md: 0 4px 12px rgba(0,0,0,.15);
}
/* 変数を使用 */
.btn-primary {
background-color: var(--color-primary);
color: #fff;
border-radius: var(--radius-md);
padding: var(--space-sm) var(--space-lg);
font-size: var(--font-size-base);
}
.btn-primary:hover {
background-color: var(--color-primary-dark);
}ステップ2：theme.json と連携させる
// theme.json（テーマルート）
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#2271b1",
"name": "プライマリ"
},
{
"slug": "secondary",
"color": "#00a32a",
"name": "セカンダリ"
}
]
},
"typography": {
"fontSizes": [
{ "slug": "small", "size": "0.875rem", "name": "小" },
{ "slug": "normal", "size": "1rem", "name": "標準" },
{ "slug": "large", "size": "1.5rem", "name": "大" }
]
}
}
}/* theme.json の値は自動的に CSS 変数として出力される */
/* --wp--preset--color--primary: #2271b1; */
/* --wp--preset--color--secondary: #00a32a; */
/* 使用例 */
.site-header {
background-color: var(--wp--preset--color--primary);
}ステップ3：JavaScriptから動的に変更する
// js/theme-switcher.js
// CSS変数をJSから変更してリアルタイムにスタイル切り替え
function applyBrandColor(color) {
document.documentElement.style.setProperty('--color-primary', color);
// 関連色も自動計算
const darkColor = adjustBrightness(color, -20);
document.documentElement.style.setProperty('--color-primary-dark', darkColor);
}
// CSSカスタマイザーから読み取る例
function adjustBrightness(hex, amount) {
const num = parseInt(hex.replace('#', ''), 16);
const r = Math.min(255, Math.max(0, (num >> 16) + amount));
const g = Math.min(255, Math.max(0, ((num >> 8) & 0xff) + amount));
const b = Math.min(255, Math.max(0, (num & 0xff) + amount));
return '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');
}ステップ4：カスタマイザーと連携する
// functions.php — カスタマイザーの色設定をCSS変数に反映
add_action('wp_head', function(): void {
$primary = get_theme_mod('primary_color', '#2271b1');
$primary = sanitize_hex_color($primary) ?? '#2271b1';
?>
<style>
:root {
--color-primary: <?php echo esc_attr($primary); ?>;
}
</style>
<?php
});
// カスタマイザーに設定を追加
add_action('customize_register', function(WP_Customize_Manager $wp_customize): void {
$wp_customize->add_setting('primary_color', [
'default' => '#2271b1',
'sanitize_callback' => 'sanitize_hex_color',
]);
$wp_customize->add_control(new WP_Customize_Color_Control(
$wp_customize,
'primary_color',
['label' => 'プライマリカラー', 'section' => 'colors']
));
});注意事項
- CSS変数はIE11では動作しません。IE11サポートが必要な場合はPostCSSのフォールバックを使用してください
var()の第2引数にフォールバック値を指定できます:var(--color-primary, #2271b1)- theme.jsonのプリセット変数名は
--wp--preset--{type}--{slug}の形式です
まとめ
:root にCSS変数を定義して全体のデザイントークンを一元管理し、theme.jsonと連携させることでGutenbergブロックとのカラー統一が実現します。カスタマイザーと組み合わせることで、コード変更なしにブランドカラーを変更できます。