2018.12.06 更新 | WordPress

WordPressで目次を作るTable of Contents Plusの使い方

WordPress目次作成
シェア ツイート  B! はてブ Google+ Pocket

今回はWordpressのブログで、
目次を表示する方法について解説していきます。

目次は記事の最初に見出しがリスト化され、
クリックしたらその項目までジャンプできる便利な機能です。

あなたのブログに初めて訪れた読者にとって、
目次があるのとないのでは、読みやすさが全く違います。

最初に目次を見て、
何を書いてあるか全体像を把握してから読み始めると
スッと頭に入ってきやすくなるのです。

是非、目次をとり入れて読者にとって
読みやすいブログを作っていきましょう。

1.Wordpressで目次が作れる「Table of Contents Plus」

目次の作成には
Table of Contents Plus
というプラグインを使用します。

シンプルなデザインで、
どんなブログテーマにもマッチするので、
このプラグインを入れておけば、まず間違いないです。

それでは早速インストールして準備に取り掛かりましょう。

2.インストール手順

まずはワードプレスの管理メニューから「プラグイン」>「新規追加」と進みます。

tableスクショ

右上の検索メニューに

「Table of Contents Plus」

と入力し、検索結果が表示されたら

「今すぐインストール」

をクリックしてしばらく待ちます。

tableスクショ2

インストールが終わったら、
先ほどの画面のまま

「有効化」

という表示に切り替わるので
有効化ボタンをクリックします。

ここまででプラグインのインストールは完了です。

tableスクショ3

2.「Table of Contents Plus」の設定

インストールが完了したら、続いて設定に移ります。

最初にきちんと設定しておかないと、
ブログに目次が反映されない
ので、
インストールしたらすぐに設定をしておくようにしましょう。

管理メニューから

「設定」>「TOC+」

を選択します。

tableスクショ4

設定画面が表示されたら、
目次が表示される「位置・表示条件」などを決めていきます。

初めての方にはオススメの設定条件があるので、
以下の画像と照らし合わせながら
上から順に同じように設定してもらえるとわかりやすいです。

tableスクショ5

「上級者向け」という項目は、
ここではいじらなくてもいいので、
ここまでできたら

「設定を更新」

をクリックします。

tableスクショ6

これで初期設定は完了です。

3.目次を正しく表示させるための記事の書き方

このプラグインから目次をキレイに表示するためには
見出し用のHTMLタグを階層的に使用する必要があります。

ノート

記事の中に見出し用のHTMLタグが無ければ、
記事の目次は作成されません。

記事を書くときは、見出しに対して
H2タグ、H3タグ、H4タグ、、、という風に
階層的に執筆していくことをルールづけてください。

3-1.見出しにおけるHTML記述ルール

一般的にワードプレスで使用される
見出しのHTMLタグのルールは以下の通りです。

  • H1タグ・・・記事タイトル(基本的に本文中では使用しない)
  • H2タグ・・・大見出し
  • H3タグ・・・小見出し1
  • H4タグ・・・小見出し2
  • H5タグ・・・小見出し3
  • H6タグ・・・小見出し4

このように、
見出しを階層的に決めて記事を作成していくと
目次がキレイに整って表示されます。

記事を書くときは、
読者にとって読みやすい階層構造を意識して
書くことを心がけましょう。

そのためにはいきなり文章を書き始めるのではなく、
あらかじめ構成や全体像を決めてから記事作成に入る
ことを
オススメしています。

まとめ

「Table of Contents Plus」を
今回解説した手順で使用すると
簡単に目次を作ることができます。

今後は、記事を書くときに見出しを階層順に
H2、H3、H4・・・と使用するだけで
自動的に目次が生成されるようになります。

目次は、読者が記事を読む前に
一番最初に全体像を把握する場所。

それだけに、その目次を見ただけでその記事の全体像がわかるように、
あらかじめ構成をよく考えて、階層順でわかりやすい
見出しの付け方を考えて記事を書いていきましょう。

それでは、今回はここまでです。

ありがとうございました。

最新の記事情報が取得できます

Twitter

「フォローする」ボタンを押すと、最新情報がすぐにツイート上で確認できるようになります。

コメントはこちらから

新田祐士プロフィール画像

監修・新田祐士

「ネットを使った教育産業化」をテーマにして、様々な業界と関わるようになる。インターネットを使って、様々な業界が「教育産業」となって、その業界に関わった人たちが成長するような仕組みを作り、今の教育機関に変わる新たな教育システムを作ることを目指している。