【Diver】Table of Contents Plus(TOC+)で簡単に目次作成!
スポンサーリンク

 

aki
TOC+でワードプレス記事に目次を作成してみよう!
所要時間10分で完成すると思います。

1.はじめに

ワードプレスブログで最も多く使用されているんじゃないかと思う「 Table of Contents Plus(TOC+) 」で今回は目次を作成する方法を説明していきたいと思います。

このブログでも使用しているワードプレステーマ「Diver」もTOC+を推奨しているのですが、一度インストールして簡単な設定さえしておけば、後は記事を書けば自動的に目次を作成してくれるので非常に助かっています。

目次は見たいところへすぐにたどり着けるので、読者にとっても便利だと思いますし、ボリュームのある記事を量産するのであれば是非入れておきたいプラグインじゃないかと思います。

2.プラグインのインストール

手順:プラグイン新規追加検索窓に「Table of Contents Plus」と入力今すぐインストール

インストールが完了したら青く変わった「有効化」ボタンをクリックしてください。

~プラグインのインストールが初めての方はこちらの記事を参考にしてください~

 

3.Table of Contents Plusの設定

メニュー「設定」から「TOC+」をクリックしてください。

 

設定画面が現れますがとりあえず「基本設定」だけ設定すればOKです。

  1. 「位置」はデフォルトのままでOKです。
  2. 「表示条件」は見出しがいくつ以上ある時に目次を表示するか設定します。
  3. 「以下のコンテンツタイプを自動挿入」はどのページに自動で挿入するか。

※チェックを付けるとしたら( post=投稿記事 page=固定ページ )です。

 

続いて順番に設定をしていきましょう。

  1. 「見出しテキスト」は目次のタイトルを表示させるかどうかチェックを入れて入力欄に好きなタイトルを入力してください。
  2. 「ユーザーによる目次の表示・非表示を切り替えを許可」は閲覧している読者が目次を表示・非表示の切り替えができるかどうかチェックを入れて選択します。テキストは自由に入力することも出来ます。
  3. 「最初は目次を非表示」は最初から目次を閉じておきたい場合はチェックを入れます。
  4. 「階層表示」はh2の見出しより小さいh3などの見出しがツリー表示されていきます。
  5. 「番号振り」はチェックを入れると見出しの先頭に番号が振られます。
  6. 「スムーズ・スクロール効果を有効化」にチェックを入れるとジャンプしたい見出しまでスクロールされるようになります。

 

 

最後に「外観」の設定をしていきます。

  1. 「横幅」は「自動(デフォルト)」だと自動で最大横幅サイズになります。
  2. 「回り込み」は「なし(デフォルト)」のままでOKです。
  3. 「文字サイズ」は95%のままでOKです。
  4. 「プレゼンテーション」は好きなデザインを選択すればOKです。
  5. 「上級者向け(表示)」は特にいじる必要はないです。

最後に「設定を更新」をクリックすれば「TOC+」の設定が全て完了です。

4.Diverのオプション設定

メニュー「Diverオプション」から「投稿設定」をクリックしてください。

 

下にスクロールすると「TOC+」を設定する箇所があります。

  1. 「TOC+プラグインにDiverスタイルを適用する」にチェックを入れます。
  2. 「TOC+基本カラー」で目次を囲っている枠の色を選択します。
  3. 「TOC+文字色」で目次内の文字色を選択します。

 

実際にDiverオプションで設定した画面は下の画像のように表示されます。

5.まとめ

目次は綺麗に表示されましたか?見出しの数が設定した数よりも少ないと目次が表示されませんので注意してくださいね。

「TOC+」は読者用のサイトマップも作成できるのですが「PS Auto Sitemap」の方がおすすめです。

 

~サイトマップ作成に関してはこちらの記事を参考にしてください~

 

aki
おつかれさまでした~!!

 

スポンサーリンク
このサイトで使用しているテーマ

アフィリエイト最適化WordPressテーマ!

美しいデザインが目を引くWordpressテーマですが、内部構造がしっかり作り込まれているのが特徴です。SEO対策は当たり前で、アフィリエイトの収益をいかに増やせるかということを考えて作られています。デザインはユーザーのことを考えて作られていて、カスタマイズの自由さでも美しさが損なわれることがないように作成可能です。

Twitterでフォローしよう

おすすめの記事