WordPressテーマ「SWELL」を使っていて、「ボタンの色とリンクの色がバラバラになってしまった」「サイトの雰囲気を変えたいけど、どこを直せばいいかわからない」と感じたことはありませんか？
そんな悩みを解決してくれるのが、SWELLのグローバルカラー設定です。この機能を使いこなせば、サイト全体の配色をたった数か所の変更でコントロールでき、ブランドイメージの統一もグッと楽になります。本記事では、初〜中級者の方に向けてグローバルカラーの仕組みと活用法をわかりやすく解説します。
グローバルカラーとは？SWELLならではの便利な仕組み
グローバルカラーとは、サイト全体で共通して使う「色の変数」のようなものです。たとえば「メインカラー」を1か所で定義しておくと、ボタン・見出し・リンクなど、メインカラーが適用されているすべての箇所に自動で反映されます。
SWELLでは、カスタマイザーの「サイト全体設定 → カラー設定」から以下のカラーを設定できます。
- メインカラー：ボタンや装飾の基本色
- テキストカラー：本文の文字色
- リンクカラー：テキストリンクの色
- サブカラー・アクセントカラー：補助的な配色
ここで設定した色はCSS変数（カスタムプロパティ）として出力されるため、テーマ全体に一貫して反映されます。
グローバルカラーの設定手順
実際の設定方法は非常にシンプルです。以下の手順で進めてください。
Step 1：カスタマイザーを開く
WordPress管理画面の「外観 → カスタマイズ」をクリックして、カスタマイザーを開きます。
Step 2：カラー設定に移動する
左側メニューから「サイト全体設定 → 基本カラー」を選択します。「メインカラー」「テキストカラー」「リンクカラー」などの項目が表示されます。
Step 3：カラーピッカーで色を指定する
各項目のカラーピッカーをクリックし、自分のブランドに合った色を選びます。HEXコード（例：#3a86ff）を直接入力することも可能です。色の選択に迷ったときは、Adobe ColorやCoolorsなどの無料ツールでパレットを作っておくと便利です。
Step 4：プレビューで確認して保存
カスタマイザー右側のプレビューでリアルタイムに変化を確認しながら調整し、問題なければ「公開」ボタンで保存します。
ブロックエディターでグローバルカラーを活用する
SWELLのグローバルカラーは、ブロックエディター（Gutenberg）とも連携しています。ブロックの色設定パネルを開くと、カスタマイザーで定義したグローバルカラーがパレットに表示されます。
これにより、記事を書くたびにHEXコードを調べる手間がなくなり、誰が記事を書いてもサイト全体の配色がブレないというメリットがあります。複数人でサイトを運営している場合に特に効果的です。
また、SWELLオリジナルブロックの「ボックス」「ボタン」「マーカー」なども、グローバルカラーを参照して色が決まる仕組みになっています。メインカラーを変更するだけで、これらのブロックの色もまとめて更新されるのは大きな時短ポイントです。
配色変更時のよくある失敗と注意点
グローバルカラーは非常に便利ですが、変更時にいくつか注意が必要です。
インラインCSSで直接色を指定していると反映されない
過去の記事や固定ページで、ブロックの色を「カスタムカラー」で直接指定していた場合、グローバルカラーを変更してもその箇所には反映されません。後から一括変更したい場合は、最初からグローバルカラーだけを使うように統一しておくことが重要です。
子テーマのCSSで上書きされている場合
子テーマや追加CSSに color: #xxxxxx; のようなハードコーディングがあると、グローバルカラーが上書きされてしまいます。CSSを整理する際は、CSS変数（var(–color-main) など）を使うように書き換えると管理がさらに楽になります。このCSS変数はカスタムプロパティとも呼ばれており、プログラムで利用する変数の考えをもったCSSです。慣れないと最初はとっつきにくいですが、慣れとくるととても便利です。CSS変数はこちらの記事が参考になります。
まとめ：グローバルカラーを使ってブランドイメージを統一しよう
SWELLのグローバルカラー設定は、サイトの配色をシンプルかつ効率的に管理できる強力な機能です。ポイントをまとめます。
- カスタマイザーの「カラー設定」でサイト全体の色を一元管理できる
- ブロックエディターのカラーパレットにも反映され、記事執筆がスムーズになる
- インラインCSSやハードコーディングを避け、グローバルカラーに統一することで保守性が上がる
サイトリニューアルやブランドカラーの変更を検討しているなら、まずグローバルカラーの見直しから始めてみてください。たった数分の作業で、サイト全体の印象をガラリと変えることができます。
