ローディング中

【ワードプレス初心者講座】目次作成プラグインで目次を作ろう!

最近ワードプレスで作成されたサイトで流行っているのが

「目次機能」

読者にとっても、読みたい内容を素早く探して読むことができるため、

ユーザビリティも上がり、結果的にSEO効果も期待できます。

ワードプレス初心者に限らず、是非とも導入したい機能です。

そんな目次機能を簡単に搭載できるプラグインが

Table of Contents Plus

今回はこのプラグインの設定から使い方までご紹介していきます。

目次

Table of Contents Plus

table of contents plus

機能紹介

記事の見出し(h1/h2/h3…)タグから自動的に目次を自動生成してくれます。

細かな設定が可能で、目次の表示位置や、

目次のスタイルの設定、スクロールの仕方などの設定も可能です。

インストール方法

ワードプレスのダッシュボードからプラグインを選択し、新規追加をクリックします。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-27-%e5%8d%88%e5%be%8c9-23-57

その後、プラグインを追加の画面から

「Table of Contents Plus」と検索し、インストールをします。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-27-%e5%8d%88%e5%be%8c9-24-16

インストールが完了しましたら、しっかりとプラグインを有効化しておくようにしましょう。

多くのワードプレス初心者の方が、

このプラグインの有効化を忘れていて、プラグインが動作しない!と慌てられます。

そうならないためにも気をつけておきましょう。

 

設定前半

インストール完了後、プラグイン>インストール済みプラグインから、

Table of Contents Plusを見つけ出し、

設定をクリック。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-27-%e5%8d%88%e5%be%8c8-30-23

こちらからプラグインの設定が可能です。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-27-%e5%8d%88%e5%be%8c8-30-47

順番を追って解説していきます。

位置

目次の表示位置の設定します。

  • 最初の見出しの前
  • 最初の見出しの後
  • トップ
  • ボトム

の4つから選択可能です。

トップとボトムというのは、

目次を記事の最上部に表示するか最下部に表示するかという意味です。

表示条件

記事の中に、見出しがいくつ以上ある場合に、

目次を表示させるかを設定することができます。

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

postブログの記事
page固定ページ
プラグイン名プラグインの設定ページ

ここで選択したページタイプに、目次が自動挿入されます。

ブログページに目次をつけたい場合は、postを選択しましょう。

見出しテキスト

目次の見出しのテキストの設定ができます。

また目次を開閉できるように設定したり、

初期状態を設定することが可能です。

設定後半

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-27-%e5%8d%88%e5%be%8c8-31-01

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-27-%e5%8d%88%e5%be%8c8-31-10

この辺りは外観にあたる部分の設定ですので、反映を確認しながら設定していきます。

特に深くは考えずに、ぽちぽちしてるだけでいい感じに設定できるでしょう。

上級者向け設定で設定したいポイント

スムーズスクロールを有効化にチェックを入れていた場合。

目次をクリックした後、滑らかにスクロールして、項目に移動するのですが、

ヘッダー部分にfixなどで固定ヘッダーを設定していたりすると、

その下に文章が潜り込んでしまうことがあるため、

それを回避する設定をしてあげる必要があります。

その設定が上級者向け設定から設定することができます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-27-%e5%8d%88%e5%be%8c8-31-27

スムーズスクロール上部余白で、固定ヘッダーに被らないように調整しながら設定します。

この設定をするだけで、綺麗に表示されるようになります。

まとめ

いかがでしたでしょうか?

ワードプレス初心者の方も、そうじゃない方も、

すぐに導入したくなるプラグインではないでしょうか?

是非この機会に目次を導入してみてくださいね!

ホームページ・デザイン制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.