ブログの始め方から
収益化までを徹底解説

 

【2022年3月最新】Table of Contents Plusの使い方3ステップ【カスタマイズ方法を解説】

Table of Contents Plusの使い方

「他のブログでよく見かける目次を使いたい」 「Table of Contents Plusではどんなカスタマイズができる?」 「記事ごとに目次の表示方法は変えられるの?」 このように考えている人がいるのではないでしょうか。ブログで目次を使うなら、無料プラグインのTable of Contents Plusがおすすめです。簡単に導入できて、思い通りのカスタマイズも可能です。 キレイで使いやすい目次があれば、読者に喜ばれるのはもちろん、自身の記事執筆のモチベーションも上がるでしょう。本記事では、Table of Contents Plusについて以下の内容を解説します。
  • Table of Contents Plusの概要
  • Table of Contents Plusの使い方
  • 便利な2つのショートコード
Table of Contents Plusの使い方を理解して、すぐに目次を使い始められるので、ぜひ最後までお読みください!
執筆者:沖ケイタ
株式会社沖プロ代表。ブログ歴8年。ブログ収益の累計は数千万円以上。過去に100人以上のブログ初心者の相談に乗った経験あり。1600人以上が受講するWebライター向け講座「Writing Hacks」のメイン講師。
X(旧:Twitter):@namakemono0309(フォロワー:47,000人)
ブログ:https://www.proof0309.com/
 

Table of Contents Plusとは?概要をサクッと解説

Table of Contents Plusの概要 まずは、Table of Contents Plusの概要を理解しておきましょう。
  1. 概要
  2. 導入するメリット
それぞれについて、順番に解説します。

1. 概要

Table of Contents Plusは、ブログ記事の目次を生成するプラグインです。下図のような目次を簡単に挿入できます。 スクリーンショット 興味のある箇所が読みやすくなるとブログ訪問者の滞在時間が伸びて、SEOにも良い影響が期待できます。WordPressでブログを開設したら、すぐに導入しておきたいプラグインです。

2. 導入するメリット

Table of Contents Plusを導入すると、以下のメリットがあります。
  • 自動で目次が生成されるので手間がかからない
  • 目次を思い通りにカスタマイズできる
  • ショートコードで記事ごとに目次の表示位置を変えられる
最初の設定さえ済ませてしまえば、その後は勝手に目次が作られるので、とても便利です。

Table of Contents Plusの使い方3ステップ

Table of Contents Plusの使い方 ここではTable of Contents Plusの使い方を、3つの手順で具体的に解説します。
  1. プラグインをインストールする
  2. 設定・カスタマイズを行う
  3. 見出しを使って執筆する
それぞれについて、順番に詳しく見ていきましょう。

1. プラグインをインストールする

まずはWordPressの管理画面からプラグインをインストールします。 管理画面左側メニューの「プラグイン」から「新規追加」を選択しましょう。
スクリーンショット
続いて、画面右上の検索窓に「Table of Contents Plus」と入力して検索ます。「Table of Contents Plus」が表示されたら「今すぐインストール」をクリックしてください。
スクリーンショット
インストール後には「有効化」をクリックして、プラグインの有効化を忘れずに行いましょう
スクリーンショット
これでプラグインのインストールは完了です。

2. 設定・カスタマイズを行う

管理画面左側メニューの「設定」から「TOC+」を選択しましょう。 最初に表示される下図の「基本設定」のタブを操作するだけで、目次が使えるようになります。 スクリーンショット 初期状態で表示されている基本的な設定の他に「上級者向け設定」もあるので、順番に解説します。

基本的な設定

目次の表示方法に関して、以下の項目は必ず設定しておきましょう。
  • 位置:目次を記事中のどこに表示するか
  • 表示条件:いくつ以上の見出しがあるときに目次を表示するか
  • 以下のコンテンツタイプを自動挿入:どのコンテンツに目次を表示するか
コンテンツタイプで「post」は記事で、「page」は固定ページを意味します。記事と固定ページの両方に目次を表示させるために、どちらもチェックを入れておくと良いでしょう。 他の項目はデフォルト状態のままで問題ありません。デザインなどにこだわりがあれば、好みに応じて変更してください。

上級者向け設定

「上級者向け設定」は初期状態では設定項目が隠れているので、まずは項目を表示させる必要があります。下図の「表示」をクリックしましょう。 スクリーンショット 表示された下図の「見出しレベル」の項目で、どの見出しレベルを目次として表示するかを設定できます。 スクリーンショット 初期状態ではすべてにチェックが入っているので、目次を表示させたくない見出しレベルのチェックを外してください。 目次の項目が多すぎると見にくいため「heading 2 – h2」と「heading 3 – h3」以外のチェックは外すのがおすすめです。 他の項目をデフォルト状態から変更する必要はありません。最後に画面下部の「設定を更新」をクリックしましょう。

3. 見出しを使って執筆する

ここまで設定が済めば、あとは記事を作成するだけで自動的に目次が挿入されます。 「表示条件」で設定した数より多い見出しを使って記事を書き、目次が表示されることを確認しましょう 設定はいつでも変更できるので、必要に応じてカスタマイズして、自身のブログにぴったりの目次を作ってください。

Table of Contents Plusで使える2つのショートコード

