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

アイキャッチ/カラーパレットカスタマイズ
この記事はWordPressのテーマCocoon(コクーン)を対象としたカスタマイズになります。

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

デフォルトは24色用意されています。

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

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

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

カラーパレット

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

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

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

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

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

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

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

1.Cocoon設定で色を追加

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

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

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

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

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

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

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

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

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

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

カスタマイズ前にバックアップをとり、子テーマを使用することをおすすめします。(編集する前のコードをすべてコピーしてメモ帳に貼るなどでも大丈夫です)

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

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

    カラーパレット

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

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

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

  • ラベル
    完成!

デフォルトカラーを変更する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設定
  • 簡単で失敗がない
  • いつもの設定から編集できる
  • 色は最大6色まで
functions.php
  • やや中級向け
  • 子テーマを使うので、大きな失敗がなくテーマ更新でも上書きされない
  • 色は最大24色まで

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

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

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

それではまた!

カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、下記の点を確認してみてください。

  • コードは半角英数字になっているか(全角は使えません)
  • 前後や余白に余計な全角スペース、文字等が入っていないか
  • CSSクラスの前に"."が付いているか
  • CSSコードは{ }、メモ書きはきちんと/**/で囲んでいるか
  • 他に重複しているコードはないか(下に書いたコードが優先されます)


事前にバックアップをとり、カスタマイズは慎重に行いましょう。

ブログがもっと楽しくなる

基礎、応用編と分かれていて分かりやすい内容。CSSの理解を深めたい人へオススメです!!

カスタマイズ
\Follow/
Turicco

Comment

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