JINカスタマイズ

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

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

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

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

BeforeAfter

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

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

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

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

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

カテゴリーの色(背景色)の設定方法は、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(白)になっています。お好みでカラーコードを変えてください。
bordersolid
外枠の種類。お好みで種類を変えてください。
1px
線の太さ。お好みで数値を変えてください。
#aaa
お好みでカラーコードを変えてください。

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

  • カテゴリーの色(背景色)を薄くしたい場合にオススメのカスタマイズです!
  • Before&After画像のように、背景色が濃い場合は白の方が綺麗に見えます。

編集後記

カテゴリーの色(背景色)を薄くしたい場合は、文字色を濃くした方が良いかも?と思い、記事にしました。

【WordPress】【JIN】ドロップダウン表示のアイコン「V」を非表示にするCSSカスタマイズ【WordPress】有料テーマ【JIN】を使っている方向けに、ドロップダウン表示のアイコン「V」を非表示にするCSSカスタマイズをご紹介します。カテゴリーとアーカイブのウィジェットをドロップダウンで表示したときのアイコン「V」を非表示にします。...
【WordPress】【JIN】ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法【WordPress】有料テーマ【JIN】を使っている方向けに、ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法をご紹介します。...
【Wordpress】【JIN】カテゴリーのアイキャッチ画像を設定する方法【Wordpress】有料テーマ【JIN】カテゴリーのアイキャッチ画像を設定する方法を書きました。アイキャッチ画像が表示されないときの対処法もご紹介します。...

☆クリックで応援お願いします☆

PVアクセスランキング にほんブログ村

ブログランキング・にほんブログ村へ にほんブログ村 スイーツブログ コンビニスイーツへ にほんブログ村 ブログブログ ブログ初心者へ