こんにちは😀広瀬ユキです。
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」の設定方法についてご紹介します。...
☆クリックで応援お願いします☆