Cocoon－アイキャッチラベルの背景色を変更する方法と細々した簡単なカスタマイズ

アイキャッチと一緒に表示されるカテゴリーラベルの色を変更するカスタマイズです。

CSSで一括変更する方法と、カテゴリー別にラベルの色を変更する方法があるので、今回は2パターン紹介していきたいと思います。

 

 

 

アイキャッチにカテゴリーラベルを引っ付ける

まずはアイキャッチにカテゴリーラベルを設定します。

Cocoon設定にある「画像」内に、アイキャッチの表示やカテゴリーラベルの項目があるので、チェックを付けましょう。

 

チェックを外すと非表示になり、
チェックを付けると表示されます。

 

カテゴリー別に背景色を設定する

アイキャッチ上に現れるカテゴリーラベルはその名の通り、何のカテゴリーに属している記事なのかを分かりやすくラベル化したものです。

そのため、カテゴリー設定からも、カテゴリーラベルの色を簡単に変更することが出来ます。

カテゴリーを編集する

色はカラーピッカーで簡単に設定することが出来ます。

試しに雑記だけ、
背景色と文字色のカラーを変更、青っぽい色にしてみました。

 

カテゴリーごとに色分けしたいのなら、この作業をひとつひとつ、カテゴリー編集していく必要があります。

CSSでもカテゴリー別に色分けすることが出来ますが、
カテゴリーIDなど調べなくてはいけないので、こっちの方が簡単です。

 

カテゴリーラベルの背景色をCSSで変更する

ここからはCSSでカテゴリーラベルの背景色を変更していきます。

ついでに、他にも簡単なカスタマイズのみ載せておきますので、使いたいコードがあればコピペしてスタイルシートに追加してみてくださいませ。

 

スタイルシートにCSSコードを記載する

 

カテゴリーラベルの全体的なカスタマイズは、このクラスに「したいこと」を追加することが出来ます。

背景色と文字色を変える

.cat-label{
background-color:#BADFDB; /*背景色*/
color: #FCF9EA; /*文字色*/
}

 

角を丸くする

.cat-label{
background-color:#B7D3DF; 
color: #FCF9EA; 
border-radius:10px; /*角を丸くする*/
}

 

文字を大きくする

.cat-label{
background-color:#B7D3DF; 
color: #FCF9EA; 
font-size:15px; /*文字サイズ*/
}

 

余白を入れる

.cat-label{
background-color:#B7D3DF; 
color: #FCF9EA; 
padding:0.5em 0.8em; /*余白*/
}

 

少々分かりにくいですが、
カテゴリーラベル文字の周りに余白が入っています。

 

全部ぶっこんだらこうなる

全部ぶっこんだバージョンです。
見た目のバランスを整えるために数値を少し変更しています。

.cat-label{
background-color:#B7D3DF; 
color: #FCF9EA; 
font-size:15px;
border-radius:30px;
padding:0.5em 0.8em;
}

 

関連記事のラベルだけ消す

記事下などに現れる関連記事のアイキャッチにも、カテゴリーラベルが設置されています。

 

ラベルの表示を変更すると、関連記事やカルーセルなどのアイキャッチにも影響があるので
いっそのこと消し去ってしまうという方は、以下のコードを貼ってみてください。

 

＼関連記事のラベルを非表示にする／

.related-entry-card .cat-label{
display:none;
}

 

＼カルーセルのラベルを非表示にする／

.carousel-entry-card-thumb .cat-label{ 
display:none;
 }

非表示になりました。

 

さいごに

今回は簡単に出来るカテゴリーラベルのカスタマイズを行ってみました。

小さな変化ですが、背景色ひとつで、ユーザーにとって見やすく分かりやすいサイトにすることが出来るので、ぜひ設定してみてくださいね。

次回はもう少し激しめの
カテゴリーラベルのカスタマイズを行っていきたいと思います。