【WordPress】目次を作る方法（サイドバーで追従型の目次も作る）

---

---

目次を用意することで、記事内の構成をサマリーで表示することができ、読者が目的（検索意図）の内容にすぐにアクセスできるなど便利なことが多くなります。かつ、SEO 的にも効果が大きいです。

サイトに目次を効果的に配置することで、ユーザビリティ（使い勝手）を向上させ、読者が読みやすい記事を作成することができます。

目次を作ろう（目次の作成例）

記事内の目次と、サイドバーに設置する目次（かつ縦スクロールしても表示され続ける追従型）などを作成することができます。サイトや記事の内容、雰囲気に合わせて利用することで、よりよいサイトにしていく一つの方法です。

追従型の目次を利用した記事のイメージを動画で紹介します。

目次の作り方

WordPress で目次を作る方法は大きく分けて３種類あります。

• JavaScript で自作する
• 目次用プラグインを使う
• テーマ付属の目次を使う（ある場合）

いずれも一長一短がありますが、自作はかなり難易度が高くコスパが悪いため、操作が簡単で比較的オシャレに作れる 「TOC+」 プラグインを利用する方法を紹介します。

■ 「TOC+」 プラグインを使う

とても簡単に目次を作ることができるプラグイン 「Table of Contents Plus」（TOC+） は、 WordPress のプラグインの新規追加で検索すると出てきます。

確認して有効化します。

■ 記事内目次を作る

プラグインを有効化することで目次の設定画面を表示できます。

WordPress の管理画面から、[設定] → [TOC+] をクリックすることで設定画面を表示しますので、目次の表示設定を行います。

「TOC+」 では、標準で５種類のスタイルと、カスタムスタイルが用意されていますので、見た目を選ぶのが便利です。

■ サイドバー追従型目次を作る

WordPress の管理画面から 「外観」 → 「ウィジェット」を選択し、「スクロール広告用」に「TOC+ 目次」ウジェットを配置します。

（追従型ではなくサイドバーに設置する場合は、サイドバー領域にウィジェットを配置してください）

サイドバーに配置する「目次」は、標準だと、テキストを並べたような雰囲気です。

若干、おしゃれ感を出したい場合は、CSS を使って工夫することができます。

目次の周りに枠線を付けて、各目次にドット線を引く場合は、次のCSSを利用してください。

サイドバーの目次の CSS のクラス名は「toc_widget_list」です。

目次の完成です。

まとめ

目次は、記事内の構成をサマリーで表示することで読者が目的（検索意図）の内容にすぐにアクセスできるなど便利なことが多く、かつ、SEO 的にも効果が大きいです。

サイトに目次を効果的に配置することで、ユーザビリティ（使い勝手）を向上させ、読者が読みやすい記事を作成することができます。

• 目次の作成は「Table of Contents Plus]」が使いやすい
• 記事内の目次は設定するだけで利用できる
• サイドバーの目次はCSSを追加するとオシャレさが増します

目次が記事に入ると、自分で見直すときもとても便利です。

ぜひ使ってみてください。

WordPress の情報、テクニック一覧はこちらをクリック！

---

---

---

Presented By Boon Boon Blog .Com