Kadence Blocks で色と文字のスタイルを一元管理するコツは、色は「グローバルパレット」の番号（palette1〜palette9）で指定し、フォントはテーマ側のタイポグラフィ設定で決めて、各ブロックでは個別に上書きしないことです。こうしておけば、パレットやフォントの設定を1か所変えるだけで、サイト全体のブロックに反映されます。この記事では、パレットの役割の決め方、タイポグラフィの設定方針、独自 CSS での変数の使い方、既存ページに残った直接指定の色の洗い出し、設定のバックアップまでを説明します。
Kadence テーマ・Kadence Blocks ともに、設定画面の名称や無料版と Pro 版の機能の分け方は更新で変わることがあります（2026年10月現在）。以下では設定を目的で説明し、画面の表記は目安として扱ってください。
仕組み：パレットの「番号」で参照する
Kadence テーマを使っている場合、色の一元管理の中心はカスタマイザーの色設定にある 9 色のグローバルパレットです。パレットの各色は CSS 変数 --global-palette1 〜 --global-palette9 として出力され、ブロックエディターの色選択にも同じパレットが並びます。
ここで大事なのは、Kadence Blocks のブロックでパレットの色を選ぶと、ブロックには色の値（#1a73e8 など）ではなく「palette1」のような参照が保存される点です。そのためパレット側の色を変えると、参照しているブロックがまとめて新しい色になります。一方、カラーピッカーで任意の色を選んだり、16進数を直接入力したりすると、その値が固定で保存され、パレットを変えても追従しません。一元管理が崩れる原因のほとんどは、この「直接指定」です。
Kadence テーマ以外のテーマで Kadence Blocks だけを使う場合も、エディターの色設定からパレットを編集できる仕組みが用意されています。ただし、テーマ側が持つカラーパレット（theme.json やテーマの設定）との関係はテーマによって異なるため、どちらを正にするかを先に決め、もう一方は使わない運用にすると混乱が減ります。
なお、Kadence テーマはサイトエディターを中心とするブロックテーマではなく、カスタマイザーで設定するテーマです。WordPress コアの「スタイル」画面（グローバルスタイル）で色を管理するブロックテーマとは、設定場所が違う点に注意してください。
ステップ1：パレットの役割を決める
色を選ぶ前に、9 つの番号それぞれの「役割」を決めます。Kadence の初期状態は、おおむね次の分担になっています。
- palette1・palette2：アクセント色（ボタン、リンク、強調）
- palette3〜palette6：文字色（見出しの濃い色から、補足の薄い色まで）
- palette7〜palette9：背景色・境界線（薄い背景から白まで）
この分担を崩さないことが、後の変更を楽にします。たとえば「palette1 は常にブランドのアクセント色」と決めておけば、ブランドカラーの変更は palette1 を1回変えるだけです。逆に、ある時期だけ palette7 を赤い警告色として使うと、背景色を変えたときに警告表示まで変わってしまいます。警告やセール表示のような用途別の色が必要なら、パレット内に役割として組み込むか、後述の CSS で別の変数として管理します。
決めた役割は、サイトの運用メモに「番号・役割・色の値」の一覧として残しておくと、複数人で編集するときの共通ルールになります。
ステップ2：アクセシビリティを確認してから色を確定する
パレットを変えるとサイト全体の配色が一度に変わるため、文字色と背景色の組み合わせのコントラストは、確定前に確認します。WCAG 2.2（W3C 勧告）の達成基準 1.4.3 では、通常の文字は背景とのコントラスト比 4.5:1 以上、大きな文字は 3:1 以上が求められます。ボタンの枠線やアイコンのような文字以外の要素は、達成基準 1.4.11 で 3:1 以上が目安です。
確認すべきは、実際に使う組み合わせです。palette3〜palette5 の文字色を palette7〜palette9 の各背景に載せた場合と、ボタンの文字色（多くは palette9）をアクセント色の palette1・palette2 に載せた場合を、コントラストチェッカーで1つずつ測ります。自動チェックツールで見つかるのはアクセシビリティの問題の一部なので、実際の画面を目で見る確認も併せて行ってください。
ステップ3：タイポグラフィはテーマ側で決める
文字の一元管理も考え方は同じです。Kadence テーマのカスタマイザーにあるタイポグラフィ設定で、本文の基本フォント・サイズ・行の高さと、見出し（H1〜H6）のフォントとサイズを決めます。画面幅ごとのサイズもここで設定できます。
Kadence Blocks の見出しブロック（Advanced Heading など）にもフォントやサイズの設定がありますが、通常の見出しではこれを空欄のままにし、テーマの設定を継承させます。ブロックごとにフォントを指定すると、その見出しはテーマ側の変更に追従しなくなるうえ、ページごとに異なるフォントファイルを読み込む原因にもなります。ブロック単位の指定は、ランディングページの大見出しのような「意図して例外にする」場所だけに限ると管理しやすくなります。
フォントの数は表示速度にも影響します。使う書体は本文用と見出し用の1〜2種類、ウェイトも必要なものだけに絞ります。Google Fonts を使う場合、Kadence テーマにはフォントを自サーバーから配信する設定が用意されています。外部サーバーへのリクエストが減り、利用者の情報が第三者に送られる経路も減るので、プライバシーポリシーの観点でも検討する価値があります。
ステップ4：独自 CSS でもパレットの変数を使う
追加 CSS や子テーマの CSS で色を書くときも、16進数ではなくパレットの CSS 変数を使います。こうしておけば、独自に作った部品もパレットの変更に追従します。
/* 子テーマの style.css または「追加 CSS」 */
.notice-box {
background-color: var(--global-palette8);
color: var(--global-palette4);
border-left: 4px solid var(--global-palette1);
padding: 1rem 1.25rem;
}
.notice-box a {
color: var(--global-palette1);
}
/* パレットに無い用途別の色は、意味の分かる名前の変数にまとめる */
:root {
--site-warning: #b45309;
}
.notice-box.is-warning {
border-left-color: var(--site-warning);
}フォントについても、テーマが本文や見出しのフォントを CSS 変数として出力している場合は、それを font-family に指定できます。変数名はバージョンによって異なる可能性があるため、ブラウザの開発者ツールで :root に定義されている --global- で始まる変数を確認してから使ってください。
子テーマで CSS を読み込む場合は、wp_enqueue_style() で親テーマのスタイルの後に読み込まれるようにします。
ステップ5：直接指定された色を洗い出す
すでに運用中のサイトでは、過去に作ったページに直接指定の色が残っていることがよくあります。WP-CLI が使える環境なら、次のような読み取り専用のスクリプトで、Kadence のブロックを含む投稿のうち、色の属性に16進数が入っているものを一覧にできます。
<?php
// audit-kadence-colors.php（読み取りのみ。wp eval-file audit-kadence-colors.php で実行）
$ids = get_posts( array(
'post_type' => array( 'post', 'page', 'wp_block' ),
'post_status' => array( 'publish', 'draft', 'private' ),
'posts_per_page' => -1,
'fields' => 'ids',
'no_found_rows' => true,
) );
foreach ( $ids as $id ) {
$content = get_post_field( 'post_content', $id );
if ( false === strpos( $content, '<!-- wp:kadence/' ) ) {
continue;
}
if ( preg_match_all( '/"[A-Za-z]*(?:[Cc]olor|[Bb]ackground)[A-Za-z]*":"(#[0-9a-fA-F]{3,8})"/', $content, $m ) ) {
WP_CLI::log( sprintf( '%d %s %s', $id, get_the_title( $id ), implode( ' ', array_unique( $m[1] ) ) ) );
}
}ブロックの属性名はブロックの種類やバージョンで異なるため、このスクリプトは「色らしい名前の属性に16進数が入っているもの」を広めに拾う目安です。投稿数が多いサイトでは処理に時間とメモリを使うので、アクセスの少ない時間帯に実行するか、投稿タイプごとに分けて実行します。
見つかったページは、エディターで該当ブロックを開き、色をパレットから選び直して修正します。データベースの一括置換で書き換える方法もありますが、ブロックの構造を壊すおそれがあるため、置き換える前にバックアップを取り、ステージング環境で表示を確認できる場合に限るのが無難です。再利用ブロック（パターン）に直接指定があると、それを使っているすべてのページに影響するので、優先して直します。
ステップ6：設定をバックアップしておく
パレットやタイポグラフィの設定は、変更前に書き出しておくと元に戻せます。カスタマイザーの設定はテーマごとのオプション（theme_mods_ に続けてテーマのフォルダ名）に保存されており、WP-CLI なら wp option get theme_mods_kadence --format=json > kadence-theme-mods.json のように書き出せます。子テーマを有効にしている場合は、子テーマのフォルダ名のオプションになります。
グローバルパレットはテーマの設定とは別のオプションに保存されていることがあるため、wp option list --search="*palette*" で関連するオプションを確認し、一緒に書き出しておきます。管理画面で扱いたい場合は、カスタマイザーの設定を書き出し・読み込みできるプラグイン（Customizer Export/Import など）を使う方法もあります。
まとめ
- 色はグローバルパレットの番号で指定し、ブロックでは直接指定を避けます。パレットを変えれば参照しているブロックがまとめて変わります。
- 9 色それぞれの役割（アクセント・文字・背景）を決めて守ることが、一元管理を続ける前提です。
- パレットを確定する前に、実際に使う組み合わせのコントラストを WCAG 2.2 の基準で確認します。
- フォントはテーマのタイポグラフィ設定で決め、ブロック単位の指定は意図した例外だけにします。
- 独自 CSS でも
var(--global-palette1)のように変数を使い、既存ページの直接指定は洗い出して少しずつ置き換えます。設定は変更前に書き出しておきます。