目次を自動で作成　Table of Contents Plusの設定と使い方

ブログ記事の目次を見出しタグから自動作成してくれるWordPressプラグイン「Table of Contents Plus」をご紹介します。

ブログ記事に目次を設定しておくと、記事の内容や全体の構成を一目で把握することができます。これはユーザーの利便性を高めるだけでなく、SEOやSXOにも効果的です。

Table of Contents Plus を使えば、初心者でも簡単に目次を設定できます。さらに、CSSをカスタマイズすれば、ユーザビリティに配慮したデザインで目次を作成することができます。

プラグインなしで新しい記事や過去記事に目次を設定するのは大変ですが、Table of Contents Plusを使えばすべて自動で見出しと目次を設定してくれるので便利ですよ。

Table of Contents Plus にはサイトマップの作成機能や、目次デザインの簡単なカスタマイズ機能もあり、上級者向けの詳細設定も可能です。

自分でCSSをカスタマイズして、目次のデザインを変更する方法も解説しています。

見出しや目次の重要性

ブログ記事に一目で内容がわかる目次を設定することや、わかりやすい見出しを作ることは、ユーザーの利便性を考える上でとても重要です。

先日、ENJILOGさんがブログにこんな記事をアップされてました。ENJIさんは今後のGoogleに向けた記事の作り方として「SXO」と「目次」に注目しています。

[書きました] SEOにもSXOにも効く「良い記事」の作り方と既存記事の簡単なチェック方法 https://t.co/5061NShWyq @ENJILOG

— ENJI (@ENJILOG) December 27, 2017

検索経由で訪れたユーザーがまず知りたいことは「この記事に探している情報はあるか？」です。検索結果を見て訪れたユーザーは、目当ての情報がなければすぐ離脱します。

そう考えると、見やすさ、わかりやすさに配慮した目次はとても重要だということがわかります。

Googleの検索アルゴリズムは常に進化しています。最近のSEOは機械学習の導入によって、ユーザーの利便性まで考慮されるようになってきました。

これからの検索エンジン対策は、今まで重視されてきた「SEO (Search Engine Optimization) 検索エンジン最適化」だけでなく、ユーザーの利便性を向上させる「SXO (Search Experience Optimization) 検索体験の最適化」まで考える必要があります。

Table of Contents Plus のインストールと設定

WordPressの目次作成用プラグインはいくつかありますが、日本語が使えるメジャーなプラグインといえば、Table of Contents Plus で決まりです。

設定もそれほど難しくないので、初心者でも簡単に目次を設定することができます。

プラグインのインストール

では、さっそくインストールしてみましょう。WordPressのダッシュボードから「プラグイン」→「新規追加 」に進み、「Table of Contents Plus」と検索してください。

あとはインストールして有効化すれば準備は完了です。

目次の設定方法

続いてTable of Contents Plusの設定です。まずは必要最低限の項目だけ設定して、目次を表示させてみましょう。設定は「インストール済みプラグイン」の「設定」か、ダッシュボードの「設定」→「TOC+」から行います。

最初は以下の設定にしておけばよいでしょう。一番下の「設定を更新」をクリックすると、最初の見出しの前に目次が表示されるようになります。

このような目次が最初の見出し(H2タグ)の上に追加されます。

各項目の設定は以下の通りです。

位置：　目次の位置を設定します。通常は「最初の見出しの前（デフォルト）」でよいでしょう。記事の一番最初や見出し後に目次を表示することもできます。

表示条件：　記事内の見出しの数によりますが、今回は3つ以上にしました。適切な数はブログによって違うので、適宜変更してください。

以下のコンテンツタイプを自動挿入：　「post」にチェックを入れると、記事内に目次が表示されます。固定ページにも表示させる場合は「page」にもチェックを入れて下さい。

見出しテキスト：　「目次の上にタイトルを表示」にチェックを入れて、入力欄に好みのタイトルを入れます。ここでは「記事の目次」にしました。

ユーザーによる目次の表示・非表示を切り替えを許可
目次が長すぎたり、切り替え表示にする場合は「ユーザーによる目次の表示・非表示を切り替えを許可」にチェックを入れてください。表示・非表示のテキストも変更できます。

目次を非表示にする場合は「最初は目次を非表示」にチェックを入れます。

その他の設定項目も説明します。

階層表示
目次を見出しごとに階層表示してくれます。

番号振り
見出しの頭に番号を振ります。

スムーズ・スクロール効果を有効化
リンクをクリックすると、ページ内推移がスクロールになります。

デザインの変更とカスタマイズ

Table of Contents Plusは、設定からデザインの選択や簡単なカスタマイズが可能です。

横幅
目次の横幅を指定します。通常は「自動（デフォルト）」でOKですが、固定幅をpx単位で指定したり、パーセンテージで相対幅を決めることもできます。

回り込み
目次の位置を指定します。デフォルトでは中央ですが、左右に変更も可能です。