Table of Contents Plusで使えるショートコード 記事作成時に便利に使える2つのショートコードを紹介します。
  1. 任意の場所に目次を移動させる【[toc]】
  2. 目次を非表示にするショート【[no_toc]】
それぞれについて、順番に詳しく見ていきましょう。

1. 任意の場所に目次を移動させる【[toc]】

記事の本文に[toc]のショートコードを入力すると、その場所に目次が表示されます。 WordPressテーマの機能で自動表示される目次は消えるので、2つ表示されることはありません特定の記事だけ目次位置を変えたいときに、活用しましょう。

2. 目次を非表示にする【[no_toc]】

目次を表示させたくない記事があれば、[no_toc]のショートコードを入力することで非表示にできます。 ショートコードを入力する場所は、記事の本文中であればどこでも問題ありません。 目次をふだん表示させている箇所にショートコード入力しておくと、非表示にしていることがわかりやすいのでおすすめです。

Table of Contents Plusで目次が表示されないときの対処法4選

目次が表示されないときの対処法 Table of Contents Plusを導入したのに、目次が表示されないときの対処法を4つ解説します。
  1. プラグインの有効化
  2. 「コンテンツタイプ」の設定
  3. 「見出しレベル」の設定
  4. 「表示条件」の設定と見出しの使用
それぞれの対処法を順番に試してみてください。

1. プラグインの有効化

Table of Contents Plusのプラグインが有効化されているかをチェックしましょう。 管理画面左側メニューの「設定」から「プラグイン」を選ぶと、使用中のプラグインを確認できます。 設定を行ったのであれば一度は有効化したはずですが、他のプラグインを操作した際に誤って無効化してしまった可能性があります。忘れずにプラグインを有効化しておきましょう。

2. 「コンテンツタイプ」の設定

「コンテンツタイプ」が意図通りに設定されているか、確認しましょう。 目次を表示させたいのが記事なら「post」、固定ページなら「page」にチェックを入れる必要があります。 また、設定を変更した後は、画面下部の「設定を更新」を忘れずにクリックしてください。

3. 「見出しレベル」の設定

「上級者向け」設定の「見出しレベル」も要注意です。 表示させたい見出しにチェックを入れる必要があるので、チェックをすべて外すと目次は表示されません チェックを入れたレベルの見出しを、記事中で使っているかも確認しましょう。

4. 「表示条件」の設定と見出しの使用

記事中で使用している見出しが少なすぎるために、目次が表示されていない可能性があります。 「表示条件」の設定を確認し、指定した数以上の見出しを使って記事を作成しましょう 例えば、表示条件を「3」と設定したなら、記事中で3つ以上の見出しを使う必要があります。

【 12月31日まで 】2023年歳末大感謝キャンペーン
サーバー初回50%OFF〜 & Amazonギフトカード最大5,000円分が当たる

サーバー「BOX2〜BOX8」初回料金50%OFF&ドメイン永久無料

・サーバー初回料金50%OFFクーポン

1年以上のご契約に限りクーポンコード「SERVER50」を入力するとサーバー利用料金の50%OFF(BOX1は対象外)
※クーポンコードの使い方(1)サーバーの30日間無料お試しを申込む → (2)サーバー詳細画面の「アップグレード/ダウングレード」から本契約(12ヶ月・24ヶ月・36ヶ月のみクーポン適用)を行う → (3)「プロモーションコード」にコードを入力し「コードの認証」進む。特別価格が適用

・ドメイン永久無料

対象ドメインは「 .com / .net / .org / .info / .biz / .jp 」の6種類 レンタルサーバーBOX2〜8プランを12ヶ月以上の年間契約いただくことにより初回利用料金が50%OFFになり、6種類の独自ドメインの新規登録・移管・更新を永久無料でご利用可能

>>ドメイン永久無料詳細はこちら

サーバー「BOX1」初回料金40%OFF

1年以上のご契約に限りクーポンコード「BOXONE40OFF」を入力するとサーバー利用料金の40%OFF
※クーポンコードの使い方(1)サーバーの30日間無料お試しを申込む → (2)サーバー詳細画面の「アップグレード/ダウングレード」から本契約(12ヶ月・24ヶ月・36ヶ月のみクーポン適用)を行う → (3)「プロモーションコード」にコードを入力し「コードの認証」進む。特別価格が適用
※注意事項
他のプロモーションコード(クーポンコード)との併用は不可
次回更新以降は通常料金
更新やプラン変更等、既に契約済のサービスには利用不可
サーバーアカウント毎に1回限り有効
規定在庫がなくなり次第、クーポン提供を終了させていただく場合あり
BOX1はドメイン永久無料特典は対象外

特典:総額5万円分のAmazonギフトカードプレゼント

・Amazonギフトカード最大5,000円分が抽選で当たる!

期間中、割引クーポンを利用してサーバーを契約いただくと応募完了。当選者の方にはキャンペーン終了後、メールにてご連絡
Amazonギフトカード[5,000円分・3名様][3,000円分・5名様][1,000円分・20名様]
※注意事項
アダルト対応サーバーもキャンペーン対象
>>2023年歳末大感謝キャンペーンはこちら
▼WordPressの始め方はこちら▼ 【最短5分】WordPressブログの始め方を小学生でもわかるように解説 >>【最短5分】WordPressブログの始め方を小学生でもわかるように解説