Table of Contents Plusデザインカスタマイズで目次をおしゃれに演出！

更新日 2019/08/08
カテゴリー WordPressプラグイン

WordPress で目次を自動的に表示してくれる Table of Contents Plus はすごく便利なプラグインですが、初期設定のままだとちょっと味気ないデザインですよね。

設定画面から横幅や背景色を変更することはできますが、それでもちょっと物足りない。そこで今日は、CSS でおしゃれなデザインにする方法をご紹介します。

目次をカスタマイズしてライバルブログに一歩差をつけてみましょう！

Headline

カスタマイズ前の下準備
- プラグインが出力しているCSSを消す
Table of Contents Plus CSSデザイン
まとめ

カスタマイズ前の下準備

設定画面ではこのように横幅・フォントサイズ・背景色などを簡単に指定できます。

参考Table of Contents Plus の使い方と設定方法

初期設定のままだと、このような感じですね。

ソースをのぞくと、設定に基づいてプラグインが自動的に CSS を出力しているのがわかります。

プラグインが出力しているCSSを消す

オリジナルデザインにするためにはこの CSS がちょっとジャマなので、出力しないよう設定しましょう。

基本設定の下にある「上級者向け」を開き、「プラグインのCSSを読み込まない場合チェックを入れてください」にチェックを入れるだけで OK 。

そうすると、CSS が消えてこのように表示が変わります（サンプルは Gush2 を使用しています）。

では、この状態からカスタマイズしていきます！

Table of Contents Plus CSSデザイン

TOC+ が出力しているコードを調べよう

CSS でデザインを調整していく前に、目次がどのような構造になっているのか調べてみましょう。

各ブラウザに標準装備されている開発者ツール（デベロッパーツール）を使うとすぐにわかります。

図で表すと、このようになっていました。

あとは CSS で指定していくだけですね。今回はこのようなデザインにしてみたいと思います。

全体の横幅や枠を指定して中央に寄せる

目次は <div id=”toc_container”></div> で囲まれているので、この id を使って全体の指定をしてみましょう。

#toc_container {
	display: block !important;
	width: 80% !important;
	background: #fff; /* 背景色 */
	border: 1px solid #ccc; /* 枠 */
	font-size: 95%; /* フォントサイズ */
	box-sizing: border-box; /* スマホの横揺れ防止 */
	line-height: 1.4; /* 行間 */
	margin: 36px auto; /* 外側の余白 */
	padding: 1em 2em; /* 内側の余白 */
}

display と width に !important を指定しています。

これは、目次を閉じて開いたあとにインラインで指定が入るため、それを上書きするための記述です。

また、横幅を 100 ％にするとスマホで横揺れが発生してしまうので、box-sizing を指定してあります。

サンプルのように全体の幅を 80 ％にするなら不要ですが、横幅いっぱいに広げる場合は入れておきましょう。

左右の margin に auto を指定すると中央寄せになります。

これだけだとデフォルトのデザインとあまり変わりませんね。

つづいて中身を調整していきましょう！

目次タイトルを調整する

初期設定では「見出し」となっている、タイトル部分を変えてみます。

#toc_container .toc_title {
	text-align: center; /* 中央寄せ */
	background: #eee; /* 背景色 */
	border-bottom: 2px solid #ddd; /* 下線 */
	padding: 0.4em 0; /* 内側の余白 */
}

背景色よりちょっと濃いグレーを下線に指定して、立体的にしてみました。

次はリストの部分を調整していきます。

目次リストのCSSをリセットする

リストは <ul> で出力されているので、プラグインの CSS を止めた場合はテーマの CSS が適用されます。

Gush2 ではこのような指定です。

ul {
    list-style: inside url("images/checkmark.png") disc;
    margin-bottom: 24px;
}

ul li {
    margin: 0.8em 0px 0.8em 0.5em;
    padding-left: 1em;
    text-indent: -1.5em;
}

まず、この指定をリセットしてしまいましょう。

#toc_container ul {
    list-style: none;
    margin-bottom: 0;
}

#toc_container ul li {
    margin: 0;
    padding-left: 0;
    text-indent: 0;
}

これで、「#toc_container の中にあるリスト」のみ指定がリセットされます。

テーマによって記述が異なるので、開発ツールで調べてみてください。

