【WordPress】【JIN】カテゴリーの色分けのCSSカスタマイズ

こんにちは😀広瀬ユキです。

今回は、カテゴリーの色分けのCSSカスタマイズをご紹介します。

JIN公式の設定方法に加えて、CSSにコードを追加して、文字色と枠線を付けるカスタマイズになります。

Before	After

WordPress有料テーマ【JIN】を使っている方向けの記事です。

カテゴリーの色分けって何？
カテゴリーの色の設定方法
カテゴリーの色分けのCSSカスタマイズ
- コード
- 説明
編集後記

カテゴリーの色分けって何？

カテゴリーの色分けとは、カテゴリーごとに色を付けて見やすくする機能のことです。付箋のようなイメージですね！

記事の左上に付いているコレです↓

カテゴリーの色の設定方法

カテゴリーの色（背景色）の設定方法は、JIN MANUALのコチラの記事を参考にしてください↓

JIN MANUAL

カテゴリーの色分けのCSSカスタマイズ

カテゴリーの色（背景色）の設定は上記の設定でできますが、ここでは、文字色を変えるカスタマイズと枠線を付けるカスタマイズをご紹介します。

では、実際にCSSにコードを追加して、カテゴリーの色分けのカスタマイズをしてみましょう。

CSSにコードを追加する方法がよく分からない方は、下記の記事を参考にしてください。

CSSにコードを追加する方法はコチラ↓

【WordPress】【JIN】ブログのデザインをカスタマイズする方法：2種類【追加CSS】【WordPress】有料テーマ【JIN】を使っている方向けにブログのデザインをカスタマイズする方法：2種類について書きました。【追加CSS】...

コード

/*---カテゴリーの色分け---*/
/***トップページ***/
.post-list.basicstyle .post-list-item .post-list-inner .post-list-cat {
color:#aaa !important; /*文字色*/
border: solid 1px #aaa !important; /*枠線の種類と太さと色*/
}
/***記事内***/
.cps-post .cps-post-header .cps-post-cat a {
color:#aaa !important; /*文字色*/
border: solid 1px #aaa !important; /*枠線の種類と太さと色*/
}
/***ピックアップコンテンツ***/
.pickup-contents-box-post-type .pickup-contents li a .pickup-image .pickup-cat {
color:#aaa !important; /*文字色*/
border: solid 1px #aaa !important; /*枠線の種類と太さと色*/
}
/***関連記事***/
.post-list-mag3col-slide .post-list-item .post-list-inner .post-list-meta .post-list-cat {
color:#aaa !important; /*文字色*/
border: solid 1px #aaa !important; /*枠線の種類と太さと色*/
}
/*---カテゴリーの色分け---*/

/*　*/　で囲ってある部分はメモ書きなので、削除してもOKです。
【メモ書きなしver.】

.post-list.basicstyle .post-list-item .post-list-inner .post-list-cat {
color:#aaa !important;
border: solid 1px #aaa !important;
}
.cps-post .cps-post-header .cps-post-cat a {
color:#aaa !important;
border: solid 1px #aaa !important;
}
.pickup-contents-box-post-type .pickup-contents li a .pickup-image .pickup-cat {
color:#aaa !important;
border: solid 1px #aaa !important;
}
.post-list-mag3col-slide .post-list-item .post-list-inner .post-list-meta .post-list-cat {
color:#aaa !important;
border: solid 1px #aaa !important;
}

【一行にまとめたver.】

.post-list.basicstyle .post-list-item .post-list-inner .post-list-cat, .cps-post .cps-post-header .cps-post-cat a, .pickup-contents-box-post-type .pickup-contents li a .pickup-image .pickup-cat, .post-list-mag3col-slide .post-list-item .post-list-inner .post-list-meta .post-list-cat {
color:#aaa !important;
border: solid 1px #aaa !important;
}

説明

トップページ
記事内
ピックアップコンテンツ
関連記事

トップページと記事内は必須ですが、ピックアップコンテンツや関連記事を使用していない場合は、そのコードは使わなくてOKです。

color	#aaa デフォルト（初期設定）では、#fff（白）になっています。お好みでカラーコードを変えてください。
border	solid 外枠の種類。お好みで種類を変えてください。
	1px 線の太さ。お好みで数値を変えてください。
	#aaa お好みでカラーコードを変えてください。

カテゴリーの色分けをカスタマイズすることができました‼