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

wordpress
この記事は 約3分 で読めます。

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

Sponsored Link

指定箇所

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

コード

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

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

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

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

/* 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部分を自分のブログに合わせて入れてくださいね

カラーコードや色見本

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

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

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

おわり

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

2018/09/27追記
Cocoon 1.2.4~ 投稿一覧内にあるカテゴリーの設定から色の変更ができるようになりました


[share]

タイトルとURLをコピーしました