WORDPRESS

【TOC+】WordPressプラグイン「Table of Contents Plus」の基本的な設定方法と使い方【ブログ記事の目次を自動作成】

WordPressプラグイン「Table of Contents Plus」の基本的な設定方法と使い方 アイキャッチ



今回は、WordPressにおける代表的なプラグインの1つ…

Table of Contents Plus(TOC+)

の基本的な設定方法と使い方をご紹介していきたいと思います

まず「Table of Contents Plus」は、ブログ記事内への目次作成におすすめなツール(もちろん無料)

通称TOC+!

主な機能や特徴は次の通り

  • 記事の見出しをもとに、目次を自動で作成してくれる!
  • 目次に表示させる「階層」をカスタマイズできる!
  • 「表示場所」もカスタマイズできる!
  • デフォルトの表示を、開いた状態か閉じた状態か指定できる!
  • テキスト色や背景色などのデザインも、カスタマイズできる!

僕もブログを開設するたびに必ず導入してるプラグインなので、備忘録もかねて「このサイトでも実際に行ってる設定例」をまとめておきたいと思います

それではさっそく見ていきましょー🐥

プラグインの種類によっては、導入済みのテーマや他のプラグインとの干渉などでWordPressに不具合が発生する可能性があります。 プラグインのご利用にあたっては、あらかじめのバックアップをおすすめします

関連:WordPressプラグイン「BackWPup」の基本的な設定方法【ブログに必須なバックアップ】

このブログのWordPress環境

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

WordPressプラグイン「Table of Contents Plus(TOC+)」の導入方法【インストールと有効化】

pc-work-202001_01

普通に「インストール&有効化」をするだけなので、わかる方は読み飛ばしていただいてOKです

① WordPress管理画面 > プラグイン > 新規追加

② 画面右上の入力欄に「Table of Contents Plus」と入力

wordpress-toc-plus-202002-icon

③ ↑ のアイコンが目印のプラグイン「Table of Contents Plus」が表示されるので、 今すぐインストール > 有効化 の順にクリック

プラグインの導入はこれでOKです🐥

WordPressプラグイン「Table of Contents Plus(TOC+)」の基本的な設定と使い方【目次を自動作成】

pc-work-202001_02

① WordPress管理画面 > 設定 > TOC+ をクリックします

ここから、「基本設定」タブの項目を順に見ていきます

まず先に、このサイトで実際に行ってる設定例です

wordpress-toc-plus-202001_01

wordpress-toc-plus-202001_02

wordpress-toc-plus-202001_03

順に見ていきましょう🐥

「位置」→ 最初の見出しの前(デフォルト)

目次を自動作成する場所、つまり記事上で表示させる位置を指定できます

特にこだわりがなければ、一般的な「最初の見出しの前(デフォルト)」のままでOKです

「表示条件」→ 2つ以上

目次を自動作成する「条件」を指定できます

一般的な設定は、見出しの数が「2つ以上」か「3つ以上」です

このブログでは「2つ以上」に設定してるよ!

「以下のコンテンツタイプを自動挿入」→ post / page

目次を自動作成する対象、つまり「ページの種類」を指定できます

一般的には、

  • post(投稿ページ。 通常の記事ページのこと)
  • page(固定ページ。 お問い合わせやサイトマップなどに使うページ)

この2つにチェックを入れておけばまずOKです

「見出しテキスト」

「目次の上にタイトルを表示」→ Contents

目次の1番上に「目次」や「コンテンツ」といったタイトルを表示させるかどうか、またそのタイトル名を任意の言葉に指定できます

このタイトル名は、「目次」「コンテンツ」「Contents」辺りが一般的!

「ユーザーによる目次の表示・非表示を切り替えを許可」→ チェックON / show・hide

ページを訪れたユーザーが、「目次の開閉」をできるようにするかどうかを指定できます

wordpress-toc-plus-202001_sample_02

開いた状態

wordpress-toc-plus-202001_sample_01

閉じるとスッキリする

ちなみに開閉できるように設定した場合は、その文言も任意のワードに指定できます

「表示・非表示」「show・hide」辺りが、わかりやすくておすすめ

「最初は目次を非表示」→ チェックON

ユーザーがページを訪れた際の、デフォルトの「目次の開閉状態」を指定できます

つまり、「ページが表示されたときは目次が開いてるか閉じてるか」の設定!

目次の設置は一見親切なようで、ユーザーによっては閲覧の邪魔にもなりかねません(特に長すぎるのは注意)

なのでこのサイトでは、「最初は目次を非表示」にチェックを入れて「見たい人にだけクリックして開いてもらう」という形にしてます

「階層表示」→ チェックON

「H2見出し」「H3見出し」「H4見出し」などを階層、つまり ”段階がわかるように” 表示するかどうか指定できます

ここは、わかりやすさを考慮して「チェックを入れる」のが個人的にはおすすめ

「番号振り」→ チェックON

目次で表示される「各見出しタグ」の先頭に、番号を自動で振るかどうかを指定できます

ここもユーザーにページ構成を一目で伝えるために、「チェックを入れる」のがおすすめ

「スムーズ・スクロール効果を有効化」→ ジャンプ

目次内をクリックすることで「該当の見出し」へ飛ぶときのスタイル、つまり ”挙動” を指定します

  • ジャンプ:一瞬でその見出しに飛びます
  • スクロール:スクロールしながら飛びます

ここは好みですが「ユーザーから時間を無駄に奪わない」という意味では、チェックを入れずにデフォルトの「ジャンプ」のままがおすすめ

「外観」→ グレー

目次のデザインを指定できます

「横幅」~「回り込み」の項目までは、基本デフォルトのままで問題ないです

「プレゼンテーション」の項目で、数種類のテンプレートから全体的なデザインを選択できます

このサイトは、デフォルトの「グレー」のまま!

ちなみにテンプレよりも自分で好きにカスタマイズしたい場合、「カスタム」を選んで…

  • 背景
  • ボーダー
  • タイトル
  • リンク

など、それぞれ色を指定していきましょう

ここまでで基本的な設定はほぼOKなんですが、最後に1つだけ大事なポイントがあります(次パートへ!)

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

【重要】「見出しレベル」→ h1 / h2

最後に、画面下部の「上級者向け」という項目をクリックしてみましょう

「上級者向け」という名前の通り、むずかしそうな項目が並んでますが、ここで見ておきたいのは「たった1ヶ所」だけ。 ズバリ…

  • 見出しレベル

という項目です

wordpress-toc-plus-202001_03

この項目で、目次に表示する「見出しの階層」を指定できます

「H2見出し」まではもちろん表示させるとして、「H3見出し」や「H4見出し」まで表示させるかどうか、任意で選択しましょう

個人的には、あまり細かい階層まで表示すると冗長になって逆に見づらいと思ってるので、このサイトではシンプルに「H1」と「H2」だけにチェックを入れてます

ということで、ここまでの設定が一通りおわったら1番下の「設定を更新」を忘れずにクリックしましょう

基本的な設定方法、使い方はこれでOKです

大変お疲れさまでした♪

あずき🐥

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-WORDPRESS

© 2020 あずきのぶろぐ