Cocoonカラーパレットの色を追加・変更する２つの方法

ワードプレスで記事を書くときに使うカラーパレットについて。

文字の色を変えるとき、ボックスの枠や背景色を変えるときなど誰もが使うところですね！今回はこのパレットの色を変えるカスタマイズについて書いていきます。

この記事を書いた人

• ブログ好きな40代主婦
• CocoonサイトをCSSでフルカスタマイズ
• JavaScriptを勉強中
• ドメインパワー32
• ワードプレスで２サイトを運営しています

はっちゃん
です

Cocoonカラーパレットのデフォルト色

ブロックエディタの記事の編集画面からカラーパレットを開くとこんな感じで展開されるかと思います。

見てお分かりの通り、ほとんどがくっきりはっきりとした明度の原色ですね。

私はくすんだ感じの色が好きなので、自分好みに変えたいな～

そんなときに色を変える方法があるよ！

もう少し目に優しい色にデフォルトのカラーパレットを変更してみたいと思います。

Cocoonカラーパレットの色を変える方法

２つの方法をご紹介します。

１.Cocoon設定で色を追加

まずはコードをいじる必要がなく、Cocoon設定からとても簡単にできる方法です。

Cocoon設定 →　エディター　を開くと下の方に「拡張カラーパレット」の項目があるので、色を選択をクリックしてここで色を設定します。

色の設定の仕方はカラーコードを直接入力するか、コードが分からなくてもこのカラーバーを自分で動かして色味を調整しながら設定することもできます。

最後に保存を選択して完了です。簡単！

２.functions.phpをカスタマイズする方法

こちらはCocoonのスキン“SILK”を作成されたろこさんの『SILKの特徴や使い方』ページのカスタマイズ例からコードを引用させていただき、私がカラーコードを変更したものです。

豊富なカスタマイズ情報が実用的でとてもためになります。

この方法は中級編になりますが、作業的には子テーマにコピペしてカラーコードを編集するだけなので難しくはありません。

Cocoonデフォルトカラーを変更するPHPコード

こちらを「テーマのための関数（.functions.php）」に貼り付けます。

//カラーパレット24色を変更
add_filter('block_editor_color_palette_colors', function($colors) {
  $skin_colors = [
'red' => '#e60033',
'pink' => '#efcdc4',
'purple' => '#fce4d6',
'deep' => '#434b56',
'indigo' => '#626f82',
'blue' => '#a6b8c2',
'light-blue' => '#f4f4f4',
'cyan' => '#f5f1e8',
'teal' => '#909792',
'green' => '#afbdb0',
'light-green' => '#b7d4be',
 'lime' => '#ccdfcc',
'yellow' => '#fed67d',
'amber' => '#fff3b8',
'orange' => '#979286',
'deep-orange' => '#d7c9aa',
'brown' => '#b2a28e',
'grey' => '#e0e0d8',
'black' => '#666666',
'cocoon-white' => '#ffffff',
'watery-blue' => '#eff1f5',
'watery-yellow' => '#fff7cc',
'watery-red' => '#fdf2f2',
'watery-green' => '#ebf8f4'
  ];
  
  foreach ($skin_colors as $slug => $color) {
    $key = array_search($slug, array_column($colors, 'slug'));
    if ($key !== false) {
      $colors[$key]['color'] = $color;
    }
  }
  
  return $colors;
});

このコードをそのままコピペすると下記のカラーに変わっているはずです。

さくっと調べて、私好みの色になりました♪

あとは自分好みに色を変更してみてください。

ふたつの方法を比較してみる

どちらの方法でも、途中でカラーを変更すると過去に作成した記事もすべて新しいカラーが一括適用されます。

カラーコードを調べるときに役立つサイト

私はよくこちらでカラーコードを調べているのでリンクをのせておきます。

> WEB見本　原色大辞典ーHTMLカラーコード

それではまた！