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

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

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

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

プラグイン「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サイトマップ内の文字色」もリンクの色と連動しています。

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

JIN MANUAL

あわせて読みたい

カラー設定の方法｜JIN MANUAL

JINではさまざまなパーツの色の設定を行うことができます。その方法についてお伝えしましょう！ カラー設定の方法 「カスタ

続きを読む

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

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

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

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

コード

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

.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」の設定方法についてご紹介します。...