【TOC+】「Table of Contents Plus」の設定方法と使い方

【TOC+】「Table of Contents Plus」の設定方法と使い方

Table of Contents Plusで目次を作りたいんですけど、どうやったらいいの?設定方法と使い方を教えて!

 

このような疑問にお答えします。

 

この記事がおすすめの人

  • 【TOC+】について知りたい人
  • 【TOC+】の導入方法を知りたい人
  • 【TOC+】の設定方法を知りたい人
  • 【TOC+】の使い方を知りたい人

 

✔本記事の執筆者

かずきの武器庫運営者

Twitter:かずき(@k03mind)

 

目次を表示したいなら「Table of Contents Plus」がおすすめです。

というのも、最初の設定さえ終わらせれば、あとは何もしなくていいから。

 

kazuki
簡単に目次を表示できるプラグインです!

 

しかし、「Table of Contents Plus」の設定方法や使い方がわからない人が多いのが現状。

ということで今回は、「Table of Contents Plus」の設定方法と使い方について詳しく解説します。

 

kazuki
本記事を読めば、誰でも簡単に「Table of Contents Plus」で目次を作ることができますよ!

 

この記事でわかること

  • 【TOC+】の導入方法がわかる
  • 【TOC+】の設定・使い方がわかる

 

【TOC+】Table of Contents Plusとは?

【TOC+】Table of Contents Plusとは?

目次を導入できるプラグイン

 

「Table of Contents Plus」略して【TOC+】は、目次を導入できるプラグインです。

導入するだけで簡単に目次を生成できるプラグインであり、たくさんのブロガーが導入しています。

 

kazuki
僕も導入しています!

 

読者にとって目次は非常に大事であり、というのも、すぐに情報が欲しいから。

目次がないと自分が探している内容がどこにあるのかわからないので、必ず設置してあげましょう。

 

それでは、Table of Contents Plusの導入手順を解説しますね。

 

【TOC+】Table of Contents Plusの導入手順

【TOC+】Table of Contents Plusの導入手順

 

導入手順としては下記の3STEP☟

 

  1. WordPressへインストール
  2. プラグインを有効化
  3. 有効化後の初期設定

 

一つずつ解説しますね。

 

1.WordPressへインストール

 

まずはWordPress管理画面から「プラグイン」→「新規追加」をクリックし、画面右側の「キーワード」に「Table of Contents Plus」と入力☟

 

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

 

すると、お目当てのプラグインが表示されます。

これで手順1が完了。

 

2.プラグインを有効化

 

「Table of Contents Plus」が表示されれば「今すぐインストール」→「有効化」をクリックしてください☟

 

プラグインの有効化

 

 

