WordPressの目次を記事内に作成する方法【プラグイン】

こんにちは、chiakiです。

ビジネス書や漫画の冒頭に「目次」が存在するように、ブログ記事にもコンテンツの中身が一目でわかるように「目次」を設置した方がユーザビリティが向上し読者に優しい記事の構築が可能になります。

しかし、残念ながらWordpressのデフォルトでは、記事に目次が設置はされていませんよね。

なので、ブログ記事にサクっと目次を設置することができる「Table of Contents Plus」の設定方法や使い方について解説していきます。

Table of Contents Plusのインストール

Table of Contents Plusは、WordPressのプラグインなのでインストールし有効化をしましょう。プラグインのインストール方法について不明の場合、以下(↓)の記事をご参考にしてください。

 

Table of Contents Plusのインストールや有効化を終えた後、記事を確認しにいくと最初の見出し上に以下(↓)のような目次が表示されるようになっています。

基本的にはこれでOKなのですが、ここから自分流にカスタマイズすることも可能なので、それら方法も解説していきますね!

Table of Contents Plusの設定方法

まず、WordPressのメニューから「設定→TOC+」へと進みます。

 

すると、Table of Contents Plusのカスタムページが表示されます。ここでは「基本設定」のみの編集となります。

また外観枠は基本的に変更しないので、以下(↓)の画像の赤枠のみ解説しますね!

  1. 位置
  2. 表示条件
  3. 以下のコンテンツを自動挿入
  4. 見出しテキスト
  5. 階層表示
  6. 番号振り
  7. スムーズ・スクロール効果を有効化

 

もし「CHIAKIの設定で使いたい」って場合は、画像のままのカスタムをして下さいね!

【1】位置

最初の「位置」は4つ選択することができますね。

  • 最初の見出しの前 (デフォルト)
  • 最初の見出しの後

まぁでも、ほとんどの場合はデフォルトの位置に表示させると思うので、そのままで大丈夫かと。

【2】表示条件

表示条件はそのままの意味で、「いくつ以上の見出しで目次を表示させるようにするか?」ということですね。

僕は2つ以上に設定をしていますが、たまに使いにくいこともあるので、3つ以上が無難かなー、と思います。

【3】以下のコンテンツを自動挿入

ちょっと上記の画像では、他プラグインの枠が表示されていますが、恐らくデフォルトの状態(じゃなくても基本的に使うのは)以下の2つです。

  • post (投稿)
  • page (固定ページ)

僕は固定ページは、あまり使わないので投稿のみのチェックにしています。お好きな設定にして下さい!

【4】見出しテキスト

見出しテキストは、見出しに表示されるタイトルのことをいいます。なので好きな文字を記入すれば大丈夫ですが、「目次」や「Contents」などが無難ですね!

僕は日本語の方がわかりやすいと思っているので、そちらを採用していますが、コチラもお好きな方を選択してください!

【5】階層表示

階層表示は文字取り階層表示です。チェックを入れた時とそうでない時のタイプをご用意しましたので、以下(↓)の画像よりご確認下さい。

これらは読者に「見出し2」や「見出し3」を一目でわかってもらえるためにも、階層表示をさせることがおすすめです。

【6】番号振り

番号振りは、以下(↓)の画像のように番号を振られているかどうかです。

コチラはお好きな方で構わないかと思いますが、僕の場合は数字を表示させています。

【7】スムーズ・スクロール効果を有効化

スムーズ・スクロール機能は、目次から見出しへとジャンプする時にパッと移動するか、スクロールしながら移動するか、の違いです。

個人的にはパッと移動した方がユーザビリティが向上する。と思っているので、チェックは入れておりません。

以上のことで、Table of Contents Plusの基本設定は完了です。

Table of Contents Plusの上級者向け設定

Table of Contents Plusの上級者向け設定では、全部ではないですが「ここは覚えておくと便利ですよ!」って部分を2つだけ紹介します!

正直その2つ以外は使わないので気にしなくても大丈夫です。ではいきましょー!

 

Table of Contents Plusの基本設定と設定の更新の間に『上級者向け(hide)』をクリックすると、ドロップダウン式に新たなカスタムメニューが表示されます。

 

そして、以下(↓)の画像の赤枠部分のカスタムをします。

  • 見出しレベル
  • 除外する見出し

 

では、これらも解説していきます。

【1】見出しレベル

見出しレベルでは、目次に表示される見出しの設定をします。例えば、以下(↓)のように「h2」のみチェックを入れたとします。

 

すると、記事に表示されている目次では「h2」に設定した見出しのみ表示されているようになります。

これらにスッキリして良いかもしれませんね!(個人的にはh3も表示させた方が好きだけど。)

ガチャガチャするのが嫌いでスッキリさせたい方は、h2のみの表示も試してみてください。

【2】除外する見出し

除外する見出しでは、目次に表示させたくないもの(Jetpackの関連、Related Postsの関連記事、メルマガ)を削除する方法です。

例として、この当記事の見出しである「目次を自在に扱えるタグ」を削除したとします。

 

そして、記事の目次を確認していくと。

「目次を自在に扱えるタグ」の見出しが削除されていますね!この機能を上手に活用し表示させたくない見出しを非表示にしていきましょう。

目次を自在に扱えるタグ

では最後の項目ですね。先ほど例に出した「目次を自在に扱えるタグ」についてです。

Table of Contents Plusの位置設定では「最初の見出しの前 (デフォルト)」「最初の見出しの後」「上」「下」の4つを選択できましたが、タグを使用し他の位置にも表示させたり、非表示にさせたりすることができます。

【1】好きな場所に目次を表示させる方法

目次を好きな場所に表示させるには、表示させたいところに以下(↓)のタグを記入します。

 

このタグはあまり使うことありません(てかない)が、タグを使用することによって以下(↓)のような位置にも表示させることができます。

さすがに、ここまでお笑いのような位置に表示させることはないかと思いますが、「タグを使用すると好きなところに表示させれる」ということと頭の片隅に置いていて下さい!

【2】目次を消したい記事のみ消す方法

コチラは定期的に使用することがあるかもしれません。(表示設定の時に3つ以上に設定している場合は使うことはないかもですね。)

1つだけの記事の目次を非表示させる場合は、以下(↓)のタグを使用します。記入する位置は記事内であればどこでも構いません!

 

記入後は以下(↓)のようになります。

文字数が少ない記事の場合などは目次が不要になる場合も少なくないので、非表示タグを使用するといいですね!

まとめ

以上のことで、Table of Contents Plusに関するカスタマイズは完了です。Table of Contents Plus以外にもユーザビリティが向上するプラグインは沢山ありますので、有能なプラグインを導入し、読者に愛されるブログを目指して下さいねー!

 

いかがでしたでしょうか?ご参考になれば幸いです。

関連記事

  1. WordPressのプラグインをインストールと有効化させる方法

  2. category order and taxonomy terms o…

  3. Adsense Managerが見つからない?検索できない時の対策

  4. TinyMCE Advancedの設定方法と使い方|作業効率化プラグイ…

  5. WordPress初心者におすすめ!無料で使えるプラグイン12選

  6. Adsense Managerの使い方|表示されない時の対策は?

  7. AkismetのAPIキー設定方法|スパム対策用プラグイン

  8. Google XML Sitemapsの設定方法について解説

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。