Astraでサイト全体の配色を変えるなら、個々のパーツの色を1つずつ変えるのではなく、カスタマイザーの「グローバル」→「カラー」にあるグローバルパレットを編集するのが基本です。パレットの色はCSS変数としてサイト全体とブロックエディターで共有されるので、パレットを1か所直すだけで、その色を参照している要素がまとめて変わります。この記事では、パレットの仕組み、編集手順、ブロックやカスタムCSSとの連携、変更が反映されないときの確認点を順に説明します。
Astraのカラーパレットの仕組み
Astraはカスタマイザーで設定するクラシックテーマです（ブロックエディターには対応していますが、サイトエディターや theme.json で配色を管理するブロックテーマではありません）。そのため、配色の管理はカスタマイザーのグローバルパレットが中心になります。
グローバルパレットには9色のスロットがあり、それぞれがCSS変数 --ast-global-color-0 から --ast-global-color-8 に対応しています。各スロットには「ブランドカラー」「見出し」「本文」「背景」といった役割が割り当てられていて、テーマの見出し色やリンク色、ボタン色などは、色の値そのものではなく「パレットの何番か」を参照する形で設定されています。
この参照の仕組みがポイントです。
- パレットの色を変えると、そのスロットを参照している要素はすべて新しい色になる
- 個別の設定画面でパレットではなく任意のカラーコードを直接入れた要素は、パレットを変えても変わらない
「パレットを変えたのに一部の色だけ古いまま」というトラブルは、ほとんどがこの2つ目に当たります。ここでの説明は（2026年10月現在）の構成に基づいています。スロットの役割名や数はAstraのバージョンで変わることがあるので、実際の画面の表示を優先してください。
手順1：変更前に現在の設定をバックアップする
配色の変更はカスタマイザーの「公開」を押した時点で反映され、元の色を覚えていないと戻せません。作業前に現在の設定を保存しておきます。
Astraのカスタマイザー設定はデータベースの astra-settings というオプションにまとめて保存されています。WP-CLIが使えるなら、次のコマンドでファイルに書き出せます。
wp option get astra-settings --format=json > astra-settings-backup.json戻すときは次のように読み込みます。
wp option update astra-settings --format=json < astra-settings-backup.jsonコマンドが使えない環境では、カスタマイザーの設定を書き出せるプラグイン（Customizer Export/Import など）を使うか、少なくとも現在のパレットのカラーコードをメモしておきます。ステージング環境で配色を決めてから本番に反映する運用なら、本番を壊す心配もありません。
手順2：グローバルパレットを編集する
- 「外観」→「カスタマイズ」を開く
- 「グローバル」→「カラー」に進む
- 「グローバルパレット」の色見本が並んでいる箇所で、変更したいスロットをクリックしてカラーピッカーを開く
- カラーコードを入力するか、ピッカーで色を選ぶ。プレビューにすぐ反映されるので、見出し・本文・ボタン・リンクの見え方を確認する
- 問題なければ「公開」を押して保存する
Astraには、あらかじめ組み合わせを用意したパレットのプリセットもあり、そこから選んで微調整するとバランスを取りやすくなります。複数のパレットを持ち、使うものを切り替えられる構成になっているバージョンもあります。
役割に沿って色を決める
9色を自由に決めてよいわけではなく、スロットの役割に沿って選ぶと破綻しにくくなります。
- ブランド系（濃い色）：ボタンやリンク、アクセントに使われます。サイトのメインカラーを入れます
- 見出し・本文：読みやすさに直結します。背景との明度差を十分に取ります
- 背景系（薄い色）：ページ背景、セクション背景、区切り用に使われます。ほぼ白からごく薄い色で段階を付けます
文字色と背景色の組み合わせは、WCAGの目安である「通常の文字でコントラスト比 4.5:1 以上」を満たすか、コントラストチェックのツールで確かめておくと、スマートフォンの屋外表示でも読みやすくなります。
手順3：個別の色設定がパレットを参照しているか確認する
パレットを変えても色が変わらない要素があれば、その要素の個別設定を開きます。
- 「グローバル」→「カラー」内の基本色（テキスト、リンク、見出し、背景など）
- ヘッダービルダーの各部品（上部バー、メインヘッダー、メニュー、ボタン）のデザイン設定
- 「グローバル」→「ボタン」の配色
- フッタービルダーの背景色と文字色
各カラーピッカーを開くと、パレットの色見本が並んでいます。直接カラーコードが入っている場合は、パレットの該当スロットを選び直すと、以降はパレットの変更に追従するようになります。サイト全体の配色を後から変える可能性があるなら、個別の色は原則としてパレットから選ぶ運用にしておくと管理が楽になります。
手順4：ブロックエディターやページビルダーでパレットを使う
Astraのグローバルパレットは、ブロックエディターのカラー選択にも表示されます。段落や見出し、ボタンなどの色を指定するときにパレットの色見本から選んでおけば、後でパレットを変更したときに記事内の色も追従します。一方、カスタムカラーでカラーコードを入れたブロックは、その値のまま残ります。
ElementorなどのページビルダーやAstraと同じ開発元のSpectraでも、Astraのパレットを色の候補として扱える連携があります。ただし連携の方法や表示場所はビルダーとバージョンによって異なるため、ビルダー側のグローバルカラー設定と二重管理にならないよう、どちらを基準にするかを決めておきます。
手順5：カスタムCSSでパレットの色を使う
追加CSSや子テーマのCSSで色を指定するときも、カラーコードを書く代わりにCSS変数を使うとパレットと連動します。
/* お知らせボックス：枠線にブランドカラー、背景に薄い背景色を使う */
.notice-box {
border-left: 4px solid var(--ast-global-color-0);
background-color: var(--ast-global-color-4);
color: var(--ast-global-color-3);
padding: 1em 1.25em;
}どの番号がどの役割かはバージョンによって異なる可能性があるため、開発者ツールで :root に出力されている変数の値を確認し、パレットの色と照らし合わせてから使ってください。CSSを大量に書く予定があるなら、テーマ更新で消えないよう子テーマで管理します。
変更が反映されないときの確認点
- キャッシュ：キャッシュプラグインやCDN、CSSの結合・圧縮機能が古いCSSを配信していることがあります。キャッシュを削除し、ブラウザでも強制再読み込みします
- Astraの動的CSSファイル：Astraには生成したCSSをファイルとして出力する設定があり、有効にしている場合は再生成されるまで古い色が残ることがあります。設定を一度保存し直すか、キャッシュと合わせて削除します
- 個別のカラーコード指定：手順3の通り、その要素がパレットを参照しているかを確認します
- 他のCSSによる上書き：開発者ツールで対象要素を選び、適用されている color や background-color の指定元を見ると、子テーマや追加CSS、プラグインのCSSが上書きしていないかが分かります
まとめ
- Astraはクラシックテーマで、配色はカスタマイザーの「グローバル」→「カラー」にあるグローバルパレットで一元管理する
- パレットの9色は
--ast-global-color-0〜8のCSS変数になり、参照している要素とブロックはパレット変更に追従する - 直接カラーコードを入れた要素は追従しないので、ヘッダー・ボタン・フッターなどの個別設定をパレット参照に揃える
- 変更前に
astra-settingsを書き出すなどしてバックアップを取り、変更後はキャッシュを削除して複数の画面で確認する - ブロックテーマの theme.json による配色管理とは仕組みが別なので、混同しないようにする