「有効」となれば有効化できています。(※画像は有効化済みです

 

これで「Table of Contents Plus」の導入が完了しました。

続いては設定方法と使い方について初心者の方でもわかりやすいように詳しく解説します。

 

【TOC+】Table of Contents Plusの設定方法と使い方

【TOC+】Table of Contents Plusの設定方法と使い方

 

設定方法と使い方については下記3項目に分けて解説します☟

 

  • 基本設定
  • 上級者向け設定
  • サイトマップの設定

 

まず、WordPress管理画面から「設定」→「TOC+」をクリックしてください☟

 

プラグインの設定

 

ここで各種設定を行います。

 

基本設定

 

基本設定では下記の11項目を設定できます☟

 

基本設定

  1. 位置
  2. 表示条件
  3. コンテンツタイプを自動挿入
  4. 見出しテキスト
  5. 階層表示
  6. 番号振り
  7. スムーズ・スクロール効果を有効化
  8. 横幅
  9. 回り込み
  10. 文字サイズ
  11. プレゼンテーション

 

それぞれどのような項目なのか解説していきます。

 

1.位置

 

位置の設定では、目次を表示させる箇所を設定することができます。

 

1.位置

 

表示できる位置は下記の4つ☟

 

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

 

ここは「最初の見出しの前(デフォルト)」でOKです。

 

2.表示条件

 

ここでは目次を表示できる条件を設定することができます。

 

2.表示条件

 

条件は下記の9つから選べます☟

 

  • 2つ以上の見出しがあるとき
  • 3つ以上の見出しがあるとき
  • 4つ以上の見出しがあるとき
  • 5つ以上の見出しがあるとき
  • 6つ以上の見出しがあるとき
  • 7つ以上の見出しがあるとき
  • 8つ以上の見出しがあるとき
  • 9つ以上の見出しがあるとき
  • 10つ以上の見出しがあるとき

 

ここはお好みでOK。

ちなみに僕は「3つ以上の見出しがあるとき」にチェックを入れています。

 

3.コンテンツタイプを自動挿入

 

ここでは目次を自動挿入するコンテンツタイプを選びます。

 

3.コンテンツタイプを自動挿入

 

自動挿入できる箇所は下記7つ☟

 

  • post
  • page
  • custom_css
  • customize_changeset
  • oembed_cache
  • user_request
  • wp_block

 

この中でチェックを入れるのは「post」だけでOK。これで投稿記事ページに目次を出力することができます。

 

4.見出しテキスト

 

ここでは見出しのテキスト表示を編集することができます。

 

4.見出しテキスト

 

項目は下記3つ☟

 

  • 目次の上にタイトルを表示:表示するタイトルを編集できます
  • ユーザーによる目次の表示・非表示を切り替えを許可:目次の切り替えをユーザーが選択できるようにします
  • 最初は目次を非表示:チェックを入れれば最初は目次を非表示にできます

 

当サイトと同じ設定でもOK。さっきの画像を参考にしてください。

 

5.階層表示

 

ここでは目次に階層表示を付けるか決めることができます☟

 

5.階層表示

 

ここはチェックを入れておきましょう。

 

6.番号振り

 

ここでは目次に番号を振るか決めることができます。

 

6.番号振り

 

見出しが多くなると番号振りが汚く見えるので、チェックを外しておきましょう。

 

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

 

ここでは目次をクリックした際に、どのようにその見出しまで飛ぶかを決めることができます。

 

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

 

個人的にはスクロールして見出しまで飛んだほうが見栄えがいいと思っているので、「アンカーリンクにジャンプではなくスクロールする」にチェックを入れています。

 

8.横幅

 

ここでは目次の横幅を設定することができます☟

 

8.横幅

 

✔固定幅

  • 200px
  • 225px
  • 250px
  • 275px
  • 300px
  • 325px
  • 350px
  • 375px
  • 400px

✔相対

  • 自動(自動デフォルト)
  • 25%
  • 33%
  • 50%
  • 66%
  • 75%
  • 100%

✔その他

  • ユーザー指定

 

お好みで設定してもらってOK。ちなみに当サイトの目次はデフォルトのままです。

 

9.回り込み

 

目次の周りに文字を回り込ませることができます。

 

9.回り込み

 

基本的には目次の下に記事本文があるはずですが、この設定をすることで目次の横に本文を挿入したりできます。

 

回り込ませる設定は次の3つ☟

 

  • なし(デフォルト)

 

こちらは見栄えが悪くなりますし、装飾が崩れる可能性があるので「なし(デフォルト)」にしておきましょう。

 

10.文字サイズ

 

ここでは目次の文字サイズを変更することができます。

 

10.文字サイズ

 

選べる文字サイズは下記の3つから☟

 

  • pt
  • %
  • em

 

ちなみに当サイトでは90%に設定しています。ここはお好みでOKですよ。

 

11.プレゼンテーション

 

ここでは目次のデザインを設定することができます。

 

11.プレゼンテーション

 

カスタマイズで色も変更可能ですが、ここはお好みでOK。

ちなみに当サイトのデザインは「グレー (デフォルト)」です。

 

 

以上、Table of Contents Plusの基本設定でした。

 

続いては上級者向けの設定について。

上級者向けとは言え、実は初心者も設定しておくべき項目があるので、必ず設定しておきましょう。

 

上級者向け設定

 

上級者向けの設定では下記の10項目を設定することができます☟

 

上級者向け設定

  1. 小文字
  2. ハイフン
  3. ホームページを含める
  4. CSS ファイルを除外
  5. テーマの見出し記号を保持
  6. 見出しレベル
  7. 除外する見出し
  8. スムーズ・スクロール上部余白
  9. パス限定
  10. アンカーのデフォルト接頭辞

 

上級者向けとは言え、「見出しレベル」、「除外する見出し」は初心者向けの設定です。

恐らく、後々設定することになるので、今のうちに済ませておきましょう。

 

それでは一つずつ解説しますね。

 

1.小文字

 

チェックを入れると、目次のリンクをすべて小文字にしてくれます。

 

 

1.小文字

 

ここはチェックを入れなくても問題ありませんよ。

 

2.ハイフン

 

チェックを入れると、目次に使われるアンダースコアがハイフンに変更されます。

 

2.ハイフン

 

これもチェックを入れなくてOK。

 

3.ホームページを含める

 

チェックを入れると、ホームページ上の条件を満たす項目の目次を表示することができます。

 

3.ホームページを含める

 

これもチェックを入れなくてOK。

 

4.CSS ファイルを除外

 

プラグイン独自のCSSファイルを除外してくれます。

 

4.CSS ファイルを除外

 

ここもチェックを入れなくてOK。(※チェックを入れると外観設定が無視されます

 

5.テーマの見出し記号を保持

 

ここはWordPressテーマによって変わりますが、番号なしリスト要素に背景が含まれている場合、対応しない場合があります。

 

5.テーマの見出し記号を保持

 

基本的には無視でOK。僕はチェックを入れていません。

 

6.見出しレベル

 

ここでは目次を表示させる見出しを設定することができます。

 

設定できる項目は次の6つ☟

 

6.見出しレベル

  • heading 1 - h1
  • heading 2 - h2
  • heading 3 - h3
  • heading 4 - h4
  • heading 5 - h5
  • heading 6 - h6

 

お好みでチェックを入れてOKですが、おすすめは「h3」まで。あまり目次を長く表示しても見栄えが悪いです。

見栄えのいい目次を作るためにも、見出しレベルは「h3」にしておきましょう。

 

7.除外する見出し

 

ここでは目次で表示させたくない見出しを設定することができます。

 

使い方としては次の通り☟

 

7.除外する見出し

  • ブログ* :「ブログ」から始まる見出しを無視する
  • *ブログ* :「ブログ」がどこかに含まれる見出しを無視する
  • ブログ|SEO|プラグイン :「ブログ」、「SEO」、「プラグイン」という見出しを無視する

 

ちなみに当サイトでは「まとめ」を非表示にしています。

 

8.スムーズ・スクロール上部余白

 

ここではサイトに画面固定ヘッダーがある場合、スムースクロールの目的地が被らないように上部オフセットを調整することができます。

 

 

8.スムーズ・スクロール上部余白

 

設定はWordPress管理バーに対応している30pxに設定しておきましょう。

 

9.パス限定

 

ここでは目次を特定のページのみで表示させることができます。

 

9.パス限定

 

カンマ(,)区切りでスラッシュ(/)からはじまるパスを設定すればOKですが、必要なければ空白でOK。

 

10.アンカーのデフォルト接頭辞

10.アンカーのデフォルト接頭辞

 

ここは触らなくてOKです。

 

 

以上、Table of Contents Plusの上級者向けの設定でした。最後はサイトマップの設定についてです。

 

サイトマップの設定

 

ここではサイトマップを設定することができます。

基本的には何も触らなくていいので、デフォルトのままにしておきましょう☟

 

サイトマップの設定

  • 固定ページリストを表示:チェックを入れる
  • カテゴリリストを表示:チェックを入れる
  • 見出し:見出しはh3としてマークアップする
  • 固定ページのラベル:Pagesと入力
  • カテゴリページのラベル:Categoriesと入力

 

 

以上、サイトマップの設定についてでした。これで見出しを作れば、自動的に目次が挿入されます。

 

kazuki
設定が終われば、後は勝手に目次が作られます!

 

まとめ:【TOC+】Table of Contents Plusの設定方法と使い方

 

まとめ:【TOC+】Table of Contents Plusの設定方法と使い方

 

本記事ではTable of Contents Plusの設定方法と使い方について解説しました。

 

時間のない読者はすぐに欲しい情報を知りたいので、目次は読者にとっては非常に重要なもの。

なので、読者のためのも目次は作ってあげましょうね。

 

また、このようにブログ運営に必要なツールは他にもたくさんあります。

詳しくはこちらの【導入必須】ブログアフィリエイトにおすすめのツール8選を参考にしてください。

 

それでは今日はこのへんで。グッバーイ

 

人気記事[購入特典あり]稼げるテーマ!アフィンガー5の購入&導入手順

人気記事[必須ツール]GRCの口コミ・評判(メリット・デメリットも公開)

-plugin

© 2020 かずきの武器庫