【WordPress】【JIN】コンテンツマガジンの色を変える方法

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

今回は、コンテンツマガジンの色を変えるCSSカスタマイズをご紹介します。

コンテンツマガジンのタブの色をCSSにコードを追加して変更してみましょう❗

Before
After

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

コンテンツマガジンって何？
コンテンツマガジンの設定方法
コンテンツマガジンのタブの色のCSSカスタマイズ
- コード
- 説明
編集後記

コンテンツマガジンって何？

コンテンツマガジンとは、サイトのトップページで表示されるカテゴリーを表示する4つのタブのことです。

デフォルト（初期設定）では、カテゴリーを選択したときはタブは濃い色で表示され、選択していない3つのタブは薄いグレーで表示されます。

コンテンツマガジンを選択したときのタブは、吹き出しの形になっていますが、長方形の部分と▼の部分で構成されています。

コンテンツマガジンの設定方法

コンテンツマガジンの設定方法は、JIN MANUALのコチラの記事を参考にしてください↓

JIN MANUAL

コンテンツマガジンのタブの色のCSSカスタマイズ

では、CSSにコードを追加して、コンテンツマガジンのタブの色をカスタマイズしてみましょう。

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

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

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

コード

/*---コンテンツマガジン---*/
/***選択したとき***/
/*長方形の部分*/:checked#tab-1 ~ .tabBtn-mag li [for='tab-1'], :checked#tab-2 ~ .tabBtn-mag li [for='tab-2'], :checked#tab-3 ~ .tabBtn-mag li [for='tab-3'], :checked#tab-4 ~ .tabBtn-mag li [for='tab-4'] {
background-color: #aaa !important;/*背景色*/
color: #fff;/*文字色*/
}
/*▼の部分*/:checked#tab-1 ~ .tabBtn-mag li [for='tab-1']::after, :checked#tab-2 ~ .tabBtn-mag li [for='tab-2']::after, :checked#tab-3 ~ .tabBtn-mag li [for='tab-3']::after, :checked#tab-4 ~ .tabBtn-mag li [for='tab-4']::after {
border-top-color: #aaa !important;
}
/***選択しないとき***/
.tabBtn-mag label {
background-color: rgba(189, 189, 189, 0.17);/*背景色*/
color: #000;/*文字色*/
}
/*---コンテンツマガジン---*/

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

:checked#tab-1 ~ .tabBtn-mag li [for='tab-1'], :checked#tab-2 ~ .tabBtn-mag li [for='tab-2'], :checked#tab-3 ~ .tabBtn-mag li [for='tab-3'], :checked#tab-4 ~ .tabBtn-mag li [for='tab-4'] {
background-color: #aaa !important;
color: #fff;
}
:checked#tab-1 ~ .tabBtn-mag li [for='tab-1']::after, :checked#tab-2 ~ .tabBtn-mag li [for='tab-2']::after, :checked#tab-3 ~ .tabBtn-mag li [for='tab-3']::after, :checked#tab-4 ~ .tabBtn-mag li [for='tab-4']::after {
border-top-color: #aaa !important;
}
.tabBtn-mag label {
background-color: rgba(189, 189, 189, 0.17);
color: #000;
}

説明

選択したとき（１つのタブ）

長方形の部分

background-color	背景色デフォルト（初期設定）では、テーマカラーと同じ色になっています。#aaaはお好きなカラーコードに変えてください。
color	文字色デフォルト（初期設定）では、#fffで白となっています。お好きなカラーコードを入れてください。

▼の部分

border-top-color

背景色
デフォルト（初期設定）では、テーマカラーと同じ色になっています。#aaaはお好きなカラーコードに変えてください。※長方形の部分「background-color」と同じ色にすることをオススメします！

選択しないとき（３つのタブ）

background-color	背景色デフォルト（初期設定）では、rgba(189, 189, 189, 0.17)で薄いグレーとなっています。透明度が欲しい場合はrgba、必要ない場合はお好きなカラーコードを入れてください。
color	文字色デフォルト（初期設定）では、#000で黒となっています。お好きなカラーコードを入れてください。

「!important」は削除すると色が変わらないので、削除しないでください。

「rgba」の説明はコチラ

【WordPress】【JIN】ハンバーガーメニューの「MENU」の文字色と背景色のCSSカスタマイズ【WordPress】有料テーマ【JIN】スマホのハンバーガーメニューの色のCSSカスタマイズについて書きました。...

コンテンツマガジンのタブの色のCSSカスタマイズができました‼

不必要なコード（行）は削除し、お好みでカスタマイズしてみて下さい！

テーマカラーなどのカラー設定はコチラ↓

JIN MANUAL