Table of Contents Plusの使い方と目次の作成方法について

Table of Contents Plusを使うと記事ページに目次を簡単に作成することができます。

の見出しタグごとに自動で作成されるので、いちいち目次を作成することなく見やすい目次にすることができます。

ユーザビリティの向上にもつながり、目次に見出しの内部リンクが貼られるのでSEOの観点からも良い効果が得られます。

目次の見出しをクリックすることにより、見出しタイトルの場所まで移動することもできます。

今回はTable of Contents Plusの使い方と目次の作成方法について解説していきます。

Table of Contents Plusをインストールし有効化

まずは、Table of Contents Plusのプラグインをインストールし、有効化しましょう。

プラグインのインストールと有効化の手順がわからない方は、以下をご覧ください。

こちら⇒WordPressプラグインのインストール方法と有効化の手順を解説

目次の作成方法とTable of Contents Plusの使い方

Table of Contents Plusを作成したら、ワードプレス管理画面内のダッシュボードから『設定』を選択し、『ＴＯＣ＋』をクリックします。



上から順番に説明していきます。



「表示する場所」の項目

あはデフォルトのまま『最初の見出しの前(デフォルト)』のままでよいでしょう。

「表示条件」の項目は『２つ以上見出しがあるとき』としておきます。

上記の設定であれば、見出しを2つ以上作成した時に目次が表示されるようになります。

「次の投稿タイプの時に表示」の項目は、『post』と『page』にチェックを入れておきます。

postが投稿ページ、pageが固定ページに目次が作成されます。

「見出しテキスト」の項目は、『目次の上に見出しを表示』にチェックを入れておきます。

見出しテキストは事由に文言が変更ますのでご自身で考えましょう。

ここでは一般的に『目次』と入力しています。

「表示非表示切り替えボタンのテキスト」の項目にチェックを入れることで、目次を開いたり閉じたりできるようになります。

初期状態で閉じたままにしておきたいという方は、下にある「初期状態非表示」にチェックを入れます。

「階層表示」と「番号振り」の項目はチェックを入れておきましょう。

階層が表示され、見出しに番号が振り分けられることにより、より見やすい目次が作成できます。

「スムーススクロール」の項目は、スクロールしないのチェックを外しておきます。

スムースクロールとは、目次の見出しリンクをクリックしたときに、なめらかな画面移動で見出しタイトルまで飛ばす効果です。

「デザイン」の各項目については、デフォルトのままでよいですが大まかなデザインを6つの中から選ぶことができます。



「上級者向け」の以下画面の設定については、『見出しレベル』の項目でｈ１とｈ２以外にチェックを入れておきます。

基本的に見出しはｈ３以下から構成していき、ｈ２以上はタイトルレベルの見出しになるため、このような設定になります。

設定が完了したら、『更新』ボタンを入力し設定が完了です。

目次を中央に寄せる方法

Table of Contents Plusは、中央寄せの選択ができないので自分でCSSを設定する必要があります。

ダッシュボードから『外観』を選択し『テーマの編集』をクリック。

テンプレートの『design.css』の最下部に以下のコードを貼りつけます。

====================
/* 目次の中央表示 */
#toc_container {
margin-left: auto;
margin-right: auto;
}
====================

すると、目次が中央に表示されています。

以上で、Table of Contents Plusを使った目次作成が完了です。