JINカスタマイズ

【WordPress】【JIN】目次の「表示・非表示」の色のCSSカスタマイズ

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

WordPressのプラグインには、目次を自動生成してくれる「Table of Contents Plus」というプラグインがあります。

今回は、目次の「表示・非表示」の色のCSSカスタマイズをご紹介します。

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

プラグイン「Table of Contents Plus」をインストールしよう!

まずは、プラグイン「Table of Contents Plus」をインストールし、設定を済ませておきましょう。

インストールや設定方法はコチラ↓
【WordPress】プラグイン「Table of Contents Plus」の設定方法【WordPress】プラグイン「Table of Contents Plus」の設定方法についてご紹介します。...

カスタマイズをオススメする理由―目次と連動する色は?―

以前、コチラの記事(【WordPress】【JIN】ハンバーガーメニューの閉じるボタンが表示されないときの対処法)でご紹介したように、JINのカラー設定と連動する色は、

  • 「もくじ」※初期設定だと「Contents」テーマカラー
  • 「閉じる」や「開く」※初期設定だと「hide」や「show」リンクの色

となっています。

また、「HTMLサイトマップ内の文字色」もリンクの色と連動しています。

なので、目次の「表示・非表示」をリンクの色と異なった色にしたい場合に、このカスタマイズがオススメです❗

目次の「表示・非表示」の色のCSSカスタマイズ

では、CSSにコードを追加して、目次の「表示・非表示」の色をカスタマイズしてみましょう。

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

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

コード

/*---目次の表示・非表示---*/
.toc_toggle a {
color: #aaa;/*色*/
}
/*---目次の表示・非表示---*/

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

【メモ書きなしver.】

.toc_toggle a {
color: #aaa;
}

#aaaには、お好みのカラーコードを入れてい下さい。

目次の「表示・非表示」の色のCSSカスタマイズができました‼

編集後記

目次の「表示・非表示」をリンクの色ではなく、アクセントカラーと同じ色にしたかったので、このカスタマイズをしてみました。

【WordPress】【JIN】サイドバーの目次のCSSカスタマイズ【WordPress】有料テーマ【JIN】を使っている方向けに、サイドバーの目次のCSSカスタマイズについてご紹介します。プラグイン「Table of Contents Plus」をインストールし、CSSにコードを追加することでサイドバーの目次を見やすくカスタマイズします。...
【WordPress】プラグイン「Table of Contents Plus」でサイトマップを作成する方法【WordPress】プラグイン「Table of Contents Plus」でサイトマップを作成する方法をご紹介します。...
【WordPress】プラグイン「Table of Contents Plus」の設定方法【WordPress】プラグイン「Table of Contents Plus」の設定方法についてご紹介します。...

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

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

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