- HOME
- > BLOG CATEGORY
- 【WordPress】目次プラグイン、Table of Contents Plusの使い方を解説

- お知らせ
- NEW 2025.04.05 【jQuery】特定の文字列前に改行を挿入する方法
- お知らせ
- NEW 2025.04.05 【WordPress】MW WP Form バリデーションのカスタマイズについて
- お知らせ
- 2025.02.24 【CSS】点線の間隔を調整する方法を解説
こんな方に読んでほしい
[記事の内容]
「Table of Contents Plus」 は、WordPressのプラグインになります。
Table of Contents Plusとは、記事の目次を生成してくれるプラグインになります。
設定によっては、見出しが3つ以上ある場合は見出しを表示させ、見出しが3つ以下の場合は見出しを非表示にする設定などもできます。
このプラグインを紹介する理由は3つあります。
イメージ図は以下のようになります。
私のブログはCSSでカスタマイズしております。
目次に関するCSSは最後に載せております。
Table of Contents Plusの公式サイトは以下になります。
プラグインのインストール方法は上記の「プラグイン導入方法」からご確認ください。
次に使用についての解説です。
a href="#table-of-contents-plus-1"
アンカーでアンダースコアではなくハイフンを使用します。
例:アンダースコアの場合
#table_of_contents_plus_1
例:ハイフンの場合
#table-of-contents_plus-1
基本的にアンカーはハイフンを使用します。
上記の、「9:CSS ファイルを除外」にチェックを入れた場合は、Table of Contents PlusのCSSは読み込まれすずに、
ご自身で記述したCSSが適用されます。
シンプルなデザインは以下のようになります。
#toc_container{
background-color: #f9f9f9;
padding: 40px 60px;
margin-bottom: 40px;
}
#toc_container p.toc_title {
display: flex;
align-items: center;
font-weight: bold;
font-size: 16px;
}
#toc_container p.toc_title:after {
border-top: 1px solid #75abc6;
content: "";
flex-grow: 1;
margin-left: 1rem;
}
#toc_container ul li{
list-style: decimal;
margin:0 0 0 12px;
box-sizing: border-box;
font-size: 14px;
}
#toc_container ul li a{
display: block;
color: #333;
text-decoration: none;
border-bottom: 1px dotted #ccc;
padding: 10px 5px;
}
#toc_container ul li ul li{list-style: disc;}
#toc_container ul li ul li:first-of-type{margin-top: 8px;}
今回はこれで以上です。
2025.04.05
2025.04.05
2025.02.24
2025.01.25
2025.04.05
2025.04.05
2025.02.24
2025.01.25
2025.01.18
2025.01.18
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2024 shu-naka-blog