Wordpressで記事を書いているときに『目次』が必要になることがあると思います。
そんな時はタイトルタグがあれば自動で目次を生成してくれるプラグイン『Table of Contents Plus』が便利です。
目次
『Table of Contents Plus』を使ってみよう
それではまず『Table of Contents Plus』をダウンロードしてみましょう。Table of Contents Plus
管理画面内ではサイドナビの『プラグイン>新規追加』で『Table of Contents Plus』を検索すると表示されます。
そこで『今すぐインストール』をクリックしてください。
![](https://blog.8bit.co.jp/wp-content/uploads/2021/12/122302_img01.jpg)
インストールが完了したら『有効化』をクリックしましょう。
![](https://blog.8bit.co.jp/wp-content/uploads/2021/12/122302_img02.jpg)
一応これで一部ページでは表示されるようになりました。
ただこれだけだとデフォルトの状態でうまく表示されなかったり、サイトに合った装飾もされてないないので設定をしていきます。
『Table of Contents Plus』の設定をしてみよう
![](https://blog.8bit.co.jp/wp-content/uploads/2021/12/122302_img08.jpg)
サイドナビの『設定』のなかに『TOC+(Table of Contents Plusの略称)』の項目がありますので、こちらから設定画面を開きます。
![](https://blog.8bit.co.jp/wp-content/uploads/2021/12/122302_img04.jpg)
それではそれぞれ設定していきましょう。
位置
![](https://blog.8bit.co.jp/wp-content/uploads/2021/12/122302_img05.jpg)
- 最初の見出しの前
- 最初の見出しの後
- 上
- 下
表示条件
![](https://blog.8bit.co.jp/wp-content/uploads/2021/12/122302_img06.jpg)
現在だと4つタイトルタグがなければ表示されないので、必要な場合は数字を減らすなどしてください。
以下のコンテンツタイプを自動挿入
![](https://blog.8bit.co.jp/wp-content/uploads/2021/12/122302_img07.jpg)
デフォルトでは『page』に入っている状態なのでここは必要な箇所にのみチェックをいれましょう。
見出しテキスト
![](https://blog.8bit.co.jp/wp-content/uploads/2021/12/122302_img09.jpg)
日本のサイトでしたら『目次』『非表示/表示』にしておくと無難ですね。
階層表示
![](https://blog.8bit.co.jp/wp-content/uploads/2021/12/122302_img10.jpg)
もし階層にしたくなければチェックを外してください。
番号振り
![](https://blog.8bit.co.jp/wp-content/uploads/2021/12/122302_img11.jpg)
もし表示したくなければチェックを外してください。
スムーズ・スクロール効果を有効化
![](https://blog.8bit.co.jp/wp-content/uploads/2021/12/122302_img12.jpg)
サイトによってはデフォルトでスムーズ・スクロールを入れている場合もあると思うので、競合に気を付けてください。
横幅
![](https://blog.8bit.co.jp/wp-content/uploads/2021/12/122302_img13.jpg)
レスポンシブサイトなどを考えると自動調整が無難な気もします。
回り込み
![](https://blog.8bit.co.jp/wp-content/uploads/2021/12/122302_img14.jpg)
文字サイズ
![](https://blog.8bit.co.jp/wp-content/uploads/2021/12/122302_img15.jpg)
『%』『pt』『em』でそれぞれ指定できます。
プレゼンテーション
![](https://blog.8bit.co.jp/wp-content/uploads/2021/12/122302_img16.jpg)
『カスタム』ではcssで独自に設定ができます。知識がある方にはお勧めです。
これで目次の装飾・設定ができました!
![](https://blog.8bit.co.jp/wp-content/uploads/2021/12/122302_img18.jpg)
ちなみに上級者設定もあります。
![](https://blog.8bit.co.jp/wp-content/uploads/2021/12/122302_img17.jpg)
こちらを設定するとh5タグなど何回も使いそうなタグについて除外してくれます。
基本的には設定画面をいじれば目次ができるとても便利なプラグインです。
ぜひ試してみてください!