文字サイズ
目次の文字サイズをパーセンテージで指定します。

プレゼンテーション
目次のデザインを選択します。カスタムを選ぶと、背景やタイトル等のカラーをそれぞれ変更することができます。

下の「上級者向け」設定は、目次に表示する見出しレベルを変更したり、除外する見出しを設定する場合などに使用します。通常は変更する必要はありません。

CSSをカスタマイズしてデザイン変更

Table of Contents Plusを使って、とりあえず目次を作成しました。これでも十分使えますが、デフォルトのままだとちょっと見にくいですよね。

Table of Contents Plusは、CSSをカスタマイズすることで目次のデザインを変更することができます。せっかくなので、SXOにも配慮した見やすい目次を作成しましょう。

デザイン変更後の目次

CSSをカスタマイズして、目次のデザインを以下のように変更します。左側のデフォルトよりはるかに見やすく、わかりやすいデザインになったと思います。

使用する見出しタグは＜H2＞と＜H3＞のみです。これ以上増やすとゴチャついて見にくくなるので絞り込みました。

カスタマイズ後の目次デザインですが、まず背景色を入れて「記事の目次」を強調し、目次内の見出しに適度な余白を作って見やすくしました。

大見出し(H2)は文字を太くして目立つように、中見出し(H3)はナンバリングを止めて、新たにFont Awesomeのwebフォントでアイコンを作り、下部に点線を入れました。

記事になじむように、リンクの色も黒に変更しています。

目次カスタマイズ用CSS

カスタマイズ用CSSは以下の通りです。ブログテーマのstyle.cssにそのまま貼り付けてください。ブラウザキャッシュ等でCSSがすぐ反映されない場合は、「Ctrl + F5」でリロードしてください。

CSSのコードに説明を入れているので、デザインの変更やカスタマイズの参考にしてください。

CSSが反映されない場合は各自で修正してください。CSSの検証は、該当ページ上で右クリック→「検証(chrome)」か「要素を検証(firefox)」で行えます。

/* Table of content plus 子テーマ用のスタイル */
#toc_container {
	margin: 20px auto; /* 目次全体の中寄せと上下余白 */
}

#toc_container p.toc_title{
	padding:5px !important; /* タイトル背景幅を太く */
}

#toc_container ul li{
	padding:10px; /* 見出しの余白 */
}

span.toc_number.toc_depth_2 {
	display: none; /* 中見出しのナンバリング停止 */
}

#toc_container ul ul li:before{
        content: "\f04b"; /* 中見出しのwebアイコン */
	font-family: FontAwesome;
}

#toc_container .toc_title {
	background: #ccc; /* 「記事の目次」背景色 */
}
	
	#toc_container ul a {
	color:#000; /* 見出し部分のリンク色 */
	border-bottom: 1px dotted #ccc; /* 中見出しの下部点線 */
}

#toc_container .toc_list > li > a {
	font-weight:bold; /* 大見出しの太字 */
	border-bottom:none; /* 大見出しの点線を消す */
}

サイトマップの作成機能

Table of Contents Plusには、簡単なサイトマップ作成機能があります。

使い方ですが、サイトマップ用の固定ページを作成して、ショートコード［sitemap］を貼り付けるだけで、自動的にすべてのページとカテゴリのサイトマップが作成されます。

設定は特に必要ありません。デフォルトのままでOKです。あと、編集時はテキストモードにしてください。ビジュアルモードでコードを貼り付けると、サイトマップは作成されません。

Table of Contents Plus　目次が表示されない時

Table of Contents Plusで目次が表示されない時は、まず以下の基本設定をチェックしてください。

位置
表示位置を下にすると、目次を見落とします。デフォルトに戻してみてください。

表示条件
見出しの数が表示条件以下の場合は、目次が表示されません。表示条件を最低数に変更してチェックしてください。

以下のコンテンツタイプを自動挿入
「post」にチェックがないと、投稿で目次が表示されません。ブログの場合は記事のほとんどが投稿(post)なので注意してください。

これでも表示されない場合は、上級者向けの設定もチェックしましょう。

見出しレベル
チェックが外れている見出しは非表示になります。

除外する見出し
ここに入力した文字が見出しに含まれていると、目次に表示されません。

パス限定
ここにパスを入力すると、特定のページ以外では目次が表示されません。

見出しや目次を意識してわかりやすい記事に

目次を意識しながらブログ記事を作成すると内容がわかりやすくなるし、SXOの向上にも大いに役立ちます。

いわしブログでは記事内でほとんど中見出しの＜H3＞タグを使わないのですが、今回は大見出しの＜H2＞だけでなく、中見出しも意識しながら記事を作成しました。

これからのSEOは、小手先のテクニックだけでなく、ユーザーの利便性を向上させるSXOにも配慮する必要があります。

今まではブログに目次がなかったので、見出しは適当でしたが、Table of Contents Plusの導入を機に過去記事を見直して、わかりやすい見出しと目次に変更していきます。