Jill WellingtonによるPixabayからの画像
[Cocoon設定]の[全体]タブの1番上に[キーカラー]というセクションがあります。
そこで、[サイトキーカラー]と[サイトキーテキストカラー]を設定できます。
当記事では、どこの色が変わるのかを紹介します。
どこの色が変わる?
スキンなしで設定した場合です。
初期設定はこちら:
![Cocoon初期設定色](https://blogstudynotes.com/wp-content/uploads/2020/01/79-1-default-site-color.png)
![いくみ](https://blogstudynotes.com/wp-content/uploads/2019/05/04_230kirari_smile6069.png)
以下のように設定してみます!
サイトキーカラー:オレンジ (#f0cf85)
サイトキーテキストカラー:白 (#ffffff)
サイト背景色:黄緑(#e7f0c3)
*サイトキーカラーだけではなく、サイト背景色もつけました。(「サイト背景」は、ヘッダー・フッター・メインカラム・サイドバー以外の背景エリアです。)
ロゴ画像も設定しました。白い文字画像です。
![Cocoonサイトキーカラー、サイトキーテキストカラー、サイト背景色適用例](https://blogstudynotes.com/wp-content/uploads/2020/09/79-cocoon-site-key-color-applied-sample.jpg)
目次の変化
![Cocoon 目次 初期設定色](https://blogstudynotes.com/wp-content/uploads/2020/01/79-2-default-TOC-color.png)
![Cocoon 目次 サイトキーカラー設定後](https://blogstudynotes.com/wp-content/uploads/2020/01/79-2-site-key-color-TOC.png)
見出しの変化
![Cocoon 見出しスタイル 初期設定色](https://blogstudynotes.com/wp-content/uploads/2020/01/79-3-default-heading-color.png)
![Cocoon 見出しスタイル サイトキーカラー設定後](https://blogstudynotes.com/wp-content/uploads/2020/01/79-3-site-key-color-heading.png)
![いくみ](https://blogstudynotes.com/wp-content/uploads/2019/05/02_195pekori5562.png)
見出し3~6で、文字が白になると読めなくなりますね。そこはちゃんと「白」を反映しないでいてくれました。ありがたや。
ブログカードと引用スタイルの変化
![Cocoon ブログカードと引用スタイル 初期設定色](https://blogstudynotes.com/wp-content/uploads/2020/01/79-5-default-blog-card-color-and-quote.png)
![Cocoon ブログカードと引用スタイル サイトキーカラー設定後](https://blogstudynotes.com/wp-content/uploads/2020/01/79-5-site-key-color-blog-card-and-quote.png)
コメント欄とフッターの変化
![Cocoon フッターとコメント欄 初期設定色](https://blogstudynotes.com/wp-content/uploads/2020/01/79-4-default-comment-and-footer-color.png)
![Cocoon フッターとコメント欄 サイトキーカラー設定後](https://blogstudynotes.com/wp-content/uploads/2020/01/79-4-site-key-color-comment-and-footer.png)
再度、全体の画像です。
![Cocoonサイトキーカラー・サイトキーテキストカラー・サイト背景色・ロゴ画像を設定](https://blogstudynotes.com/wp-content/uploads/2020/01/79-1-site-key-color-applied.png)
フォルダラベル名と、検索ボックスの枠線は変わっていませんね。そこをカスタマイズで変える方法を以下で記事にしています。パンくずリストの色を変える方法も含みました。
![いくみ](https://blogstudynotes.com/wp-content/uploads/2019/05/00_194ikumi5562.png)
この例だと、オレンジの色がうすめなのでグローバルメニューがちょっと読みづらいです。そういう場合は、グローバルメニューテキスト色を変更すればOK。
もしくは、もうちょっと濃い目のオレンジ色にするという方法もあります。
以下のように変更してみました。[ヘッダー]タブの[グローバルナビ文字色]を茶色(#757575 )にしてみました。
![Cocoonサイトキーカラー・サイトキーテキストカラー・サイト背景色・ロゴ画像・グローバルナビテキスト文字色を設定](https://blogstudynotes.com/wp-content/uploads/2020/01/79-1-site-key-color-applied-global-menu-color-changed.png)
![いくみ](https://blogstudynotes.com/wp-content/uploads/2019/05/04_230kirari_smile6069.png)
「色」の変化で、大分イメージが変わりますね!
サイトキーカラーの設定方法
1.[Cocoon設定]をクリック。
![Cocoon設定メニュー](https://blogstudynotes.com/wp-content/uploads/2019/06/image-62.png)
2.[全体]タブをクリック。
![Cocoon設定メニュー、全体タブ](https://blogstudynotes.com/wp-content/uploads/2019/06/image-81.png)
3.[色を選択]をクリックして好きな色を選んだり、カラーコードをコピペします。
![Cocoonサイトキーカラーの設定](https://blogstudynotes.com/wp-content/uploads/2020/01/79-cocoon-site-key-color.png)
4.[変更をまとめて保存]ボタンを押してできあがり!
カラーコードや配色のヒント
以下のようなサイトから、先に色を選んでカラーコードをコピペするのがおすすめです。
以下の2つは、どんな色でもある!という感じです。
配色のヒントは以下のサイト2つが本当に便利です!組み合わせのイメージが分かります。
ウェブサイト上にある色のカラーコードを取得するツールもとても便利です!
![いくみ](https://blogstudynotes.com/wp-content/uploads/2019/05/13_194heart5562.png)
これはもう手放せません。
以下の記事で紹介しています。
このツールとCanvaを使うととても便利!Canvaの配色センスは最高です。Canvaの使い方も記事にしています。
おわりに
これもまた・・・楽しいですね~。
「色」が作りだす雰囲気はとてもパワフル。例えば、最近追加されたスキンで、Veilnui Simplog (blue)を使うとですね。
![](https://blogstudynotes.com/wp-content/uploads/2020/01/79-cocoon-skin-Veilnui-Simplog-blue.png)
![いくみ](https://blogstudynotes.com/wp-content/uploads/2019/05/13_194heart5562.png)
さわやか・・・!
初心者ブログが「できる人風」になる気も・・・。笑。
やっぱりスキンは便利だなと思います。
配色とか面倒だなという場合は、プロが作成したスキンを使うと良いですね!
色で遊ぶのが好きな方は、「サイトキーカラー」で変化を見るの、たまらなく楽しいですよ♪。
自分らしさを出してくれる色や、ブログのテーマカラーを考えてみるのもステキだと思います。
![いくみ](https://blogstudynotes.com/wp-content/uploads/2019/05/00_194ikumi5562.png)
サイトキーカラー、コクーンで一番好きな機能かもしれません。
お試しあれ!
コメント