MENU
全国対応
hashi kazuaki
SEO対策・WEB集客
SEO対策・WEB集客歴13年
独立・起業のWEB支援3社/既存企業のWEB集客5社立ち上げサポート。2021年からHP製作・WEB集客支援スタート。


⇒ご挨拶/経験と失敗談
⇒WEB集客とSEO対策の実績紹介

検索するとどれも同じようなホームページが並ぶ中
☑もっと検索順位を上げて集客したい
☑「ここの会社がいい!」と思って選んでもらいたい
このような思いを持っている企業様のサポートを行っています。

目次プラグイン『Table of Contents Plus』設定方法とカスタマイズ。SEOにも有利?!

Table of Contents Plus・設定方法・カスタマイズ

ブログやホームページの記事によく見かける目次。
このメディアでも記事一つひとつに目次を挿入しています。

目次があると良い理由は

  • 記事全体の内容を確認できる
  • 知りたい部分だけ読みたい人に親切
  • SEO的にも効果あり

ということで、目次を挿入するのがおすすめです。

wordpressではプラグインで目次の挿入が可能です。

このページでは、
ホームページやブログ、オウンドメディアなどコンテンツの各ページに目次を自動挿入できるプラグイン「Table of Contents Plus」のインストール方法から、基本的な設定方法をご紹介します。

また、目次を見栄え良くするためのカスタマイズ方法も合わせて紹介しますので参考にどうぞ。

あと企業ホームページ向けに、「Table of Contents Plus」を使ったFAQページを見やすく目次にまとめる方法は下記ページで紹介していますので、企業ホームページを自作している中小企業や個人事業の方は、こちらも合わせて参考にどうぞ。

目次

Table of Contents Plusとは

TOCロゴ

テーブル・オブ・コンテンツ・プラスとは、ワードプレスの個別ページや投稿ページに、目次を自動的に挿入することのできるプラグインです。

WEBサイトの文字数が多い場合に、見出し別に目次を表示してくれるのでユーザーにとって見たい部分を見つけやすくなるので便利です。

【SEO対策】目次は内部リンクになる

Google検索結果、見出しのリンク

目次は一つひとつが内部リンクになるので、適切な目次設定は検索画面で上記のようにリンクされることがあります。

SEO効果まではそれほど期待できるものではありませんが、Google先生が検索画面にこのように目次のリンクを表示してくれるので、『読みたい部分だけ読みたい』人にとっても親切です。

Table of Contents Plusの機能

つづいて、具体的なインストールと設定方法の前に、Table of Contents Plusで何ができるのか、簡単にご紹介します。

  1. 目次を階層別に表示させられる
  2. 個別ページ・投稿ページで表示を設定できる
  3. 指定したページのみ目次を表示することも可能
  4. サイトマップを作成できる

それでは一つひとつ見ていきましょう。

目次を階層別に表示させられる

Table of Contents Plusの目次サンプル

見出しはh1~h6まで設定できますが、大見出し・中見出し・小見出しと階層別で表示することが可能です。

階層にすることで、目次が整理されて見やすくなります。

個別ページ・投稿ページで表示を設定できる

目次の自動挿入を

  • 固定ページのみ
  • 投稿ページのみ
  • 固定ページと投稿の両方

から設定することが可能です。

指定したページのみ目次を表示することも可能

目次の自動挿入をせずに、任意で指定したページのみ目次を挿入することも可能です。

サイトマップを作成できる

Table of Contents Plusは目次のほかサイトマップを設定することも可能です。

ただ、個人的にはサイトマップを整正するなら「PS Auto Sitemap」をおすすめします。

Table of Contents Plusのインストール方法

Table of Contents Plusのインストール画面

Table of Contents Plusのインストールは、

ワードプレスの管理画面から
プラグイン ⇒ 新規追加 ⇒ 検索窓から「Table of Contents Plus」を検索します。

「今すぐインストール」し、「有効化」します。

Table of Contents Plusの設定方法

PCを操作する女性

続いて、Table of Contents Plusの設定方法を紹介します。

設定⇒TOC+から基本設定へ

Table of Contents Plusの設定画面

TOCプラスから基本設定に進みます。

