JINカスタマイズ

【WordPress】【JIN】コンテンツマガジンの色を変えるCSSカスタマイズ

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

今回は、コンテンツマガジンの色を変える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】を使っている方向けに、ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法をご紹介します。...

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

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