Table of Contents Plus：記事の目次を自動で生成してくれるWordPressプラグイン

h3、h4などの見出しタグを基準に、自動的に記事に目次をつけてくれるプラグイン『Table of Contents Plus』をご紹介。記事の冒頭に目次があればひと目で記事の全容がわかるが、その目次を自動生成してくれるとはありがたい！ブロガーはインストールを検討すべき非常に優秀なプラグインだ。

Table of Contents Plusの設定など

設定

インストールと有効化までは割愛する。

以下、設定画面だ。【管理画面＞設定＞TOC+】で設定する。「基本設定」タブだけ設定すればよいだろう。

スタイルシート（CSS）

本稿では具体的なCSS記述も紹介する。以下のコードを、WordPressテーマのスタイルシートに追記すればよい。

#toc_container {
 border: none !important;
 background: #f7f7f7 !important;
 margin: 48px auto !important;
 padding: 12px 24px !important;
 border-radius: 0 !important;
}
@media screen and (max-width: 767px) {
#toc_container {
 margin: 4px auto !important;
 padding: 4px 6px !important;
 width: 88% !important
}
}
#toc_container li {
 margin: 0 0 4px;
}
#toc_container li ul li {
 font-size: 12px;
 margin: 0;
 line-height: 22px;
}
#toc_container li ul li span {
 font-size: 12px;
 margin-right: 4px;
}
#toc_container li:before {
 display: none;
}
#toc_container li span {
 color: #aaa;
 font-size: 15px;
 font-weight: bold;
 margin-right: 8px;
}

このように設定すれば、以下のようなデザインとなるはずだ。