無料イラストなら【イラストAC】
無料会員登録

Cocoonカラーパレットの設定方法/色を追加・変更するカスタマイズ

アイキャッチ/カラーパレット カスタマイズ
カスタマイズ
記事内に広告が含まれています
スポンサーリンク

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

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

Cocoon設定で簡単にできるものと、PHPを編集する方法の2つをご紹介します。

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

ワードプレスのカラーパレット/デフォルト色

ブロックエディタの投稿編集画面から色が変更できるタイプのブロックメニュー(見出しボックス等)を選択すると、このようにカラーピッカー展開されます。

色設定でカラーピッカーから色を選択することで、枠の色、背景色、文字色が設定できるようになっています。

カラーパレット

画像の通り、デフォルトの設定ではほとんどがくっきりはっきりとした明度の原色ですね。サイトのイメージカラーを統一している場合など、お好みの色に変更したい場合があるかと思います。

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

私は彩度を抑えたくすみ色が好きなので、自分好みに変えたいな~

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

スポンサーリンク

ワードプレスのカラーパレットの色を変更する方法

Cocoonカラーパレットの色を変えるには2つの方法があります。

  1. Cocoon設定での変更
  2. PHPコードを使用した変更

Cocoon設定での変更(6色)

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

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

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

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

追加できるのは最大6色。

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

PHPコードを使用した変更(24色)

次はfunctions.phpをカスタマイズする方法。

こちらはCocoonのスキン“SILK”を作成されたろこさんの『SILKの特徴や使い方』ページのカスタマイズ例からコードを流用させていただき、私がカラーコードを変更したものです。(現在、引用サイトが削除され閲覧できなくなりました)

PHPは動的にWebページを生成することができる言語で、編集を誤るとページに重大な不具合が起こる可能性があります。

この方法はPHPを使うため慎重に操作する必要はありますが、子テーマにコピペしてカラーコードを編集するだけなので難しくはありません。必要なくなったら、追加したコードをまるごと消せば元に戻るので安全。親テーマの更新でも上書きされず、子テーマを使うメリットです。

カスタマイズは自己責任の上でおこないましょう。

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

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

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

    それぞれ#に続けて6桁のカラーコードを入力します。(半角)

  • Complete
    確定させて完成
スポンサーリンク

Cocoon/PHPコードを貼り付ける場所(子テーマ使用)

PHPコードを貼り付ける場所は、「外観」→「テーマファイルエディター」→「Theme Functions (functions.php)」 です。

子テーマを使用するので、右上の編集するテーマを選択:Cocoon.Childを選択しているか必ず確認しましょう。

スポンサーリンク

カラーパレットを変更するPHPコード

こちらのカラーパレットを変更するPHPコードを「Theme Functions (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;
});

PHPコードの意味

このコードは、ワードプレス(Cocoon)の「フック」と呼ばれる機能を使用しています。

このコードの動作は以下の通り。

  1. add_filter() 関数
    • この関数は、フック機能を使用して特定のイベントやアクションに対してフィルターを追加します。この場合、block_editor_color_palette_colors フィルターフックに対してコールバック関数を追加しています。
  2. コールバック関数
    • コールバック関数は、block_editor_color_palette_colors フィルターが呼び出された際に実行されます。このコードでは新しいカラーパレットを定義し元のカラーパレットの一部を置き換えています。
  3. $skin_colors 配列
    • これは変更したい特定の色を定義した配列です。各色は連想配列で、キーは色の識別子(slug)、値は新しいカラーコードです。
  4. foreach ループ
    • $skin_colors 配列内の各色に対して、元のカラーパレットの中から一致する色を見つけ、その色を新しいカラーコードに変更しています。
  5. array_search() 関数
    • これは、指定された値(この場合は色の識別子)を配列内で検索し、最初に見つかったキーを返す関数です。このコードでは元のカラーパレットから指定された色の slug を検索しています。
  6. カラーパレットの変更
    • $key が見つかった場合、元のカラーパレットの対応する色のキーを使用して、その色のカラーコードを新しいカラーコードに置き換えています。

最終的に、変更が加えられた新しいカラーパレットが返され、ワードプレスのブロックエディタで使用されます。このコードを使用することで、ワードプレスのブロックエディタで使える色が変更されます。たとえば、「赤」が#e60033に、「ピンク」が#efcdc4になります。

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

カラーパレット

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

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

参考サイト WEB見本 原色大辞典ーHTMLカラーコード

スポンサーリンク

Cocoon設定でカラーパレットの色を追加・変更するふたつの方法を比較

Cocoon設定
  • 誰でも簡単にでき失敗がない
  • いつもの設定から編集できる
  • 色は最大6色まで
functions.php
  • PHPを使うので少し難しい
  • 子テーマを使うので大きな失敗がなく、テーマ更新でも上書きされない
  • 色は最大24色まで

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

まとめ

当記事で使用した「functions.php」はワードプレスの機能を追加できるファイル。

Cocoonには編集するためのフックが随所設定されており、PHPをマスターするとこういった機能面でのカスタマイズが可能になります。

今回はカラーパレットの既存のカラーを上書きして変更しましたが、既存のカラーを残したままカラーを追加するといったカスタマイズも可能です。

デザインを整えるCSSと比較するとハードルが高いように感じますが、PHPが使えるようになるとさらにブログ作りが楽しくなりますよ。

私も勉強中です。

この記事は以上です。

Comment

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