JINカスタマイズ

【WordPress】【JIN】サイドバーの目次のCSSカスタマイズ

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

WordPressのプラグインには、目次を自動生成してくれる「Table of Contents Plus」というプラグインがあります。とても便利なので是非インストールして使ってみてください!

目次は、サイドバーに設置することができるのですが、カスタマイズしないままだと、段落が付いておらず、スクロールバーも付いていません。

そこで今回は、サイドバーの目次のCSSカスタマイズについてご紹介します。

BeforeAfter
  • WordPress有料テーマ【JIN】を使っている方向けの記事です。
  • サイドバーのスタイルによって、以下のカスタマイズがうまく表示されないことがありますが、その場合は、余白のコード(marginやpadding)を適宜調整してください。
サイドバーデザインの選択はコチラ↓

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

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

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

サイドバーに目次を設置する

次に、サイドバーに目次を設置しましょう。

  1. WordPressの編集画面から、「外観」→「ウィジェット」を開きます
  2. 利用できるウィジェットの中から、「TOC+」を「サイドバー」または「サイドバー追尾【PC】」に追加します ※サイドバー追尾【PC】がオススメ
  3. 「完了」を押します

サイドバーに目次を設置することができました‼

サイドバーの目次のCSSカスタマイズ

このカスタマイズでできることは以下です。

  • 段落を付けることができる
  • 縦幅を決めることができる
  • スクロールバーを付けることができる

では、CSSにコードを追加して、サイドバーの目次をカスタマイズしてみましょう。

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

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

コード

サイドバーのデザインに応じて、[スタイル1~5]に合うカスタマイズと、[スタイル6]に合うカスタマイズがありますので、適宜使用して下さい。

サイドバーのデザインの切り替え方法はコチラ↓

サイドバーのデザイン[スタイル1~5]

/*---サイドバーの目次---*/
.toc_widget ul {
line-height: 1.8rem;/*行間*/
max-height: 200px;/*縦幅(高さ)*/
overflow-y: auto;/*縦スクロール*/
margin: 0px;/*外側余白*/
padding-left: 25px;/*内側余白左*/
}
.toc_widget ul li {
list-style: decimal;/*番号*/
color: #aaa;/*番号の色*/
}
.toc_widget ul li ul {
display: table;/*段落調整*/
overflow-y: visible;/*表示*/
padding-left: 20px;/*内側余白左*/
margin: 0px;/*外側余白*/
}
.toc_widget ul li ul li {
list-style: disc;/*●*/
color: #aaa;/*●の色*/
}
/*---サイドバーの目次---*/

サイドバーのデザイン[スタイル6]

/*---サイドバーの目次---*/
.toc_widget ul {
line-height: 1.8rem;/*行間*/
max-height: 200px;/*縦幅(高さ)*/
overflow-y: auto;/*縦スクロール*/
margin: 0px;/*外側余白*/
margin-left: 10px;/*外側余白左*/
}
.toc_widget ul li {
list-style: decimal;/*番号*/
color: #aaa;/*番号の色*/
}
.toc_widget ul li ul {
display: table;/*段落調整*/
overflow-y: visible;/*表示*/
padding-left: 20px;/*内側余白左*/
margin: 0px;/*外側余白*/
}
.toc_widget ul li ul li {
list-style: disc;/*●*/
color: #aaa;/*●の色*/
}
/*---サイドバーの目次---*/

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

【メモ書きなしver.】

[スタイル1~5]

/*---サイドバーの目次---*/
.toc_widget ul {
line-height: 1.8rem;
max-height: 200px;
overflow-y: auto;
margin: 0px;
padding-left: 25px;
}
.toc_widget ul li {
list-style: decimal;
color: #aaa;
}
.toc_widget ul li ul {
display: table;
overflow-y: visible;
padding-left: 20px;
margin: 0px;
}
.toc_widget ul li ul li {
list-style: disc;
color: #aaa;
}
/*---サイドバーの目次---*/

[スタイル6]

.toc_widget ul {
line-height: 1.8rem;
max-height: 200px;
overflow-y: auto;
margin: 0px;
margin-left: 10px;
}
.toc_widget ul li {
list-style: decimal;
color: #aaa;
}
.toc_widget ul li ul {
display: table;
overflow-y: visible;
padding-left: 20px;
margin: 0px;
}
.toc_widget ul li ul li {
list-style: disc;
color: #aaa;
}

説明

上記のコードの中で自由に変更できる部分をピックアップしてみました。

  • line-height → 行間を変えたい場合は数値を変更
  • max-height → 目次の縦幅(高さ)を変えたい場合は数値を変更
  • margin-left → 左に余白が欲しい場合は数値を変更
  • list-style:decimal → 段落番号の表記(1,2,3…)を変えたい場合は変更
  • list-style:disc → 小段落の表記●を変えたい場合は変更
  • color → お好みのカラーコードを入力

サイドバーの目次のCSSカスタマイズができました‼

編集後記

目次はそのままでももちろん使えますが、段落があったほうが分かりやすいし、縦幅を決めてスクロールバーを付けることで、他のウィジェットが設置しやすくなります。

【WordPress】【JIN】サイドバーのウィジェットのタイトルを中央寄せにするCSSカスタマイズ【WordPress】【JIN】サイドバーのウィジェットのタイトルを中央寄せにするCSSカスタマイズをご紹介します。...
【WordPress】【JIN】サイドバーのウィジェットの余白を調整するCSSカスタマイズ【WordPress】有料テーマ【JIN】を使っている方向けに、サイドバーのウィジェットの余白を調整するCSSカスタマイズをご紹介します。...
【WordPress】プラグイン「Table of Contents Plus」でサイトマップを作成する方法【WordPress】プラグイン「Table of Contents Plus」でサイトマップを作成する方法をご紹介します。...
【WordPress】プラグイン「Table of Contents Plus」の設定方法【WordPress】プラグイン「Table of Contents Plus」の設定方法についてご紹介します。...

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

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

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