【cocoon】カテゴリー名の背景色をカテゴリーごとに変える方法

WordPressテーマcocoonのカテゴリーバッジの色を変える方法 ブログ・HP
スポンサーリンク

cocoonの記事一覧ページ(カテゴリーページ)で、サムネイルの上に小さく出るカテゴリー名のバッジの色を変えたい!

カテゴリーによって色分けされているブログもよくありますよね。

なんだかおしゃれだったので真似したくなりやってみました。

cocoonカテゴリーのタグの色を変える方法

 

バッジの色を変える方法を説明します。記述はコピペでOK!

では行ってみましょう!

スポンサーリンク

【cocoon】カテゴリー名の背景色をカテゴリーごとに変える方法

以下の記述を外観→テーマエディターのスタイルシートに書き足せばOKです。
.cat-label- {background-color: #ffffff;}

 

「ffffff」の部分にお好みの色のカラーコードを当てはめて下さい。

部分●の部分には数字が入るのですが、数字はカテゴリーIDとなっています。

カテゴリーにはそれぞれ番号が不規則に割り振られるので、その番号を確認して●の部分に入れる必要があります。

カテゴリーIDの確認方法は以下の通り。

 

①投稿→カテゴリーへ移動

cocoonカテゴリーのタグの色を変える方法

 

②カテゴリー名にマウスを乗せる

この時画面下のリンク先URLの部分に出てくる「category&tag_ID=●」という部分の

●の数字が、カテゴリーIDです。

cocoonカテゴリーのタグの色を変える方法

 

この数字を、先ほどのCSSの●の部分に当てはめます。

あとはお好みのカラー指定をすれば、カテゴリーバッジの色が代わります!

仕組みがわかれば簡単ですね!

cocoon設定からは出来るのか?

最初はcocoon設定から出来るのかなーと思って色々見てたのですが、

それらしき項目が見つかりませんでした。

カテゴリーのIDはランダムで指定されるのでそう簡単に出来ないのでしょうか。

こうして自分でいじってみると、複雑さがよくわかりますね。

cocoonのようにカスタマイズしやすいテーマを作ってくれた方に本当に感謝です…。

まとめ:【cocoon】カテゴリーバッジの色はカテゴリーIDごとに設定できる

ブログのテーマでcocoonを使っている人は多いと思います。

あなたのブログのデザイン性を上げるために役に立てば嬉しいです!

それにしても、カテゴリーごとにID番号が割り当てられるのは理解できますが、なんでランダムなんでしょう?

謎だ〜。

 

コメント