ヒビラボでは、Cocoonをカスタマイズする方法やCSSコード（コピペ可）をまとめています。
WordPressのCocoonテーマで、色の設定をする方法を紹介します。
この記事でわかること
サイトカラーは読者の読みやすさや行動に影響する
サイトカラーは読者の読みやすさや行動に影響します。
- 読者がコンテンツを簡単に理解しやすくなる。
- ボタンやリンクの色を工夫することで読者の行動が変わる。
それぞれの色の印象について
それぞれの色の印象については、以下のような視覚的な印象があります。
- 赤: 情熱的で力強い印象
- 青: 落ち着きや安定感
- 緑: 自然や健康、成長や安らぎ
- 黄色: 活気や明るさ
- オレンジ: エネルギッシュで友好的
- 紫: 高貴さや豪華さ、創造性やスピリチュアリティ
- ピンク: 優しさやロマンス、感受性
- ブラウン: 自然や安定感
好きな色を選ぶのも良いけど、サイトがどのように見られたいかを考えるといいかも！
サイトカラーは２・３色でまとめるのがおすすめ！
サイトカラーは２・３色でまとめるのが統一感が出ておすすめです。
サイトの配色を探したいときは、以下のようなシミュレーションを使用すると便利です。
全体のキーカラーを変える
キーカラーを変更すれば、ヘッダーや見出しの色を一括で変えられます。
【Cocoon設定】→【Cocoon設定】→【全体】のキーカラーを変更します。
背景色を変える
背景色の変更は、【Cocoon設定】→【Cocoon設定】→【全体】のサイト背景色を変更します。
リンクの色を変える
リンクの色の変更は、【Cocoon設定】→【Cocoon設定】→【全体】のサイトリンク色を変更します。
サイト選択文字色・サイト選択背景色は、サイト内の文字をドラッグで選択したときの色です。
カラーエディターでよく使う色を登録する
カラーエディターでは、白抜きブロックやCOCOON汎用ブロック（見出しボックス・タブ見出しボックス・ラベルボックス）などを選択したときによく使う色を登録できます。
登録しておくと便利だよ！
【Cocoon設定】→【Cocoon設定】→【エディター】
【拡張カラーパレット色】の色をよく使う色に変更します。
色選択のときに出るカラーパレットの後方６色が変更した色になります。
まとめ：サイトを自分好みの色に変えよう！
サイトカラーは２・３色でまとめると統一感が出ておすすめです。
また、カラーエディターでよく使う色を登録しておくと便利なので、はやいうちに設定しておきましょう！
