cocoonブログを自分好みの色にカスタマイズするには？
この記事では、WordPressのテーマcocoonを使用してブログ運営をしている方向けにサイトのキーカラーと背景色の設定方法を紹介しています。
cocoonは無料テーマですが、かなり万能で、有料テーマに引けを取らないおしゃれなデザインにカスタマイズすることができます。
実際、当ブログもcocoonテーマを利用しており、様々な機能を使いブログをカスタマイズしています。
この記事を読んで、cocoonブログをおしゃれにカスタマイズしてください。
この記事を書いている人
- メガバンク勤務の30代女性
- 夫と共同でブログを運営中
- ブログ開設から半年で月間1万PV &収益5万円到達
- ブログ運営、ファッション誌のモニターや記事執筆などの副業で収入を得ている
【cocoon】サイトキーカラー、サイト背景色とは
サイトの印象を大きく変えるのが『サイトキーカラー』と『サイト背景色』です。
サイトキーカラーやサイト背景色を設定することで、オリジナルのブログを作り出すことができます。
サイトキーカラーとは
サイトキーカラーのイメージ
投稿ページの見出し
サイドバーのタイトルやMENU
当ブログでは、薄いブルーをサイトのキーカラーに設定しています。
サイトキーカラーとは、投稿ページの見出しやサイドバーのタイトルなど様々な場所の装飾に使われる色を指します。
サイトキーカラーは、訪問者の目につきやすい部分に使われる色ですので、どのようなイメージのサイトを作りたいかを踏まえて決定するようにしましょう。
後ほど詳しく紹介しますが、サイトキーカラーに、選ぶ色には注意が必要です。
サイトキーカラーには、濃い色や薄い色を設定するのはおすすめできません。
サイトキーカラーに設定した色は、投稿ページの見出しやサイドメニューのタイトルの背景色に使われます。
そのため、濃紺や濃いグレーなどの色を指定してしまうと、背景色が暗すぎて黒色の文字と同化してしまいます。
また、サイドメニューのアイコンの色もサイトキーカラーが採用されるため、薄すぎる色だと背景色と同化して見えにくい可能性があります。
サイトキーカラーは、簡単に変更ができますので、いろんな色味を試してみて、全体のバランスに合う色を設定するようにしましょう。
サイト背景色とは
サイト背景色のイメージ
トップページ
投稿ページ
当ブログは、初期設定の薄いグレーの背景色を採用しています。
サイト背景色は、その名の通り、サイトの背景に設定する色です。
cocoonでは、サイト背景に画像を設定することも可能です。
サイト背景色は、上の画像の通り、サイトの外枠の部分の色を指します。
cocoonでは、記事の本文やサイドメニューの背景色は白色となります。
サイト背景色を変えることで、サイトの雰囲気が大きく変わります。
統一感のあるサイトを目指すのであれば、サイトキーカラーと相性の良い色をサイト背景色に選ぶようにしましょう。
設定する色味に迷った場合やそもそも外枠が不要という考えの方は、背景色を白色に設定するのもおすすめです。
サイト背景色を白色に設定すると、記事の本文やサイドメニューの背景と全体が一体化してすっきりとしたサイトに仕上がります。
サイト背景色あり（薄いグレーに設定）
サイト背景色なし（白に設定）
【cocoon】サイトキーカラー、サイト背景色の設定方法
サイトキーカラーとサイト背景色の設定方法を紹介します。
いずれも簡単に設定することが可能ですので、全体のバランスをみながら、色味の変更を加えて好みの雰囲気になるよう調整してください。
サイトキーカラーを設定方法
サイトのキーカラーはブログの雰囲気を決める重要な色です。
設定後、サイトキーカラーが反映された投稿ページの見出しやサイドメニューのアイコンなどの表示をチェックして、全体のバランスを確認するようにしましょう。
サイトキーカラーの設定方法
WordPressのダッシュボードから『cocoon設定』を選択する
cocoon設定から『全体』を選択する
『サイトキーカラー』に設定したい色を追加する
サイトキーカラーのイメージ
投稿ページの見出し
サイドバーのタイトルやMENU
投稿ページの見出しやサイドバーのタイトルの背景色にサイトキーカラーが採用されています。
また、サイドバーのMENUのアイコンもサイトキーカラーが採用されています。
サイト背景色を設定方法
サイトキーカラーの設定と同様の手順でサイト背景色も設定することができます。
サイト背景色は、サイトに表示している画像の雰囲気やサイトキーカラーなどとバランスの良い色を選択するようにしましょう。
サイト背景色の設定方法
WordPressのダッシュボードから『cocoon設定』を選択する
cocoon設定から『全体』を選択する
『サイト背景色』に設定したい色を追加する
【cocoon】サイトキーカラー、サイト背景色を選ぶポイント
サイトキーカラーやサイト背景色の色選びは大切です。
おしゃれで見やすいサイトに仕上げるために注意したい色選びのポイントを紹介します。
サイトでメインに使用する色は3色程度
ブログのトップページや記事でメインに使用する色は3色程度に抑えることが、おしゃれなブログへの近道です。
ついつい様々な色を使用したくなりますが、サイトに複数の色を使いすぎると、まとまりのない印象になってしまいます。
「サイトキーカラー」や「ヘッダー全体背景色」、「グローバルナビメニュー色」などを統一感のある色味にすることで、洗練された印象のサイトに生まれ変わります。
ネット上には、配色デザインなどを紹介するページも多く存在しますので、それらを活用して相性の良い色を3色程度選ぶといいでしょう。
サイトメインカラーのイメージ
当サイトでは、黄色、水色、グレーをサイトのメインカラーと決めています。
ヘッダー、アイキャッチ画像、メニューボタンなどは全てサイトのメインカラーに統一するようにしています。
訪問者にとって居心地の良い色を選ぶ
サイトキーカラーやサイト背景色は、自分の好きな色を設定することができますが、訪問者の目線にたった色選びが大切です。
例えば、「育児情報」に関するブログを立ち上げるとします。
育児に関する記事を読みたいと思い、ブログを訪れる訪問者は、以下のどちらのデザインのサイトを好むでしょうか。
例①
例②
感じ方は、人それぞれですが、おそらく育児情報のブログであれば、例②の方がイメージに近いのではないでしょうか。
ブログを訪れた人が、「このブログなら自分が欲しい情報を得ることができそう」と思えるようなデザインにすることも重要です。
色選びは、訪問者の目線に立って行いましょう。
見やすい、わかりやすい色を選ぶ
先ほども説明しましたが、サイトキーカラーには、濃い色や薄い色を設定するのはおすすめできません。
サイトキーカラーに設定した色は、投稿ページの見出しやサイドメニューのタイトルの背景色に使われます。
そのため、濃紺や濃いグレーなどの色を指定してしまうと、背景色が暗すぎて黒色の文字と同化してしまいます。
また、サイドメニューのアイコンの色もサイトキーカラーが採用されるため、薄すぎる色だと背景色と同化して見えにくい可能性があります。
訪問者にサイトの情報が伝わらなくては、何の意味もありません。
訪問者にとって見やすいデザインのサイトになるように色選びは慎重に行いましょう。
【cocoon】サイトキーカラー、サイト背景色の設定／まとめ
サイトキーカラーや背景色は、簡単に設定が可能です。
色々な色味を試して、ぜひお気に入りの一色を見つけてください。
このサイトでは、ブログ運営に関する情報を発信しています。
よろしければ合わせて別記事もご覧ください。
最後までご覧いただきありがとうございました。
