記事中の見出しを使って、自動で目次に生成してくれるWordPressのプラグイン「Table Of Contents Plus」

通常のデザインではちょっとごちゃごちゃして見づらかったので、CSSを使って見やすいデザインに変更した事例をご紹介します。

ほとんどカスタマイズしていない状態のデザイン例

「Table Of Contents Plus」をインストールして、ほぼデフォルトだと上の画像のようなデザインが一般的です。

なお、「Table Of Contents Plus」自体の設定も前提として記載しておきます。

「Table Of Contents Plus」の設定内容

WordPressの管理画面、左サイドバーにある「設定」から「TOC+」をクリックし、以下のように設定。

  • 表示条件:2つ以上見出しがあるとき
  • 見出しテキスト:
    • 「この記事の目次」
  • 表示非表示切り替えボタンのテキスト:
    • 表示テキスト:「▼」
    • 非表示テキスト:「×」
  • 番号振り:チェックを入れない
  • 上級者向け
    • 見出しレベル:「heading 2 – h2」と「heading 3 – h3」のみチェックを入れる

「上級者向け」の見出しレベルですが、当サイトや事例のサイトでは記事タイトルが「h1」なので見出しになることが絶対に無いため、「Table Of Contents Plus」では「h2」以降が見出しとなります。

また、私の場合では「h4」を使うことも結構あるのですが、「Table Of Contents Plus」が生成する目次がごちゃごちゃになるので、「h2」と「h3」しか表示させないようにしています。

カスタマイズ後の完成イメージ

だいぶ見やすくなりましたよね?

ポイントとしては、

  • 「h2」のみスタイルシートで番号を付け、色を変えて太字にすることで「h3」と強弱を付けた
  • 「h3」は「h2」よりも薄くして、Webアイコンフォント「Font Awesome」を使ってリストマークを追加
  • 「この記事の目次」にも「Font Awesome」のアイコンを追加

というところですね。

「Font Awesome」については以下の記事をご参考ください。

関連記事賢威7でWebアイコンフォント「Font Awesome」を実装する方法

適用したスタイルシートの内容

当サイトやご紹介したサイトでは『賢威』の子テーマで運用しています。そのため、子テーマディレクトリの「base.css」に以下を記述します。

/* TOC 目次 */
#toc_container{
	margin-top:30px;
	border: 1px dotted #DCD7B1;
	font-size: 0.9em;
	padding-right: 16px;
	padding-left: 16px;
	background-color: #FEFDED;
}
#toc_container .toc_title{
	color: #3A3A3A;
}
#toc_container .toc_title:before{
	content: "\f0f6";
	font-family: FontAwesome;
	padding-right: 6px;
	font-weight: normal;
	color: #999;
}
#toc_container .toc_toggle a{
	color: #069;
}
#toc_container ul{
	counter-reset:number;
  list-style:none;
}
#toc_container ul li{
	line-height: 1.25em;
	margin-bottom: 0.5em;
	margin-left:16px;
}
#toc_container ul li:before{
  counter-increment: number;
  content: counter(number);
	font-weight: bold;
	color: #069;
	padding-right:10px;
	margin-left:-20px;
}
#toc_container ul li a{
	font-weight: bold;
	color: #069;
}
#toc_container ul ul{
	margin-top: 0.5em;
}
#toc_container ul ul li{
	line-height: 1.25em;
	margin-bottom: 0.5em;
	margin-left:-2px;
}
#toc_container ul ul li:before{
	content: "\f0da";
	font-family: FontAwesome;
	padding-right: 6px;
	margin-left:0px;
	color: #CCC;
	font-weight: normal;
	margin-left:-11px;
}
#toc_container ul ul li a{
	color: #3D3D3D;
	font-weight: normal;
	padding-right:6px;
}

枠の色などは適宜、サイトに合うよう変更してください。

なお、「Table Of Contents Plus」の独自CSSを使わない設定もできますが、今回はその辺の変更はせずに、スタイルシートを上書きしています。