WordPressで記事を作成する時、テキストや背景の色は、カラーパレットを使って簡単に変更できます。
このカラーパレット、並んでる色がテーマによって異なることをご存じですか？
たまたま目にした別テーマの解説画像で、自分のパレットと全く違う色が並んでいるのを発見したときはとても驚きました。
Cocoonでは、最初に25色のカラーが用意され、６色の拡張カラーを追加することができます。
スキンSilkを設定すると、基本カラーのうちの何個かは、カラーコードが変更されます。
もちろんそのまま使うこともできますが、サイトのイメージカラーと合わない場合は、パレットそのものをオリジナルのものに変えておけるのは便利ですよね。
SILKにはオプションのプラグインがあり、簡単に自分好みのパレットに変えることができるんですよ！
Cocoonのカラーパレット
Cocoonのブロックエディターでは、［キーカラー1色＋24色＋6色の拡張カラー」の合計31色がパレットに用意されています。
『拡張カラー』というのは、自分で好みの色をパレットに追加できる「空き」です。設定するには、Cocoon設定画面の［エディタ］タブを開き、［拡張カラーパレット色］を指定します。
CocoonでスキンをSilkに設定すると、カラーパレットの内容が変わります。
［Cocoon設定］－［全体］で「サイトキーカラー」を設定している場合は、カラーパレットの一番左上カラーに反映します。微妙な変化ですが、少し淡い色が揃ってます。
比較しやすいよう、CocoonオリジナルとSilk設定後の違いを表にしてみました。
カラーコード比較表
| 色 | 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ファイルを読み込みます。
- ［プラグインのアップロード］ボタンをクリックします。
- ［ファイルを選択］をクリックし、ダウンロードしておいたzipファイルを選択します。
インストールします。
［今すぐインストール］をクリックします。
有効化します。
［プラグインを有効化］をクリックします。
Cocoon設定に［カラーパレット］が追加されます。
カラーパレットの色を変える
［Cocoon設定］－［カラーパレット］を開き、変更が必要なカラーを変えていきます。
変更前パレット
変更後パレット
サイトのイメージカラーに合わせて
独自のパレットを作っておけますね！
カラーは好みの色を選べますが、パレット上でポイントしたときに表示されるテキストは変わらないので、「赤色」には赤系、「緑色」には緑色系・・・という形で設定したほうが、編集作業の時に迷わないと思います。
テキストの変更は、functions.phpを編集することで対応できると思われますが、こちらでは割愛します。
