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

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

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

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

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

では行ってみましょう！

以下の記述を外観→テーマエディターのスタイルシートに書き足せばOKです。

.cat-label-● {background-color: #ffffff;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

謎だ〜。