Cocoonのサイトキーカラーの使われ方と表示サンプル

この記事では人気の無料WordPressテーマ「Cocoon」のサイトキーカラーの使い方、ブログ内でのサイトキーカラーの使われ方についてまとめています。

Cocoonでは、サイトキーカラーとサイトキーテキストカラーを設定することができます。

サイトキーカラーは「サイト全体のポイントとなる部分に適用される背景色」で、
サイトキーテキストカラーは「サイト全体のポイントとなる部分に適用されるテキストの色」を設定できます。

このキーとなる色を設定することによって、サイト全体に統一感が生まれますのでサイトキーカラー、サイトキーテキストカラーは設定するのがおすすめです。

キーカラーはCocoon設定＞全体から設定できます。

このキーカラーを設定するとサイトのどの部分に反映されるかをまとめました。

▼サーバー選びに迷ったら「エックスサーバー」

キーカラーの表示サンプル：ヘッダー

各パーツごとにキーカラーが設定されている場所をまとめています。

特定の場所だけ他の色を適用したい場合は、CSSも記載しているのでカスタマイズできます。

「サイトキーカラー」と「ヘッダー」 の色を別にすることも可能です。

「ヘッダー」タブで設定した色が優先されます。また背景画像を設定した場合は背景画像が優先されます。

#header-container, 
#header-container .navi,
#navi .navi-in>.menu-header .sub-menu{
    background-color: #キーカラー;
}

キーカラーの表示サンプル：記事見出し

投稿記事内のタイトルh2〜h6にも設定されます。

.article h2{
    background-color: #キーカラー;
}
.article h3,
.article h4,
.article h5,
.article h6{
    border-color: #キーカラー;
}

キーカラーの表示サンプル：ウィジェット

サイドバーやフッターに色々なパーツを設置できるウィジェット。ウィジェットヘッダーの背景色がキーカラーになります。

ヘッダーのほか、タグクラウド のラインやボックスメニューのアイコンもキーカラーが採用されています。

.sidebar h2,
.sidebar h3{
    background-color: #キーカラー;
}

「検索ボックス」はキーカラーが適用されないので別途カスタマイズする必要があります。
　

キーカラーの表示サンプル：カテゴリーラベル

カテゴリーラベルは、アーカイブページや投稿ページのアイキャッチ画像の上に表示されるカテゴリーラベルです。

カテゴリーラベルの色は、カテゴリーの設定画面で個別にカラーが設定できますが、デフォルトカラーはキーカラーになります。

.cat-label{
    background-color: #キーカラー;
}

キーカラーの表示サンプル：目次

.article .toc{
border-color:#キーカラーの50％透過色;
}

おしゃれな目次にカスタマイズしたいなら・・・

キーカラーの表示サンプル：テーブル

デフォルトのテーブル

キーカラー設定後のテーブル

奇数行
table tr:nth-of-type(2n+1){
background-color:#キーカラーの5%色;
}
table th,
table td{
border-color:#キーカラーの50%色;
}
table th{
background-color:#キーカラーの10%色;
}

キーカラーの表示サンプル：引用ボックス

デフォルトの引用ボックス

キーカラー設定後の引用ボックス

blockquote {
 border:1px solid #キーカラーの50％
}

キーカラーの表示サンプル：ブログカード

デフォルトのブログカード

キーカラー設定後のブログカード

.blogcard-type .blogcard-label{
    background-color: #キーカラー;
}

キーカラーの表示サンプル：ページネーション

 .pagination .current{
background-color:#キーカラーの10％色;
border-color:#キーカラーの50%色;
}

キーカラーの表示サンプル：フッター

[フッター]タブで設定した色が優先されます。「サイトキーカラー」と「フッター」 の色を別にすることも可能です。

フッターを独自のカラーにしたい場合は、Cocoon設定＞フッターから設定できます。

#footer {
    background-color: #キーカラー;
}

Cocoonのキーカラーについてまとめました。

独自にカスタマイズする時に参考になれば幸いです。

ブログ収益化を目指すならやっぱり「有料のWordPressテーマ」がおすすめです。
【こちらもCHECK】▼

「インストール型」の検索順位チェックツールなら【GRC】▼

「クラウド型」検索順位チェックツールなら【Nobilista】▼