[Cocoon] サイトのキーカラーを画像で紹介

[Cocoon] サイトのキーカラーを画像で紹介
アイキャッチ画像は

Jill WellingtonによるPixabayからの画像

[Cocoon設定]の[全体]タブの1番上に[キーカラー]というセクションがあります。

そこで、[サイトキーカラー]と[サイトキーテキストカラー]を設定できます。

当記事では、どこの色が変わるのかを紹介します。

サイトキーカラーを使うときは、スキンを「なし」にするのがおすすめです。

スキンによっては、サイトキーカラーで設定した色が反映されません。

一部だけ反映されない場合もありました。

いずれにしてもスキンは、すでに配色が考えられて完成しているので、サイトキーカラーを使うなら「スキン無し」がおすすめ。

どこの色が変わる?

スキンなしで設定した場合です。

サイトキーカラーで変わる場所
  • ヘッダー
  • サイドバーアイテムの枠線
  • サイドバーアイテムの項目名
  • カテゴリーラベル
  • 目次
  • 見出し
  • ブログカード
  • 引用ボックス
  • フッター

備考:

  • 「ヘッダー」の色は、[ヘッダー]タブで設定した色が優先されます。「サイトキーカラー」と「ヘッダー」 の色を別にすることも可能です。
  • サイドバーにある「検索ボックス」の枠線は変化無しでした。
  • 「フッター」の色は、[フッター]タブで設定した色が優先されます。「サイトキーカラー」と「フッター」 の色を別にすることも可能です。
サイトキーテキストカラーで変わる場所
  • グローバルメニューのテキスト
  • サイドバーアイテムの項目名
  • カテゴリーラベル
  • 見出しタイトルのテキスト
  • ブログカードのラベル
  • フッターのテキスト

備考:

  • 「グローバルメニューテキスト」の色は、[ヘッダー]タブで設定した色が優先されます。「サイトキーテキストカラー」と「グローバルメニューテキスト」の色を別にすることも可能です。
  • 「フッターテキスト」の色は、[フッター]タブで設定した色が優先されます。「サイトキーテキストカラー」と「フッターテキスト」の色を別にすることも可能です。

初期設定色と比較

設定した色:

サイトキーカラー:オレンジ (#f0cf85)

サイトキーテキストカラー:白 (#ffffff)

サイト背景色:黄緑(#e7f0c3)
サイトキーカラーだけではなく、サイト背景色もつけました。(「サイト背景」は、ヘッダー・フッター・メインカラム・サイドバー以外の背景エリアです。)

ロゴ画像も設定しました。白い文字画像です。

初期設定:

Cocoon初期設定色

サイトキーカラー・サイトキーテキストカラー・サイト背景色・ロゴ画像設定後:

Cocoonサイトキーカラー・サイトキーテキストカラー・サイト背景色・ロゴ画像を設定
いくみ
いくみ

オレンジの色がうすめなので、グローバルメニューはちょっと読みづらいです。そういう場合は、グローバルメニューテキスト色を変更すればOK。

もしくは、もうちょっと濃い目の色にするほうが良さそうですね。

目次の変化

Cocoon 目次 初期設定色
Cocoon 目次 サイトキーカラー設定後

見出しの変化

Cocoon 見出しスタイル 初期設定色
Cocoon 見出しスタイル サイトキーカラー設定後
いくみ
いくみ

見出し3~6で、文字が白になると読めなくなりますね。そこはちゃんと「白」を反映しないでいてくれました。ありがたや。

ブログカードと引用スタイルの変化

Cocoon ブログカードと引用スタイル 初期設定色
Cocoon ブログカードと引用スタイル サイトキーカラー設定後

コメント欄とフッターの変化

Cocoon フッターとコメント欄 初期設定色
Cocoon フッターとコメント欄 サイトキーカラー設定後
いくみ
いくみ

グローバルメニューテキストが読みづらかったので、[ヘッダー]タブの[グローバルナビ文字色]を茶色(#757575 )にしてみました。

Cocoonサイトキーカラー・サイトキーテキストカラー・サイト背景色・ロゴ画像・グローバルナビテキスト文字色を設定
いくみ
いくみ

「色」の変化で、大分イメージが変わりますね!

サイトキーカラーの設定方法

1.[Cocoon設定]をクリック。

2.[全体]タブをクリック。

3.[色を選択]をクリックして好きな色を選んだり、カラーコードをコピペします。

4.[変更をまとめて保存]ボタンを押してできあがり!

カラーコードや配色のヒントをくれるサイト

以下のようなサイトから、先に色を選んでカラーコードをコピペするのがおすすめです。

以下の2つは、どんな色でもある!という感じです。

配色のヒントは以下のサイト2つが本当に便利です!組み合わせのイメージが分かります。

おわりに

これもまた・・・楽しいですね~。

「色」が作りだす雰囲気はとてもパワフル。例えば、最近追加されたスキンで、Veilnui Simplog (blue)を使うとですね。

 

いくみ
いくみ

さわやか・・・!

初心者ブログが「できる人風」になる気も・・・。笑。

やっぱりスキンは便利だなと思います。

配色とか面倒だなという場合は、プロが作成したスキンを使うと良いですね!

色で遊ぶのが好きな方は、「サイトキーカラー」で変化を見るの、たまらなく楽しいですよ♪。

自分らしさを出してくれる色や、ブログのテーマカラーを考えてみるのもステキだと思います。

コメント

タイトルとURLをコピーしました