Table of Contents Plusで記事の目次を作成する【WordPressプラグイン】

記事を読みやすくするために目次を付けるやり方を知りたい。

記事に目次があると、サイトに訪問したユーザーが目的の情報までいち早く辿り着くことができます。しかし、アンカーリンク(ページ内リンク)やデザインなど、1から目次を作成するのは少々面倒な作業ですよね。

WordPressでは、見出し(h1~h6)で目次を自動生成してくれる便利なプラグインを活用しましょう。

今回は、WordPressプラグイン「Table of Contents Plus」を導入し、記事に目次を設置するやり方をご紹介していきます。

ぶろぐ先生
この記事の目次もTable of Contents Plusで表示させているよ!

Table of Contents Plusを導入する

まずは、WordPress管理画面からTable of Contents Plusをインストールしましょう。

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

ダッシュボードの左のメニューにある
プラグイン」→「新規追加」を選択します。

 

プラグインを追加する画面が表示されたら、
キーワードに「Table of Contents Plus」を入力して検索しましょう。

今すぐインストール」をクリックしてしばらく待つと、インストールは完了です。
そのままプラグインを有効化しましょう。

Table of Contents Plusの設定方法

有効化したら、実際にTable of Contents Plusの設定を行っていきます。

ダッシュボードの左のメニューにある「設定」→「TOC+」を選択します。

基本設定

基本設定の設定項目を上から順にご説明します。

設定項目

  1. 位置
    目次を表示する位置を設定します。
    「最初の見出しの前(デフォルト)」が良いでしょう。
  2. 表示条件
    見出しタグ(<h1>~<h6>)が記事にいくつ以上あると目次を表示するのかを設定します。
    2~3つ以上を設定しておくと良いでしょう。
  3. 以下のコンテンツタイプを自動挿入
    目次を表示させるページの種類を設定します。
    個別記事(投稿)だと「post」、固定ページだと「page」になります。固定ページにプライバシーポリシーやお問い合わせフォームなどを設定している場合は不要ですので「page」のチェックを外すことをオススメします。
  4. 見出しテキスト
    目次のタイトルを設定できます。
    一般的には「目次」が使用されていますが、「Contents」でも「飛ばして読みたい方はこちら」でもお好きにして頂いて構いません。また、「最初は目次を非表示」にチェックを入れると、畳まれた目次がデフォルト表示になります。
  5. 階層表示
    見出しレベルで階層表示を行うかの設定です。
    <h2>と<h3>など、異なるレベルの見出しを使用している場合、階層表示になります。目次を見やすくするためには、階層表示が欠かせないのでチェックを入れましょう。
  6. 番号振り
    目次の先頭に自動で番号を割り当てるかの設定です。
    番号が振ってあった方が分かりやすいのでチェックを入れておきましょう。「元々見出しに番号を記載してるよ!」って方は、数字が並んでしまうのでチェックを外した方が良いでしょう。
  7. スムーズ・スクロール効果を有効化
    目次をクリックした際に、見出しまで「ジャンプ」or「スクロール」どちらで移動するのかを設定します。
    自分好みの移動の仕方で問題ありません。

 

その下の設定項目「外観」では目次の見た目に関する設定を行います。
色々試しながら、自分好みに設定しましょう。

外観設定の下にある「上級者向け」を表示させてください。

 

上級者向け設定で確認する項目は「見出しレベル」のみです。

目次に含める見出しレベルにチェックを入れます。
あまり重要ではない見出しを含めると、目次が多くなり、かえって分かりにくくなるため、
「h2とh3」又は「h2のみ」にチェックを入れることをオススメします。

 

以上で設定は完了です。
左下の「設定を更新」を忘れずにクリックしましょう。

目次を中央に表示

デフォルトの状態では、目次が左寄せで表示されます。
目次を中央に表示したい!」って方は以下のコードをCSSに記入してください。

#toc_container {
margin-left: auto;
margin-right: auto;
}

補足
WordPressテーマにより、あらかじめTable of Contents Plusのデザインがカスタマイズされている場合もあります。

まとめ

Table of Contents Plusで記事に目次を付けるやり方をご紹介しました。

これから投稿する記事だけではなく、過去の記事にも目次が反映されるので大変便利なプラグインです。CSSの知識がある方は、より自分好みのデザインにカスタマイズしてあげると他のサイトと差を付けることができるでしょう。

是非、この記事を参考に目次を作成し、ユーザビリティの向上を意識したサイト作りを行ってくださいね。