2015/11/1830 Shares

WordPressに目次を自動挿入するTable of Contents Plusの使い方

見やすいウェブデザイン

当ブログでは導入文のあとに「目次」を表示しています。これは記事を投稿するさいに手動でつけているのではなく、自動生成されたものです。

WordPress なら Table of Contents Plus というプラグインを使って最初にちょっと設定しておけば、あとはすべて処理してくれます。また、SEO 効果も少なからず期待できるのでぜひ導入してみましょう

具体的な設定方法と注意点を解説していきます。

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

新規追加画面から「Table of Contents Plus」で検索してインストール、または公式サイトよりダウンロードしてアップしてください。

プラグイン画面、または管理画面の設定欄に「TOC+」という項目が追加されるので、ここから設定していきます。

設定方法解説

簡単な日本語訳と、当ブログでの設定をご紹介します。

設定をこまめに変えても問題ないので、どこをいじるとどうなるのか確認しながら作業を行っても良いでしょう。

追記

最新版(ver.4.2.2)より日本語訳が追加され、設定項目がわかりやすくなりました。

Table of Contents Plus 日本語

2015/09/05

設定前半部分

Table of Contents 設定1

Position 目次の表示位置
Show when 見出しの数が何個以上なら目次を表示するか
Auto ins… 見出しを表示するページの種類
Heading text 目次のタイトルや表示・非表示のコメント
Show hierarchy 階層表示
Number 目次にナンバリング
scroll effect 見出しまでのジャンプに動きをつけるかどうか

「Before first heading」は、「最初の見出しの前」という意味です。このプラグインを使っている方はたいていこのデフォルト設定にしていますね。

もし、最初の見出し付近に Google AdSense などの広告を表示するようにしているなら、お互いの余白がきちんととれているか、広告と目次がかぶっていないかをチェックしたほうが良いでしょう。

目次をつけたくない記事はショートコードで対応できます。使い方はこちらをご参考に。

WordPressの任意の記事にだけ目次をつける方法

設定後半部分

Table of Contents 設定2

width 目次の幅
Wrapping 左寄せ or 右寄せの指定
Font size 目次の文字サイズ
Presentation デザイン設定

後半部分は見た目の設定なので、ブログの雰囲気とマッチするように調整してみてください。

【必読】目次を表示する際の注意点

このプラグインは h(見出し)タグから自動生成しています。

もし h タグを使わずに記事を書いていたら、目次は表示されません。WordPress テーマのほとんどは記事タイトルに <h1> を当てているため、<h2> ~ <h6> を使って見出しをつけていきましょう。

プラグイン設定画面下に詳細設定(Advanced)が隠れており、ここから見出しに使う h タグを指定できます。

Table of Contents Plus 詳細設定画面

大見出し(h2)だけ拾って生成してほしいときなども調整できますね。

h1タグは何度でも使える

ちょっと前までは、<h1> タグは同一ページ内で 1 回しか使えない、というのが一般的な解釈でした。現在は HTML5 が主流となっていますが、アウトラインを意識すれば何度でも使うことができます。

ただし、すべての見出しを <h1> に置き換えるとか、キーワードをすべて <h1> で囲ってもまるで意味がありません。基本的に、明らかに内容が変わる箇所でのみ h1 タグ を使うことが推奨されています。

通常はひとつの記事でひとつのテーマを扱っていると思うので、特にこだわりがなければタイトルに <h1>、記事内の見出しに <h2> ~ <h6> タグを使うのが無難です。多用すると検索エンジンからスパム扱いされる可能性もあるので、注意してください。

見出しに適当な言葉を使うとマイナス要因

<h2> に「それから」とか <h3> に「つまり」など、見出しタグをただの節目とみなして使っているかもしれません。

もしそのような状態で Table of Contents Plus を使うと、見出し部分に「それから」や「つまり」が並んでしまいます。その目次を見ても、訪問してくれた方はそこに何が書かれているのかわかりませんよね。

目次(=見出し)は、アクセスしてくれた方がある程度内容を推測でき、それが自分にとって必要かどうかを判断してもらう要素です。

記事タイトルについで重要な部分ですので、適当につけるのではなくちょっと意識して考えてみましょう。それは、自然と SEO にもつながります。

検索結果に見出しが表示されることがある

このプラグインは見出しをもとに目次を自動生成する、という話ですが、具体的には各見出しに固有の id をつけた <span> が挿入されます。

たとえば、WEBサイト全体を丸ごとキャプチャできるブラウザアドオン4選 という記事。

目次はこのように表示されています。

自動挿入される目次例

ソースをのぞいてみると、一番最初の見出しはこのようになっていました。

目次部分はこの id にリンクがはられています。

目次をクリックすれば各項目にジャンプできるのですが、このリンクが検索結果に直接表示される場合があります。

検索結果に各見出しへのリンクが表示されている例

検索結果に各見出しへのリンクが表示されている例

ユーザーが本当に必要としている情報にすぐアクセスできるよう配慮されているわけですね。

必ず検索結果に出るわけではなく、条件も定かではありません。しかし、クリック率が多少でも上がる見込みがあります。

毎回手動でやるとなると大変ですが、すべて自動で行ってくれるのでやってみて損はないと思います。もしブログに合わないのであれば、プラグインを外せば良いだけですし。

まとめ

以上、各記事に見出しが簡単につけられる WordPress プラグイン Table of Contents Plus のご紹介でした。

  • インストールして初期設定するだけで OK
  • 検索結果に見出しへのリンクが表示される場合がある

ぜひ一度お試しください。

CSSでおしゃれなデザインにしてみましょう

Table of Contents Plusデザインカスタマイズ方法

それでは、また。