こんにちは😀広瀬ユキです。
今回は、コンテンツマガジンの色を変えるCSSカスタマイズをご紹介します。
コンテンツマガジンのタブの色をCSSにコードを追加して変更してみましょう❗
Before | ![]() |
After | ![]() |
WordPress有料テーマ【JIN】を使っている方向けの記事です。
コンテンツマガジンって何?
コンテンツマガジンとは、サイトのトップページで表示されるカテゴリーを表示する4つのタブのことです。
デフォルト(初期設定)では、カテゴリーを選択したときはタブは濃い色で表示され、選択していない3つのタブは薄いグレーで表示されます。

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

コンテンツマガジンの設定方法
コンテンツマガジンの設定方法は、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;
}
説明
選択したとき(1つのタブ)
長方形の部分
background-color | 背景色 デフォルト(初期設定)では、テーマカラーと同じ色になっています。#aaaはお好きなカラーコードに変えてください。 |
color | 文字色 デフォルト(初期設定)では、#fffで白となっています。お好きなカラーコードを入れてください。 |
▼の部分
border-top-color | 背景色 デフォルト(初期設定)では、テーマカラーと同じ色になっています。#aaaはお好きなカラーコードに変えてください。※長方形の部分「background-color」と同じ色にすることをオススメします! |
選択しないとき(3つのタブ)
background-color | 背景色 デフォルト(初期設定)では、rgba(189, 189, 189, 0.17)で薄いグレーとなっています。透明度が欲しい場合はrgba、必要ない場合はお好きなカラーコードを入れてください。 |
color | 文字色 デフォルト(初期設定)では、#000で黒となっています。お好きなカラーコードを入れてください。 |
「!important」は削除すると色が変わらないので、削除しないでください。
コンテンツマガジンのタブの色のCSSカスタマイズができました‼
不必要なコード(行)は削除し、お好みでカスタマイズしてみて下さい!
テーマカラーなどのカラー設定はコチラ↓
編集後記
薄いグレー以外の色にしたかったので、このカスタマイズをしてみました。


【WordPress】【JIN】サイドバーのウィジェットの余白を調整するCSSカスタマイズ【WordPress】有料テーマ【JIN】を使っている方向けに、サイドバーのウィジェットの余白を調整するCSSカスタマイズをご紹介します。...


【WordPress】【JIN】フッターのアーカイブの表記を非表示にする方法【WordPress】有料テーマ【JIN】を使っている方向けに、フッターのアーカイブの表記を非表示にする方法をご紹介します。...


【WordPress】【JIN】ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法【WordPress】有料テーマ【JIN】を使っている方向けに、ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法をご紹介します。...