「Table of Contents Plus」 カスタマイズ方法(CSS デザイン)

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

設定画面から横幅や背景色を変更しても、ちょっと物足りないと思います。そこで、CSS でおしゃれなデザインにするカスタマイズしてみましょう。

サンプル付きで具体的な手順を解説していきます。

カスタマイズ前の設定

Table of Contents Plus の基本的な使い方は以下の記事をご覧ください。

「Table of Contents Plus」の設定方法・使い方

設定画面で、横幅・フォントサイズ・背景色などを指定できます。

Table of Contents Plus デザイン設定

初期設定のままだと、以下のようなデザインです(テーマ:Twenty Twenty-One)。

Table of Contents Plus デフォルト

シンプルすぎるので、サイトのテイストに合わせてカスタマイズしたいところですね。

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

オリジナルデザインに変更するにあたって、プラグインが出力している CSS がジャマになります。出力しないよう設定しましょう。

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

Table of Contents Plus CSS ファイルを除外

そうすると、以下のように見た目が変わります。

Table of Contents Plus CSSを除外したデザイン

この状態からカスタマイズしていきましょう。

Table of Contents Plus CSS デザイン

完成形は以下のようなイメージです。

Table of Contents Plus デザインサンプル完成形

そのままで問題ない場合、以下の CSS をそのままコピーして使ってください(※ テーマによっては多少調整が必要になるかと思います)。

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

.toc_title {
	background: #eee; /* 背景色 */
	font-weight: bold; /* 太字 */
	padding: 0.4em 0; /* 内側の余白 */
	text-align: center; /* 中央寄せ */
}

.toc_toggle {
	font-size: 0.9em;
	font-weight: normal;
}

.toc_brackets {
	display: none;
}

.toc_list,
.toc_list * {
	list-style: none;
	margin: 0;
	padding: 0;
}

.toc_list {
	margin-top: 1em;
}

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

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

.toc_list ul {
	padding: 1em 0 0 1em;
}

.toc_list li {
	margin-bottom: 0.4em;
	padding-bottom: 0.4em;
}

以下、各指定の解説です。

TOC+ の基本構造

CSS でデザインを調整していく前に、目次全体がどのような構造になっているのか見ておきましょう。簡単に、以下のような構造となっています(ここ何年も変わっていないようです)。

<div id="toc_container" class="no_bullets">
	<p class="toc_title">目次(タイトル)</p>
	<ul class="toc_list"></ul>
</div>

図で表すと、このような感じです。

Table of Contents Plus 構造

ざっくり、以下 3 つをもとに指定していけばよいということですね。

  • 全体:#toc_container
  • タイトル:.toc_title
  • 目次リスト:.toc_list

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

最初に大枠の調整です。#toc_container に対して枠線や余白などを指定します。

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

displaywidth!important を指定しています。これは、目次を閉じて開いたあとにインラインで指定が追加されるため、それを上書きするための記述です。

また、左右の marginauto にすることにより、中央寄せ配置としました。幅 100 % の場合は指定しなくてもかまいません。

これで以下のように外観が変わります。

Table of Contents Plus 何も指定していないデザイン
Table of Contents Plus 大枠を調整したデザイン

目次タイトルを調整する

つづいて、タイトル部分を変えてみましょう。

.toc_title {
	text-align: center; /* 中央寄せ */
	background: #eee; /* 背景色 */
	padding: 0.4em 0; /* 内側の余白 */
	font-weight: bold; /* 太字 */
}

.toc_toggle {
	font-size: 0.9em; /* 開閉リンクのフォントサイズ */
	font-weight: normal; /* 太字解除 */
}

.toc_brackets {
	display: none; /* カッコを非表示 */
}

背景色をグレーにして、太字にしてみました。

開閉用のリンクは、少し文字を小さくしてブラケット [] を非表示にしています。わざわざ目次を閉じる人はいないと思いますので、切り替えを許可しなくてもよいかもしれません。

タイトル部分の変更で、以下のようになりました。

Table of Contents Plus 大枠を調整したデザイン
Table of Contents Plus タイトルを調整したデザイン

目次リストの CSS をリセットしてデザインを整える

リストは <ul> で出力されており、プラグインの CSS を止めるとテーマの CSS が適用されます。テーマによって指定は異なりますが、いったんリセットしておきましょう。

.toc_list,
.toc_list * {
	list-style: none;
	margin: 0;
	padding: 0;
}

そのうえで、改めて指定していきます。

.toc_list {
	margin-top: 1em;
}

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

.toc_list > li > a {
	border-bottom: 2px solid #ccc; /* H2 下線 */
	font-size: 1.1em; /* H2 フォントサイズ */
}

.toc_list ul {
	padding: 1em 0 0 1em;
}

.toc_list li {
	margin-bottom: 0.4em;
	padding-bottom: 0.4em;
}

H2 のみ強調して、H3 や H4 は字下げしてみました。下線のデザインも変えています。

これで完成ですね。

Table of Contents Plus タイトルを調整したデザイン
Table of Contents Plus 完成形

配色や余白のバランスなど、デザインにマッチするようお好みで変えてみてください。

Naifix の目次デザイン

当サイトでも Table of Contents Plus を使っています。

Naifixの目次イメージ

CSS は以下のとおり。タイトルを枠線上に移動させているのがサンプルと大きく違う点です。こちらをそのまま使っていただいてもかまいません(※ テーマによって微調整が必要かと思います)。

#toc_container {
	background: #fff;
	border: 1px solid #ccc;
	box-sizing: border-box;
	display: block !important;
	line-height: 1.4;
	margin: 6em auto 0;
	padding: 2em 2em 1em;
	position: relative;
}

.toc_title {
	background-color: #fff;
	padding: 0 1em;
	position: absolute;
	text-align: center;
	top: -.8em;
}

.toc_list a {
	border: none;
	color: #444;
	display: block;
	text-decoration: none;
}

.toc_list,
.toc_list * {
	list-style: none;
	margin: 0;
	max-width: 100%;
	padding: 0;
}

.toc_list ul {
	font-size: .9em;
	padding: 1em 0 0 1em;
}

.toc_list li {
	background: none;
	margin-bottom: 0.8em;
	padding-bottom: 0.2em;
	padding-left: 0;
}

.toc_list > li > a {
	border-bottom: 1px solid #ccc;
	padding: 0 .5em .5em;
}

「position:relative」と「position:absolute」の使い方はこちら

まとめ

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

記事を書くだけではなく、こうしてカスタマイズするのもブログの楽しみ方の一つ。CSS を覚えるとほかにもいろいろ応用できるので、少しずつ勉強してみてください。

Author

Naifix 編集部
Web コンサルティング業務を中心に、サイト制作・コンテンツ販売・メディア運営代行業務を行っております。当サイト(Naifix)では、おもにブログ初心者向けのノウハウを無料で配信しています。