Cocoon／カラーパレットの色をデフォルトから追加・変更する２つの方法

アイキャッチ／カラーパレットカスタマイズ
2022年06月17日

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

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

この記事を書いた人
  • ブログが好きな40代主婦
  • CocoonサイトをCSSでフルカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー30
  • ワードプレスで３サイトを運営しています
はっちゃん
です
プロフィール

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

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

カラーパレット

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

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

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

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

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

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

  1. Cocoon設定で色を追加
  2. functions.phpをカスタマイズする

１.Cocoon設定で色を追加

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

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

カラーパレット
カラーパレット

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

追加できるのは最大６色になります。

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

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

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

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

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

子テーマを使用し、カスタマイズ前にバックアップをとりましょう。

  • STEP1
    function.phpにコードを張り付ける

    コピペする場所はCocoonの場合はCocoon.Child（子テーマ）を選択し、外観　→　テーマファイルエディター　→　テーマのための関数　です。

    カラーパレット

    コードは下記に記載します。

  • STEP2
    各カラーコードを設定する

    それぞれカラーコードを入力します。（半角のみ使えます）

  • 完成！

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',
'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;
});
functions.phpとは

WordPressのテーマの設定やカスタマイズを行うときに編集するファイル。PHPをマスターするとわざわざプラグインを使用しなくてもfunctions.phpに記述するだけでできることも多く便利です！

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

カラーパレット

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

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

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

Cocoon設定
  • 簡単で失敗がない
  • いつもの設定から編集できる
  • 色は最大６色まで
functions.php
  • やや中級向け
  • 子テーマを使うので、大きな失敗がなくテーマ更新でも上書きされない
  • 色は最大24色まで

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

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

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

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本
www.colordic.org

それではまた！

Comment