サイト型トップページの作り方を公開しています!Check

WordPressのカラーパレットを自由に変更・追加する方法【Cocoon対応】

アイキャッチ|カラーパレット Cocoon
Cocoon
記事内に広告が含まれています

WordPressのブロックエディタ(Gutenberg)では、文字色や背景色の変更に便利な「カラーパレット」が用意されています。しかし、標準で用意されている色は原色に近いビビッドなカラーが多く、自分のサイトに合わないと感じることがあるかもしれません。

  • もっと彩度の低いカラーを使いたい
  • ブランドカラーに合わせたパレットにしたい
  • ボタンや装飾ブロックの色に統一感を出したい

そんな方におすすめなのが、カラーパレットのカスタマイズです。

この記事では、WordPressテーマ「Cocoon」を使っている方に向けて、次の3つの方法でカラーパレットを編集する手順を詳しく解説します。

  • Cocoon設定からの簡単カスタマイズ(6色)
  • functions.phpを使ったカスタマイズ(最大32色/追加する場合は無限)
スポンサーリンク

この記事を書いた人

はるみです
吹き出し/女性
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー40(2025年6月現在)
  • 2023年~有料記事公開
    • →累計420件(月間約20件)購入いただいています

WordPressのカラーパレット|デフォルト色とは?

Gutenbergエディタでは、サイドバーにカラーパレットが表示され、背景色や文字色を簡単に選ぶことができます。これが「デフォルト色」です。

サイドバーのカラーパレット表示例

カラーパレットのカラーコード一覧

以下はCocoonで使われる色とそのカラーコード・スラグ(slug)です。スラグ(slug)はfunctions.php等でカスタマイズする際に使用します。

nameslugcolor
キーカラーkey-color#19448e
赤色red#e60033
ピンクpink#e95295
紫色purple#884898
深紫色deep#55295b
紺色indigo#1e50a2
青色blue#0095d9
天色light-blue#2ca9e1
浅葱色cyan#00a3af
深緑色teal#007b43
緑色green#3eb370
黄緑色light-green#8bc34a
ライムlime#c3d825
黄色yellow#ffd900
アンバーamber#ffc107
オレンジorange#f39800
ディープオレンジdeep-orange#ea5506
nameslugcolor
茶色brown#954e2a
ライトグレーlight-grey#dddddd
灰色grey#949495
ダークグレーdark-grey#666666
black#333333
cocoon-white#ffffff
淡い青watery-blue#f3fafe
淡い黄色watery-yellow#fff7cc
淡い赤watery-red#fdf2f2
淡い緑watery-green#ebf8f4
拡張色Aex-a#fef4f4
拡張色Bex-b#f8f4e6
拡張色Cex-c#eaf4fc
拡張色Dex-d#eaedf7
拡張色Eex-e#e8ecef
拡張色Fex-f#f8fbf8

【補足】キーカラーの変更はCocoon設定

Cocoonで使われる「キーカラー(key-color)」は、サイト全体のアクセントカラーとしてボタン・リンク・見出し装飾などに反映されます。

  • 設定手順
  1. WordPress管理画面 →「Cocoon設定」→「全体」タブを開く
  2. 「キーカラー」の欄で任意のカラーコードを入力(またはカラーピッカーで選択)
  3. 「変更をまとめて保存」で完了

例:#19448e(ネイビーブルー)→ #c0a5a5(くすみピンク) に変更することで、全体の印象が大きく変わります。

スポンサーリンク

WordPressのカラーパレットを変更する3つの方法

方法1:Cocoon設定からカラーパレットを変更(最大6色)

Cocoonでは、テーマ設定から最大6色まで自由にカスタムできます。

  1. WordPressの管理画面から「Cocoon設定」→「エディター」タブを開きます。
  2. 拡張カラーパレット」の項目に進み、カラーコードを6色まで設定します。
  3. 「変更をまとめて保存」をクリック。

この方法は初心者でも直感的に操作できるため、手軽にカラーパレットを変更したい方におすすめです。

カラーパレット
メリット
  • 操作が簡単で直感的
  • テーマ設定画面から気軽に変更できる
デメリット
  • 設定できる色は6色までと制限あり

方法2:functions.phpでカラーパレットの色を置き換える(最大32色)

より自由に色を設定したい場合は、以下のようなPHPコードを子テーマのfunctions.phpに記述します。

