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

ブロックエディタ（Gutenberg）では、文字色や背景色の変更に便利な「カラーパレット」が用意されています。しかし、標準で用意されている色は自分のサイトに合わないと感じることも…

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

文字色・背景色だけでなく、Cocoonの装飾ボックスや一部ブロックの配色も統一しやすくなります。

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

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

まずは現在のCocoon標準パレットを見てみましょう。

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

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

Cocoonのキーカラーは、ボタンやリンクなどサイト全体のアクセントカラーとして使用されます。

「Cocoon設定 → 全体」から変更できます。

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

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

ほとんどの方は、「Cocoon設定」だけで十分です。

functions.phpを使うのは、

• 配色に強いこだわりがある
• 独自スキンを作る
• サイト全体をブランドカラーで統一する

といった場合だけで問題ありません。

方法1：Cocoon設定からカラーパレットを変更（最大6色・簡単！）

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

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

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

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

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

PHPの編集方法が不安な方は、先にこちらの記事を確認してください。

// カラーパレット32色を変更
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;
});

補足

実際には変更したい色だけを書き換えればOKです。

例えば「red」をくすみレッドに変更したい場合は、「#e60033」の部分を好きな色へ変更してください。

方法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);
});

補足（このコードのポイント）

• 追加したい色を定義
• 既存のslugと重複しないように注意

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

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

カラーパレット変更後におすすめの活用先

カラーパレットを調整すると、Cocoonの装飾ボックスもサイト全体の雰囲気に合わせやすくなります。

特に見出し付きボックスやラベルボックスは色の影響を受けやすいため、パレットを整えるだけで記事全体の統一感が大きく変わります。

実際のカスタマイズ例はこちらで紹介しています。

Cocoonには他にも多くの装飾があります。一覧で確認したい方はこちらの記事も参考にしてください。

まとめ

カラーパレットの変更は、サイト全体の統一感を高める最も手軽なカスタマイズのひとつです。

まずはCocoon設定から好みの色を登録し、必要に応じてfunctions.phpでさらに自由度を高めてみてください。