wordpressに自動の目次機能を付けるプラグラインでおすすめなのが「Table of Contents Plus」ことTOC+です。このサイトに使用しているものになります。

文章にしっかりと段落を付けることで「H1～H6」までの段落を自動的にリンク付きの目次として表示することができ、カスタマイズ性も良いためとても使いやすいプラグラインです。

今回はそんなワードプレスにおすすめのTable of Contents Plusの使い方について

についてお届けします。

■ワードプレスで目次機能を付ける方法とは

wordplessに自動の目次機能を付ける方法はこちらです。

では掘り下げていきましょう。

・インストールはWordpress画面から行う

ワードプレスに目次機能を付ける方法は、使用しているワードプレスの画面からTable of Contents Plusをダウンロードすることです。

ワードプレスの画面左側のメニューバーに「プラグライン」があります。その「新規追加」からTable of Contents Plusをダウンロードします。手順としては、

1. プラグラインを選択
2. 新規追加を選択
3. プラグラインの検索欄から「Table of Contents Plus」を検索
4. Table of Contents Plusの枠「今すぐインストール」を選択
5. ダウンロード後は「有効化」を選択

以上で完了です。

・カスタマイズは日本語表記でわかりやすい

ワードプレスに目次機能を付ける方法は、カスタマイズを行う際は日本語で行えるため好みに合わせて調整することです。

Table of Contents Plusのカスタマイズ画面は日本語表記になっているため、様々な調整を容易に行うことが可能です。カスタマイズ画面への移動手順は、

1. 先ほど同様メニューバーの「プラグライン」を選択
2. 「インストール済みプラグライン」を選択
3. Table of Contents Plusの「設定」を選択
4. カスタマイズ後は「設定を更新」を選択

以上で完了です。デフォルトでは「以下のコンテンツタイプを自動挿入」が「page」を選択されていますが、各ブログページに目次を付ける場合は「post」を選択しましょう。

・中央寄せはCSSに追加する

ワードプレスに目次機能を付ける方法は、Table of Contents Plusの目次を中央寄せする際はCSSにコードの追加を行うことです。

フレームサイズや色の変更は設定画面から変更することが可能ですが、Table of Contents Plusのフレームを記事内で中央寄せするためにはCSSの追加が必要となります。その手順は、

1. ワードプレス画面左のメニューバーから「外観」を選択
2. 「CSS編集」を選択
3. 入力枠内に下記に記載のコードを入力
4. 編集枠右上の「保存して公開」を選択

以上で完了です。追加する記載コードはこちらですので、コピーペーストを行いましょう。

#toc_container { margin-left: auto; margin-right: auto; }

■まとめ

ワードプレスに目次機能を付ける方法を簡単にまとめるとこのような感じになります。

中央寄せがスムーズに行えずにモヤモヤしている方もいると思います。上記方法で解決できると思いますのでぜひチャレンジしてみてください。