Table of Contents Plus（TOC+）目次のCSSカスタマイズ方法

本日、かの有名な目次作成プラグインであるTable of Contents Plus（TOC+）を導入してみました。

ブログに目次表示動画解説付きでTable of Contents Plus（TOC+）の設定方法

これまでは、ブログにおいて目次表示は要らないかなぁなんて思っていました。ですが、多くのサイトの方々が導入されているということとSEO的にも若干良いということなのと、訪れて

2017-01-14 00:37

でも、・・・・・・。

なんとなくデザインがどうなのかなぁ。的な感じでした。

CSSでなんとかならないかな？と得意の試行錯誤をしてちょっとだけ見栄えを良くかっこ良くすることができました。
（と思っています。：自己満足→通称：自己満（笑））

まずは、本家本元のTable of Contents Plus（TOC+）の公式サイトからプラグインをダウンロードします。
具体的にTable of Contents Plus（TOC+）の目次のスタイルをCSSで以下のように記載して見た目を変更しました。
これまでのTable of Contents Plus（TOC+）目次のデフォルトのCSSですと以下のような感じでした。
1. この状態から上記のCSSコードをテーマのstyle.cssに記載すると、以下のようになります。
もちろん、参考にさせていただいたサイトもあります。
1. 参考サイト）

目次に戻る

まずは、本家本元のTable of Contents Plus（TOC+）の公式サイトからプラグインをダウンロードします。

その後は、
上記に作成方法や設定方法を記載した記事の動画のように設定していってみてください。

そうすると、
基本的な設定はプラグインのみで出来ますがスタイル的に変えたいなぁ。

と思った時には以下のように自分にてCSSを書いて、
見た目を変更することができますので参考にしてみてください。

具体的にTable of Contents Plus（TOC+）の目次のスタイルをCSSで以下のように記載して見た目を変更しました。

/*--------------------------------------
 TOC+
 --------------------------------------*/

 #toc_container {
 display: block !important;
 width: 85% !important;
 background: #ffffff ;
 border: 1px solid #ccc;
 font-size: 95%;
 box-sizing: border-box;
 line-height: 1.4;
 margin: 36px auto;
 padding: 1em 2em;
 }
 #toc_container .toc_title {
 text-align: center;
 }

 #toc_container .toc_list {
 width: 95% ;
 padding-left: 0;
 }

 #toc_container ul {
 list-style: none;
 margin-bottom: 0;
 }
 #toc_container ul li {
 margin: 1px;
 padding-left: 0;
 text-indent: 0;
 }
 #toc_container ul a {
 display: block;
 text-decoration: none;
 color: #444; /* リンク色 */
 border-bottom: 1px dotted #ccc; /* リンク下線(1pxの間隔と色指定)*/
 }
 #toc_container .toc_list > li {
 margin-bottom: 30px;
 }

 #toc_container .toc_list > li > ul > li {
 margin-bottom: 8px;
 }

 #toc_container .toc_list > li > a {
 margin-bottom: 8px;
 border-bottom: 2px solid #00f; /* 大見出しの下線 */
 font-size: 110%; /* 大見出しのフォントサイズ */
 }

 #toc_container ul ul {
 padding: 0;
 }
 #toc_container li {
 margin-bottom: 1em;
 padding-bottom: 0.2em;
 }