注意点
  • 必ず子テーマのfunctions.phpに記述してください。
  • 編集前に必ずバックアップを行ってください。
    • →FTPソフト等で元に戻せるようにしておくと安心です。
  • 記述ミスがあると管理画面にも入れなくなる可能性があります。
  1. 管理画面の「外観」から「テーマファイルエディター」
    • Cocoon Child: テーマのための関数 (functions.php)をクリックします
  2. 元から書いているコード(テーマ用関数)は消さずにPHPを記述します
    • //以下に子テーマ用の関数を書く、から下の行に追加しましょう

子テーマ(Cocoon child)が選択されていることを確認します

phpの記述について
// カラーパレット24色を変更
add_filter('block_editor_color_palette_colors', function($colors) {
   $skin_colors = [
   'red'   => '#e60033',
   'pink'   => '#e95295',
   'purple'   => '#884898',
   'deep'   => '#55295b',
   'indigo'   => '#1e50a2',
   'blue'   => '#0095d9',
   'light-blue'   => '#2ca9e1',
   'cyan'   => '#00a3af',
   'teal'   => '#007b43',
   'green'   => '#3eb370',
   'light-green'   => '#8bc34a',
   'lime'   => '#c3d825',
   'yellow'   => '#ffd900',
   'amber'   => '#ffc107',
   'orange'   => '#f39800',
   'deep-orange'   => '#ea5506',
   'brown'   => '#954e2a',
   'light-grey'   => '#dddddd',
   'grey'   => '#949495',
   'dark-grey'   => '#666666',
   'black'   => '#333333',
   'cocoon-white'  => '#ffffff',
   'watery-blue'   => '#f3fafe',
   'watery-yellow' => '#fff7cc',
   'watery-red'   => '#fdf2f2',
   'watery-green'  => '#ebf8f4',
   'ex-a'   => '#ebf4f4',
   'ex-b'   => '#f8f4e6',
   'ex-c'   => '#eaf4fc',
   'ex-d'   => '#eaedf7',
   'ex-e'   => '#e8ecef',
   'ex-f'   => '#f8fbf8',
   ];

   foreach ($skin_colors as $slug => $color) {
   $key = array_search($slug, array_column($colors, 'slug'));
   if ($key !== false) {
   $colors[$key]['color'] = $color;
   }
   }

   return $colors;
});

補足

カラーパレット(色選択肢)を自分好みに書き換えるコードです 。

  • 色の名前(slug)とカラーコード(#xxxxxx)をセットで定義しています
  • 同じslug(名前)の色があれば、それを上書きして変更します
  • 「この色をこうしたい!」という希望がある場合は、’red’ => ‘#e60033’ のように、カラーコード部分を書き換えるだけでOK。
メリット
  • 最大32色まで自由に設定可能
  • 独自のブランドカラーを反映できる
デメリット
  • PHPの記述ミスに注意

方法3:functions.phpでカラーパレットに色を追加する

カラーパレットに既存の色を「置き換える」のではなく、新しい色を「追加」することも可能です。

// カラーパレットに色を追加
add_filter('block_editor_color_palette_colors', function($colors) {
   $new_colors = [
   [
   'name'  => 'スモーキーブルー',
   'slug'  => 'smoky-blue',
   'color' => '#5a7184',
   ],
   [
   'name'  => 'ピスタチオグリーン',
   'slug'  => 'pistachio-green',
   'color' => '#a8c97f',
   ],
   ];

   // 既存のカラーパレットに新色を追加
   return array_merge($colors, $new_colors);
});

補足(このコードのポイント)

  • $new_colors に追加したい色(名前・slug・カラーコード)を定義
  • array_merge() を使って既存の $colors に新しい色を追加

この方法もCocoonテーマで使用できます。functions.phpは子テーマ側に記述してください。

以上のコードではこのようにカラーパレットに2色が追加されます。

Cocoon設定とfunctions.phpを比較

項目Cocoon設定PHPコード
最大色数6色32色、または制限なし(追加)
操作難易度低(初心者向け)高(中級者以上)
メリット手軽に設定できる自由度が高い・カスタマイズ性大
デメリット色数が限られるコード編集の知識が必要・ミスのリスクあり
スポンサーリンク

まとめ

カラーパレットは、Cocoonの設定画面またはfunctions.phpのカスタマイズで柔軟に調整可能です。

  • 「サイト全体のトーンを手軽に変えたい」→ Cocoon設定
  • 「ブランドカラーや独自配色を使いたい」→ PHPカスタマイズ

目的やスキルに合わせて最適な方法を選び、サイトのデザインをより理想に近づけましょう。

Comment コメントはこちらへお願いします

タイトルとURLをコピーしました