『Table of Contents Plus』は、目次を記事にさせるWordPress専用のプラグインです。このプラグインを導入すれば、見出しの数や種類に応じて、目次が自動生成されます。Affinger5などのテーマは目次の作成機能がないので必須と言えるプラグインになります。
もくじ
【使い方１】Table of Contents Plus をインストールする
まずは『Table of Contents Plus』をインストールしましょう。
①WordPressダッシュボードのプラグイン『新規追加』をクリックする。
②「 TOC 」と入力し、Table of Contents Plus の「 今すぐインストール 」をクリックする。
⇨この後『有効化』をクリックすればOK
Table of Contents Plus のインストールは終了です！
【使い方２】Table of Contents Plus の設定をする（15項目）
WordPressダッシュボードの設定より、『TOC+』の『設定』をクリックする。
基本設定の入力
⇨ピンクで囲った部分を設定して下さい。
① 位置
『最初の見出しの前』『最初の見出しの前』『上』『下』の4つが選択できます。
⇨『最初の見出しの前』が一般的なのでそのままで大丈夫です。
② 表示条件
見出しの数がこの設定数以上でないと、目次が自動生成されません。
初期設定は『4』
⇨『3』ぐらいがちょうどいいです。
③ 以下のコンテンツタイプを自動挿入
『post』: 投稿に自動挿入されます。
『page』: 固定ページに自動挿入されます。
⇨『post』のみにチェックする。
④ 見出しテキスト
初期設定 『containts』
⇨わかりにくいので、漢字で『目次』か平仮名で『もくじ』を入力する。
⑤ 階層表示
タグの種類ごとに段落をずらすかどうか。
⇨階層表示にしておいた方が見やすいのでチェックを入れる。ここは好みです。
⑥ 番号振り
タグの種類ごとに番号振りをします。
⇨番号がない方が見やすいのでチェックを外す。ここは好みです。
外観の入力
⇨外観入力は、特にいじる必要はないです。
⑦ 横幅
『固定幅 （200px 〜 400px）』『相対 （25% 〜 100% ）』が選択できます。
⇨自動（デフォルト）のままがオススメ。
⑧ 回り込み
『なし』『左』『右』が選択できます。
⇨『左』や『右』を選択するとデザインが崩れることがあります。デフォルトの『なし』でOKです。
⑨ 文字サイズ
『pt』『%』『em』が選択できます。
⇨初期設定では95%になっていますが、90%ぐらいでもいいかもしれません。
⑩ プレゼンテーション
『グレー』『水色』『白』『黒』『透明』『カスタム』が選択できます。
⇨自分のサイトにあったものを選んで下さい。好みの背景色やボーダー色がなければ、カスタムで設定することも可能です。
上級者向けの入力
⇨上級者向きの設定は、『見出しレベル』のみ設定しておいた方がいいです。
⑪ 小文字
アンカーに必ず小文字を使用
HTMLの a href タグ（アンカーリンク）であるアンカーに、小文字を使用するように設定する。
⇨チェックなしで構いません。
⑫ ハイフン
アンカーでアンダースコアではなくハイフンを使用
⇨チェックなしで構いません。
⑬ ホームページを含める
ホームページ上の条件を満たす項目の目次を表示
⇨チェックなしで構いません。
⑭ CSSファイルを除外
プラグインの CSSスタイルを読み込まない場合はチェックを入れて下さい。選択した場合、上の外観設定も無視されます。
⇨チェックなしで構いません。
⑮ テーマの見出し記号を保持
お使いのテーマで番号なしリスト要素に背景が含まれている場合、対応させるにはチェックを入れてください。
⇨チェックなしで構いません。
⑯ 見出しレベル
以下の見出しレベルを含める。チェックを外すと非表示になります。
□ heading 1 - h1
✅heading 2 - h2
✅heading 3 - h3
□ heading 4 - h4
□ heading 5 - h5
□ heading 6 - h6
⇨奥の階層まで表示するとかえって目次が見にくくなり本末転倒なので、h1とh4~6は外しておく。
最後に一番下の『設定を更新』を押して下さい。
Table of Contents Plus の設定は終了です！
【使い方３】Table of Contents Plus で目次を手動で入れたい時
記事編集画面で目次を入れたい所で
を入力して下さい。これだけです！
ポイント
このコードで目次を入れた場合は、設定位置での目次は表示されません。
便利ですね！
【まとめ】Table of Contents Plus での目次の作り方
- 「Table of Contents Plus」をインストールする。
- 1度設定すれば自動作成してくれる。
- 簡単なコード
で手動で入れることもできる。
というわけで今回は以上です。