うまくリセットできないときは、CSS の優先順位をチェックしてみましょう。

大見出しのみ強調したデザインにする

リストの中身はこのようになっています。

<div id="toc_container" class="no_bullets">
<p class="toc_title">見出し</p>
<ul class="toc_list">
  <li><a href="#i"><span class="toc_number toc_depth_1">1</span> ここは大見出しです</a>
    <ul>
      <li><a href="#i-2"><span class="toc_number toc_depth_2">1.1</span> ここは中見出しです</a>
        <ul>
          <li><a href="#i-3"><span class="toc_number toc_depth_3">1.1.1</span> ここは小見出しです</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#i-4"><span class="toc_number toc_depth_1">2</span> まとめ</a></li>
</ul>
</div>

大見出しのみちょっと強調して、中見出しや小見出しは一字下げるよう調整してみました。

#toc_container ul a {
	display: block;
	text-decoration: none;
	color: #444; /* リンク色 */
	border-bottom: 1px dotted #ccc; /* リンク下線 */
}

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

#toc_container ul ul {
	padding: 1em 0 1em 1em;
}

#toc_container li {
	margin-bottom: 0.8em;
	padding-bottom: 0.2em;
}

リスト内のリンクにフォントカラーや下線を指定し、大見出しの部分だけ下線を太くしてフォントサイズも大きくしています。

.toc_list > li > a のように指定することで、直下の子要素にのみスタイルが適用されます。孫要素には反映されません。

参考意外と知らない!?CSSセレクタ20個のおさらい

というわけで、めでたく完成しました！

CSS最終形

最終的に以下のようになりました。コピペして使ってみてください。

/*--------------------------------------
  TOC+
--------------------------------------*/
#toc_container {
	display: block !important;
	width: 80% !important;
	background: #fff;
	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;
	background: #eee;
	border-bottom: 2px solid #ddd;
	padding: 0.4em 0;
}

#toc_container ul {
    list-style: none;
    margin-bottom: 0;
}

#toc_container ul li {
    margin: 0;
    padding-left: 0;
    text-indent: 0;
}

#toc_container ul a {
	display: block;
	text-decoration: none;
	color: #444;
	border-bottom: 1px dotted #ccc;
}

#toc_container .toc_list > li > a {
	border-bottom: 2px solid #ccc;
	font-size: 110%;
}

#toc_container ul ul {
	padding: 1em 0 1em 1em;
}

#toc_container li {
	margin-bottom: 0.8em;
	padding-bottom: 0.2em;
}

※リセット部分は多少違うと思いますので調整が必要です

あとは配色や余白のバランスなど、テーマに合うようお好みで変えてみてください！

おまけサンプル

上記のサンプルをベースに配色を変え、さらに position プロパティを使ってこんなのも作ってみました。

CSS はこちらです。

/*--------------------------------------
  TOC+
--------------------------------------*/
#toc_container {
	display: block !important;
	width: 80% !important;
	background: #fef;
	border: 2px solid #f39;
	border-radius: 4px;
	font-size: 95%;
	box-sizing: border-box;
	line-height: 1.4;
	margin: 36px auto;
	padding: 4em 2em 1em;
	position: relative;
}

#toc_container .toc_title {
	text-align: center;
	background: #fff;
	border-radius: 4px;
	border: 2px solid #f39;
	color: #c09;
	padding: 0.8em;
	position: absolute;
	top: -24px;
}

#toc_container ul {
    list-style: none;
    margin-bottom: 0;
}

#toc_container ul li {
    margin: 0;
    padding-left: 0;
    text-indent: 0;
}

#toc_container ul a {
	display: block;
	text-decoration: none;
	color: #c09;
	border-bottom: 1px dotted #f9c;
}

#toc_container .toc_list > li > a {
	border-bottom: 2px solid #f9c;
	font-size: 110%;
}

#toc_container ul ul {
	padding: 1em 0 1em 1em;
}

#toc_container li {
	margin-bottom: 0.8em;
	padding-bottom: 0.2em;
}

まとめ

目次を出力する Table of Contents Plus を導入するなら、デザインを変更してオリジナリティを出してみましょう。

記事を書くだけではなく、こうしてカスタマイズするのも楽しいですよ！

CSS を覚えるとほかにもいろいろ応用できるので、少しずつ勉強してみてください。

それでは、また。