公式ディレクトリ掲載・高速で使いやすいWordPressテーマ
  1. ホーム
  2. ドキュメント
  3. グローバルカラー設定

グローバルカラー設定

  • 投稿者

Apuraでは、サイト全体の色をカスタマイザーの「Colors」セクションから一括管理できます。ここで設定した色は、ブロックエディターのカラーピッカーにも反映されるため、記事やページを編集するときも同じブランドカラーをすぐに選べます。

この記事では、組み込みパレット・パレット上書き・カスタムパレット・リンク色・見出し色という5つの設定項目を順番に解説します。

設定の場所

WordPressの管理画面から 外観 → カスタマイズ を開き、General Options → Colors に進みます。

  • 外観 → カスタマイズ
  • General Options
  • Colors
カスタマイザーのGlobalカラー設定画面

組み込みパレット（Built-in Palette）

Apuraには、デフォルトで9色の組み込みパレットが用意されています。それぞれの色はCSS変数として定義されており、テーマ内のボタン、ヘッダー、アクセントカラーなどに参照されます。

パレット名CSS変数デフォルト色主な用途
Primary--ap-color-primary#00374dヘッダー背景、トップバー背景など
Primary Contrast--ap-color-primary-contrast#ffffffPrimaryの上に乗るテキストやアイコン
Accent--ap-color-accent#eb0048強調色、リンクホバー、バッジなど
Base--ap-color-base#ffffffコンテンツ背景の基本色
Base 2--ap-color-base-2#f5f5f5サブ背景、カード背景など
Text--ap-color-text#333333本文テキスト
Subtle Text--ap-color-text-subtle#757575メタ情報、日付、補足テキスト
Extra Color--ap-color-extra#002933拡張用の任意の色
Extra Color 2--ap-color-extra-2#ffb509拡張用の任意の色

これらの色は CSS変数として定義されているため、palette_overrides（後述）で上書きするだけでサイト全体の色が一括で変わります。

Palette Overrides: 組み込み色の上書き

Palette Overrides は、組み込みパレットの色をカスタマイズするための設定です。上書きした色は自動的にCSS変数にも反映されるため、ヘッダー・ボタン・テキストなど、組み込み色を参照しているすべての箇所が一度に変わります。

操作手順

  1. カスタマイザーで General Options → Colors を開く
  2. Palette Overrides のカラーピッカーから変更したい色を選ぶ
  3. 「公開」または「保存」を押す

たとえば、ブランドカラーをネイビーから深緑に変えたい場合は、Primary の色を変更するだけで、ヘッダー背景やトップバーが同時に切り替わります。

CSS変数への反映

Palette Overrides で設定した色は、ページの <head> 内に次のような形でインライン出力されます。

:root {
  --ap-color-primary: #1a5c3a;
  --ap-color-accent: #f5a623;
  /* ... その他の上書きした色 */
}

テーマ内でこのCSS変数を参照しているすべての要素に、変更が自動的に適用されます。追加のCSSを書く必要はありません。

Custom Palette: 独自の色を追加する

Custom Palette では、組み込みパレットとは別に、独自の色を追加できます。追加した色はブロックエディターのカラーピッカーにも表示されるため、記事を書くときに一貫したブランドカラーを使いやすくなります。

操作手順

  1. カスタマイザーで General Options → Colors を開く
  2. Custom Palette の「色を追加」ボタンを押す
  3. 色の名前（例: Brand Blue）、スラッグ（例: brand-blue）、カラーコードを入力する
  4. 「公開」または「保存」を押す

スラッグの命名について

スラッグは半角英数字とハイフンのみ使用できます。組み込みパレットのスラッグ（ap-color-primary など）と重複するスラッグは使用できませんのでご注意ください。

追加した色にはCSSクラスが自動生成されます（例: .has-brand-blue-color）。このクラスをCSSでスタイリングすれば、ブロックへの色適用が簡単になります。

Links: リンク色の設定

Links では、本文中のリンクテキストの色とホバー時の色を個別に設定できます。

設定項目デフォルト値説明
Normal（通常）#065999リンクの通常時の色
Hover（ホバー）#eb0048（Accent色）マウスオーバー時の色

リンク色はサイトの信頼感や読みやすさに影響します。背景色とのコントラスト比が十分に確保できる色を選ぶと、アクセシビリティの観点でも有利です。一般的にはコントラスト比 4.5:1 以上が推奨されています。

Headings (H1-H6): 見出し色の設定

Headings (H1-H6) では、サイト全体の見出しに使う色をまとめて設定できます。

設定項目デフォルト値説明
Headings (H1-H6)var(--ap-color-text)H1〜H6すべての見出し色

デフォルトでは本文色（--ap-color-text）と同じ色が適用されています。見出しに異なるカラーを使いたい場合は、カラーピッカーで直接色を指定してください。Palette Overrides で設定した色も選択肢に表示されます。

ブロックエディターへの反映

カスタマイザーのColors設定で保存した色は、ブロックエディターのカラーピッカーにも自動的に反映されます。投稿や固定ページを編集する際、テーマカラーとして登録した色がパレットに並ぶため、コンテンツとデザインのカラーを統一できます。

具体的には以下の色が表示されます。

  • Palette Overrides で上書きした組み込み色
  • Custom Palette で追加した独自の色

色を決めるときのヒント

カラー設定を始めるときは、次の順番で決めると作業が進めやすくなります。

  1. Primary（ブランドの主要色）を決める — ヘッダーやトップバーに使われるため、サイトの第一印象に直結します
  2. Accent（強調色）を決める — ボタンやリンクホバー、バッジに使われるため、Primaryと相性のよい補色や類似色を選ぶとまとまりが出ます
  3. Text / Base（テキストと背景）を確認する — デフォルトのままで問題なければ変更不要です
  4. リンク色・見出し色をブランドカラーに合わせて微調整する
  5. 必要に応じてCustom Paletteにブランドカラーのバリエーションを追加する

まとめ

ApuraのColors設定は、サイト全体のカラーデザインの起点です。組み込みパレットのCSS変数を活用することで、Palette Overridesで色を変えるだけでヘッダー・ボタン・テキストが一括で更新されます。Custom Paletteでブランドカラーを登録しておけば、ブロックエディターでもすぐに使えて、コンテンツと外観の色を統一しやすくなります。

各パネルの詳細については、以下の関連記事も参照してください。

ページの先頭に戻る
検索:
検索: