【WordPress】目次(見出し)の自動生成 -Table of Contents Plus-

記事をせっせと書いている時にふと思いました。
あれ、他のサイトでよくある「目次」がない。
そっか。目次作らないといけないんだ。
毎回作るの大変だな。手間だし作らなくていいかな。

そんな時 Table of Contents Plus(TOC+) の存在を知る。
え、目次を自動で作ってくれるらしい。

親切！！

WordPressのプラグインをインストールすればいいだけの模様。

お世話になりますー。

では、さっそくブログ記事における目次(見出し)と「Table of Contents Plus(TOC+)」のインストール方法についてご紹介します。

目次(見出し)

目次(見出し)とは

書物の内容を書かれている順に並べて記したものです。

情報量の多いコンテンツに対して

を向上させることが出来ます。

目次(見出し)設置の反対派の存在

• 目次のスクロール時間がもったいない。
• 目次で読んだ気になる
• プラグイン導入による自動的に出力されており必要性が考慮されていない

上記のように目次反対派の方もいらっしゃいます。

目次(見出し)の必要性

目次(見出し)は必要だと考えています。
みなさんは、本屋さんで本を探している時、また本を購入して読み始める時に目次をはじめに見ませんか。

目次を見て「本がどの場所にあるか」「本の内容に自分が求めている情報が含まれているか」をおおよそ事前に知りたいと思うものです。

WEBサイトにも同様のことが言えます。
私は、すぐに必要な情報を入手したい場合は「目次」を斜め読みして必要なリンクに飛んで記事を読むことが多いです。

また、記事のボリュームにもよりますが、記事の途中で最初のほうに読んだ内容を改めて読み返したいときに一度「TOP」に飛んでから目次をクリックして読み返すこともよくあります。
わざわざスクロールして探すと手間がかかります。

最近はブログ記事などの閲覧もスマホからが大半を占めますのでスマホからの操作時も目次があると便利です。

SEO効果

クローラーは見出しタグ(h1～h6)からページ構造を読み取ることは広く知られていますが、目次についてはSEO効果の根拠はありません。

ただ、目次があることによりどのような内容が書かれているか分かるようになっていれば、ユーザーにとっては文章構造が視覚的に分かりやすく読みやすくなります。
サイトに訪問されたユーザーにとって内容が伝わりやすいコンテンツになるように目次(見出し)をつけることをお勧めします。

Table of Contents Plus(TOC+)

インストール・有効化

WordPressのプラグインから「Table of Contents Plus」と検索。
錨(いかり)のようなアイコンがヒットするので「今すぐインストール」
そして「有効化」してください。

設定方法

「Table of Contents Plus」のインストール・有効化をするとWordPressのダッシュボードに左のメニューの設定に「TOC＋」が追加されています。

基本設定(一般設定)

私が設定している基本設定です。

■位置
見出しを置く位置の設定が出来ます。

■表示条件
目次を表示する条件の設定が出来ます。
見出しの数を「2～10」まで設定可能

■コンテンツタイプ
目次を自動挿入するコンテンツタイプの設定が出来ます。
投稿 (post) 、固定ページ (page)です。

■見出しテキスト
目次についている「タイトル」「表示・非表示」の文字が設定出来ます。
自分が使いやすい文字で問題ありません。

■階層表示
目次の表示を階層で表示します。親階層の下に1マスずらした状態で子階層が表示されます。

■番号振り
目次に番号を振る設定をします。番号を振った方が見やすいです。

■スムーズスクロール
目次の項目をクリックした時に移動の仕方です。
「ジャンプするように飛ぶ」か「なめらかにスクロールして飛ぶ」かを選択出来ます。
好みが分かれる設定です。

■横幅
目次の幅を設定出来ます。
75％に設定しています。

基本設定(上級者向け)

■見出しレベル
h1～h6の内、目次にする見出しタグを選択できます。
h4～h6まで目次に表示させると目次が長くなりすぎるのでチェックをはずしています。

■横幅
デフォルトの「30px」だと見出しにちょうど合わず、見出しの下ぐらいにスムーズ・スクロールされます。
「50px」だとちょうど目的の場所にリンクされます。

見出しを中央に表示(CSS編集)

CSSを編集して目次を「左寄せ」から「中央寄せ」に変更することが出来ます。
※作業は必ずバックアップを取り、自己責任にて行って下さい。

1. CSSを開く。「外観」から「テーマの編集」を選択
2. #toc_container {margin:auto;} 　と記述する(コピペ)
3. 「ファイルの更新」をクリック

左寄せ(デフォルト）

中央寄せ(CSS記述後）

二階層以降の番号を非表示(CSS編集)

目次の番号は、デフォルトでは「h1～h6」のタグごとに番号が振られます。そのため、階層が深くなると目次が徐々に見づらくなります。

回避策として CSS を編集し、二階層以降の番号を振らずに表示させないようにすることが出来ます。
※作業は必ずバックアップを取り、自己責任にて行って下さい。

1. CSSを開く。「外観」から「テーマの編集」を選択
2. .toc_depth_2, .toc_depth_3, .toc_depth_4, .toc_depth_5 {display:none;}　と記述する(コピペ)
3. 「ファイルの更新」をクリック

CSS追加後のコード

目次の「中央寄せ」と「二階層以降の番号を非表示」をCSSに追記すると上記のような感じです。

最後に

サイトを訪れたユーザーはいち早く目的の情報を見つけようとしています。アクセスしたサイトにどのような情報が書かれているかが体系的に目次で表現されていると理解しやすいです。
分かりやすく要約された目次の作成も読み手を引き付ける技術の一つですね。