TOC設定画面1

位置
デフォルトの「最初の見出しの前」でOKです。
今ご覧になっているこのページのように、導入文と最初の見出しの間に目次が表示されます。

表示条件
2つ~4つくらいでOKです。
見出しが少ないときは表示させないようにするなら、表示条件を変更します。

以下のコンテンツタイプを自動挿入

  • post = 投稿
  • page = 固定ページ

基本的にこの2つにチェックを入れればOKです。

投稿のみにする場合は、pageのチェックを外しましょう。

TOC設定画面2

見出しテキスト
目次のタイトルは、デフォルトで構いません。

  • ここからの目次
  • このページの目次

などに変更しても良いでしょう。

「最初は目次を非表示」にチェックを入れると、目次が閉じた状態で表示されます。

階層表示
階層表示はチェックを入れることをおすすめします。

h2⇒h3⇒h4と見出しを階層化してくれます。

番号振り
ここは目次に番号を振ってくれる項目です。お好みで。

スムーズ・スクロール効果を有効化
目次をクリックした際に、スーッと滑らかに移動します。

※テンプレートによっては機能しない場合があります。

TOC設定画面3

外観
外観は好みで選べます。
カスタムを選択すると、各種カラーを設定できます。

※デザインをカスタマイズする場合は無視してかまいません。

上級者向け設定

TOC上級者向け設定画面1
  • 小文字
  • ハイフン

こちらはチェックしなくてOKです。
小文字を使用してもいいですし、ハイフンを使用してもしなくても大きな違いはありません。

ホームページに含める
ここにチェックを入れると、ホームページのトップページを固定ページにした場合、トップページにも目次が自動挿入されます。

CSS ファイルを除外
目次のデザインを任意に設定する場合はココにチェックを入れます。
目次のカスタマイズの方法とコピペで変更できるデザインに関しては後ほど紹介します。

テーマの見出し記号を保持
ここもチェックしなくてOKです。

見出しレベル
記事の見出しに含めるタグを設定できます。

h2
h3
のみか、

h2
h3
h4

辺りでOKでしょう。
私の場合は、いつもh2とh3のみにしています。

除外する見出し
特定のキーワードが含まれる見出しを目次から除外したい場合のみ設定してください。

主導で任意のページのみ目次を挿入する方法

TOC上級者向け設定画面2

目次を任意のページのみに挿入する場合は、

「以下のコンテンツタイプを自動挿入」で

  • post
  • page

からチェックを外します。

そして任意のページ内に

toc

上記のタグを入れると目次が表示されます。

Table of Contents Plusをカスタマイズする方法とコピペで使えるデザイン

Table of Contents Plusをデフォルトのデザインから変更する場合は、

上級者向けの設定にある「CSS ファイルを除外」にチェックを入れます。

CSS ファイルを除外のチェック

そのうえで、任意でスタイルシートを設定するとデザインを変更できます。

コピペでOK!Table of Contents Plusのデザイン

ここで、コピペで簡単に変更できるネットで公開されているおしゃれな目次をご紹介します。

具体的なCSSは、引用元のページを参照してください。

TOCカスタマイズサンプル1
参照:ひつじアフィリエイトさん

TOCカスタマイズサンプル3
参照:Pasonalさん

TOCカスタマイズサンプル2
引用:DigiPressさん

TOCカスタマイズサンプル4
参照:うれしデザインさん

さいごに

ホームページは基本的に目次を表示した方が良いです。

理由は、何が書いてあるか大まかな内容が分かるからです。

特に文章量が多いコンテンツで自分の知りたいことを探し出しやすくなります。
ユーザーの利便性が高まればSEO対策にも効果があります。

また、最初にも述べた通り、
目次を設定すると検索エンジンに、目次もリンクが表示される場合があります。

※必ずではありません。
※検索キーワードと関連性が高いときは表示される可能性が高い。

Google先生がリンクを表示するということは、前向きに考えて目次はないよりあった方が良いと考えられますので、

情報を整理してユーザーに分かりやすくするためにも「Table of Contents Plus」の導入はおすすめです。

Table of Contents Plus・設定方法・カスタマイズ

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を読んだ方のコメント

コメントする

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次