WordPressの記事に目次ついてるのよく見かけますね?このTable of Contents Plusプラグインで簡単にできます

ブログを書こうと思ったとき、他のブロガーさんの記事をたくさん見たのですが、どのサイトにも記事に目次がついていました。

ブログあるあるですが、例えば「ランニング 膝 痛い」みたいに検索して出てきたページで、ランニングすることのメリットとか説明されてもどうでもいいです。

長々とどうでもいいことが出てきた後で最後にちょろっと「膝が痛くなるのはフォームの問題です」のように原因が書かれてて、その改善方法が載ってたとします。

目次があることで、どうでもいい説明などをすっとばせて見たい結論だけを見ることが出来ますね(笑)

 

WordPressの「Table of Contents Plus」というプラグインを使うことでHタグ(見出しタグ)を読み取り自動で目次を生成してくれます。

目次を出力するためには、Hタグをしっかり使う必要があります。

そのためSEOも有利になります。

「Table of Contents Plus」のインストール

WordPress管理画面のサイドメニューより「プラグイン」→「新規追加」を選択します。

 

右上の検索フォームに「Table of Contents Plus」と入力し、検索結果の赤枠のプラグインをインストール、有効化します。

これでインストールは完了です。

続いて設定を行います。

「Table of Contents Plus」の設定

WordPress管理画面のサイドメニューより、「設定」→「TOC+」をクリックします。

ここからは僕がこうした方がいいなと思う設定です。

位置は、デフォルトの「最初の見出しの前」が良いです。

表示条件は、デフォルトでは4つになっていますが、僕は記事を書いていて見出しが3つの記事もあったので3つにしました。

コンテンツタイプですが、「post」はサイドメニューで言う「投稿」です。

ここにチェックを入れないとブログ記事に目次が出てきません。

ちなみに「page」は固定ページのことです。このチェックは外してもいいかもしれません。

は目次のタイトルのことです。デフォルトは「Contents」となっていたので、「目次」にしました。

その下の「ユーザーによる目次の表示・非表示を切り替えを許可」は目次を読者さんが非表示に出来る設定です。

僕は切り替えできないようにチェックを外しましたが、どちらでもいいかと思います。

「アンカーリンクにジャンプではなくスクロールする」にチェックを入れると、目次のリンクをクリックした際にパッと一瞬で飛ばないでぬるっと滑らかにスクロールしてくれます。

滑らかにスクロールしたほうがかっこいいと思ったのでチェックしました(笑)

⑥次に「上級者向け」の設定とやらを行います。こちらをクリックすると設定項目が表示されます。

なんか色々ありますが、見出しレベルについてだけ設定を変更したいと思います。

H1タグは基本的にブログのタイトルになりますので、目次には不要かと思います。

本の目次を開いたときに、一番最初に本のタイトルが入ってたら変ですよね?

H5とH6についてはあまり使う機会も無いですし、もし使ってもそれを全て目次に表示すると目次がでっかくなり逆に見難くなると思うので外しました。

 

これで記事を開くとこのように目次が自動で出来上がっています。

Hタグについて補足

この「Table of Contents Plus」という目次を生成するプラグインは、Hタグというものを読み込み自動で目次を生成してくれます。

Hタグとは、HTMLというプログラミング言語で使われるタグのことで、見出しを設定できます。

H1~H6 まであり、見出しの階層レベルを指定します。

必ずH1で始まり、階層が深くなるにつれH2、H3と順に使っていきます。

注意して欲しいのは、階層のレベルであって、上から順番にH1、H2、H3・・・と使っていくわけではありません。

これはよくある間違いなので気をつけてください。

 

本の目次を見ると分かりやすいです。

H1タグは、本のタイトルです。ブログの場合、H1はSEOにとってかなり重要なので記事のタイトルにします。

1章、2章のような一番大きなくくりがH2タグになり、全体の構成をまとめます。

H3はH2を更に細かく分解して説明したい場合に使います。

H4はH3を更に細かく分解して・・・

というようなイメージです。

まとめ

目次があると、ぱっと見でページ全体が何を伝えたいのかが分かります。

目次を意識することで記事全体の構成もまとまりますし、このプラグインは入れておいた方がいいでしょう。

少しでも僕の知識がみなさんに伝わるように僕も目次を意識して記事を作成していきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA