【WordPress】目次用プラグインTable Of Contents Plus（TOC）が一番｜カスタマイズと中央寄せ

WordPressの記事に目次を入れよう

ワードプレスを使ったメディア、ブログ運営をしている方でよりページの利便性をあげたいと思っている場合には目次の設置はオススメです。

使用しているテンプレートに最初から入っているものも現在は増えてきていますが、お気に入りのものがない場合にはプラグインで導入するのが早くて綺麗です。Table Of Contents Plus（TOC）はページ上部の好きな位置に目次を設置できる人気のプラグインです。

今回はTOCの目次を可愛くカスタマイズするCSSと左寄せで設置されてしまうというときの対策についてお伝えしていきます。

Table Of Contents Plusのメリット

WordPressの人気目次導入プラグインのTable Of Contents Plusはいくつもの長所があります。

カスタマイズが簡単、ページ内リンクが自動設置、目次に入れる見出し（h2～h5）を自分で決められることが挙げられます。

特にページ内リンクが自動で入れられるのは、長い記事を書いている方にとっては必須であるといって良いでしょう。スマホでブログを読んでくれる方にとって長い文章をスクロールするのはなかなかの手間になります。

ワンクリックで読みたいと思っている部分へ遷移させられるというのはユーザー目線にとってもメリットが大きいのです。

Table Of Contents Plusの初期設定

プラグインの新規追加から「Table Of Contents Plus」を検索して有効化しましょう。

「除外する見出し」「パス限定」「アンカーのデフォルト接頭辞」の項目は初期状態で大丈夫です。

TOCを可愛く変更する

[css]

#toc_container p.toc_title+ul.toc_list>li {
margin-bottom: 0.1em;
padding-bottom: 0.4em;
}

#toc_container p.toc_title+ul.toc_list {
margin-top: 1em;
margin-right: 0.4em;
}

#toc_container li {
padding-left: 1em !important;
line-height: 1.8em;
}

#toc_container ul ul {
margin-bottom: 10px;
}

.toc_number {
margin-left: -0.5em;
margin-right: 0.5em;
font-family: ‘Dynalight’, cursive;/*数字のフォント*/
}

#toc_container p.toc_title {
text-align: center;
font-weight: 700;
margin: 0;
padding: 0;
letter-spacing: 0.05em;
}

#toc_container ul>li>ul>li {
font-size: 94% !important;/*小見出しの文字サイズ*/
}

#toc_container {
background: #fce4d6 !important;/*背景色*/
padding: 10px;
margin-bottom: 1em;
width: auto;
display: table;
box-shadow: 0 0 0 10px #fce4d6 !important;
border: dashed 2px #98605e !important;/*内側に破線*/
border-radius: 9px;
margin-top: 30px;
}

#toc_container a {
text-decoration: none;
text-shadow: none;
color: #98605e !important;/*リンクの色*/
}

[/css]