カテゴリーラベルの色分け

今回はカテゴリーラベルのカラー変更という比較的簡単なカスタマイズです
ちょっとした事ですが、ここを変更することでカテゴリーの違いを
パッと見で分かるようになるのと、同テーマを使用している人との違いを出す事が出来ます
それでは早速やっていきまっしょー

指定箇所

デベロッパーツールで確認すると分かりますがCocoonの場合はcat-label-IDの部分にあたります
IDの部分はカテゴリーのIDですので、メニュー 投稿 カテゴリーで確認
この部分のカラーコードを変更していきます

コード

実際に追加したコードはこんな感じです

/* uncategorized */
.cat-label-1 {
    background-color: rgba(51,51,51,.7);
}

透過が使えるrgbaで色指定をしてあったので、この状態で自分が変更したい所を変更します
上のコードの指定部分はデフォルトカラーの状態です

rgba()－CSS3リファレンス

CSS3のプロパティ解説

www.htmq.com

実際に色を変えたコードはこんな感じになります

/* gadget */
.cat-label-ID {
    background-color: rgba(0,160,220,.7);
}

/* android */
.cat-label-ID {
    background-color: rgba(48,170,220,.7);
}

/* camera */
.cat-label-ID {
    background-color: rgba(107,188,220,.7);
}

自分は子カテゴリがあるカテゴリーがあるので、親カテゴリーと同系色で少し変えました
変更した色によっては、見た感じあまり変わりませんけどね(；・∀・)

もしコピーして使う場合はID部分を自分のブログに合わせて入れてくださいね

カラーコードや色見本

色見本はこういったサイトを見たり、ソフトを使うと良いと思います

WEB色見本 原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

www.colordic.org

FE - Color Paletteの詳細情報 : Vector ソフトを探す！

www.vector.co.jp

自分は以前からFE color paletteを使っています
カラーコードが10進数、16進数、HSVの数値といった具合に確認できて
画面の指定カラーコードの取得などが出来るので便利です、勿論カラーコードのコピーも出来ます

今回のように透過(アルファ)部分も使いたい場合、ウェブカラーコード(16進数)だけだと
肝心のRGB部分数値(10進数)がパッと出てくる人は少ないと思うので
ソフトは使わずにネットだけで済ませる場合は、こういったサイトを使うと良いですよ

色見本とカラーコード変換 | 遠近遊園

巨樹巨木とWeb制作小物と電子出版。おおむねTwitter。

ochikochi.com

おわり

今回は比較的簡単に出来るカスタマイズだと思いますが如何だったでしょうか？
使ってる人が多そうなテーマを使用している場合、こういった所で少し違いを出す事が出来ますし
パッと見てカテゴリーの違いが分かるようになるのでおすすめだと思います
比較的簡単に出来るとはいえ、しっかりバックアップを取ってから作業をしましょう！

[share]