Cocoon【スキン:Silk】カラーパレットの色を変える

WordPressで記事を作成する時、テキストや背景の色は、カラーパレットを使って簡単に変更できます。

このカラーパレット、並んでる色がテーマによって異なることをご存じですか?

たまたま目にした別テーマの解説画像で、自分のパレットと全く違う色が並んでいるのを発見したときはとても驚きました。

Cocoonでは、最初に25色のカラーが用意され、6色の拡張カラーを追加することができます。

スキンSilkを設定すると、基本カラーのうちの何個かは、カラーコードが変更されます。

もちろんそのまま使うこともできますが、サイトのイメージカラーと合わない場合は、パレットそのものをオリジナルのものに変えておけるのは便利ですよね。

SILKにはオプションのプラグインがあり、簡単に自分好みのパレットに変えることができるんですよ!

Cocoonのカラーパレット

Cocoonのブロックエディターでは、[キーカラー1色+24色+6色の拡張カラー」の合計31色がパレットに用意されています。

CocoonでスキンをSilkに設定すると、カラーパレットの内容が変わります。

[Cocoon設定]-[全体]で「サイトキーカラー」を設定している場合は、カラーパレットの一番左上カラーに反映します。

カラーコード比較表

CocoonデフォルトSilk
キーカラー#19448e(デフォルト)
赤色#E60033#EF5350
ピンク#e95295#F9ACD5
#884898#CE93D8
深紫#55295B#9575CD
紺色#1E50A2#5C6BC0
青色#0095D9#42A5F5
天色#2CA9E1#7F9AFF
浅葱色#00A3AF#00ACC1
深緑色#007B43#009688
緑色#3EB370#4CAF50
黄緑色#8BC34A
ライム#C3D825#BDD73C
黄色#FFE900#FBEBAF
アンバー#FFC107
オレンジ#F39800#FFA726
ディープオレンジ#EA5506#FBB731
茶色#954E2A#8D6E63
灰色#949495#90A4AE
#333333#424242
#FFFFFF
淡い青#F3F9FD
淡い黄色#FFFEF4
淡い赤#FFF6F7
淡い緑#F6FBF7

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

プラグインを使って簡単にカラーパレットの色を変えることができます。

プラグインの入手と有効化

まずは次のアドレスにアクセスし、カラーパレットカスタマイズ用プラグインをダウンロードしましょう。

【ご注意!】
2022/11/19頃から、上記サイトにアクセスできなくなっています…

プラグインはzip形式でダウンロードされるので、そちらをインストール&有効化します。

手順

WordPressの[プラグイン]-[新規追加]を開きます。

ダッシュボード[プラグイン」→[新規追加」

zipファイルを読み込みます。
  1. [プラグインのアップロード]ボタンをクリックします。
  1. [ファイルを選択]をクリックし、ダウンロードしておいたzipファイルを選択します。
インストールします。

[今すぐインストール]をクリックします。

有効化します。

[プラグインを有効化]をクリックします。

Cocoon設定に[カラーパレット]が追加されます。

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

[Cocoon設定]-[カラーパレット]を開き、変更が必要なカラーを変えていきます。

変更前パレット

変更後パレット

サイトのイメージカラーに合わせて

独自のパレットを作っておけますね!

カラーは好みの色を選べますが、パレット上でポイントしたときに表示されるテキストは変わらないので、「赤色」には赤系、「緑色」には緑色系・・・という形で設定したほうが、編集作業の時に迷わないと思います。

テキストの変更は、functions.phpを編集することで対応できると思われますが、こちらでは割愛します。

カラーパレットの色を変更すると、それまでに作成した記事の設定カラーも変わってしまいます。パレットカラーの変更はサイト運営の早い時期に決めて、なるべく変更しないほうが良いでしょう。

\配色に悩むアナタにおすすめ♪/
タイトルとURLをコピーしました