【WordPress】目次プラグイン、Table of Contents Plusの使い方

シュウ

今回は【WordPress】目次プラグイン、Table of Contents Plusの使い方
の解説になります！

こんな方に読んでほしい

WordPressを学び始めた方へ
ブログで使える簡単設定で目次を生成してくれるプラグインを探してる方へ
今回はWordPressの「Table of Contents Plus プラグイン」について解説しております。

[記事の内容]

Table of Contents Plusとは

「Table of Contents Plus」　は、WordPressのプラグインになります。
Table of Contents Plusとは、記事の目次を生成してくれるプラグインになります。
設定によっては、見出しが3つ以上ある場合は見出しを表示させ、見出しが3つ以下の場合は見出しを非表示にする設定などもできます。

このプラグインを紹介する理由は3つあります。

POINT

日本語対応しており、設定がとても簡単です。
CSSでお好みのデザインにカスタマイズ可能です。
記事を書く人にとってはSEOなどのメリットもたくさんあります。

イメージ図は以下のようになります。
私のブログはCSSでカスタマイズしております。

目次に関するCSSは最後に載せております。
Table of Contents Plusの公式サイトは以下になります。

プラグインのインストール方法は上記の「プラグイン導入方法」からご確認ください。
次に使用についての解説です。

Table of Contents Plusの使い方

●1:プラグインをインストール: プラグインをインストール後、「有効化」を選択

●2:設定画面に移動: 2：管理画面の「設定 > 目次」をクリッします。

基本設定について

●1:位置: 目次の位置を指定します。
「最初の見出しの前 (デフォルト)」に設定しておきましょう。

●2:表示条件: 見出しの数で目次を表示させます。
例：3と指定した場合は、見出し3以上で表示、3以下で非表示になります。
1〜10までの指定が可能です。

●3:以下のコンテンツタイプを自動挿入: 記事を書く、「post(投稿)」にチェックを入れます。

●4:見出しテキスト: 目次の上に表示するラベル(タイトル)名を変更できます。
例：コンテンツ、目次、もくじなど

●5:スムーズ・スクロール効果を有効化: 目次をクリックすると、見出しの箇所まで自動でスクロールしてくれます。

●6:上級者向け: 上級者向けは必ず設定をおこないましょう。
上記の設定では、見出し(h1〜h6)まで全ての見出しが適用範囲になリます。

●その他: プレゼンテーション　：　目次のデザインで選択できます。

上級者向けについて

●7:小文字: アンカーに必ず小文字を使用します、基本は小文字で指定するので必ずチェックを入れましょう。
例：a href="#table-of-contents-plus-1"

●8:ハイフン

アンカーでアンダースコアではなくハイフンを使用します。

例：アンダースコアの場合
#table_of_contents_plus_1

例：ハイフンの場合
#table-of-contents_plus-1
基本的にアンカーはハイフンを使用します。

●9:CSS ファイルを除外: デフォルトで良い場合はチェックを外しておきましょう。
カスタマイズしたい場合のみ、チェックを入れましょう。

●10:見出しレベル: 初期設定では、h1〜h6まで全てチェックが入っているので、h2、h3のみに指定しておきましょう。

CSSについて

上記の、「9:CSS ファイルを除外」にチェックを入れた場合は、Table of Contents PlusのCSSは読み込まれすずに、
ご自身で記述したCSSが適用されます。
シンプルなデザインは以下のようになります。

#toc_container{
	background-color: #f9f9f9;
	padding: 40px 60px;
	margin-bottom: 40px;
}

#toc_container p.toc_title {
	display: flex;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
}

#toc_container p.toc_title:after {
	border-top: 1px solid #75abc6;
	content: "";
	flex-grow: 1;
	margin-left: 1rem;
}

#toc_container ul li{
	list-style: decimal;
	margin:0 0 0 12px;
	box-sizing: border-box;
	font-size: 14px;
}

#toc_container ul li a{
	display: block;
	color: #333;
	text-decoration: none;
	border-bottom: 1px dotted #ccc;
	padding: 10px 5px;
}

#toc_container ul li ul li{list-style: disc;}
#toc_container ul li ul li:first-of-type{margin-top: 8px;}