スクロールする目次を作る方法
- 画面のスクロールに合わせて移動する「目次」を作りたい。
- スライドメニューやサイドバーに「目次」をいれたい。
ココがポイント
結論：
目次一覧を自動で生成してくれるプラグイン「Table of Contents Plus」（以降、「TOC+」と表記）をインストールする。
WordPressの各テーマで画面スクロールと合わせて移動する「ウィジェットエリア」に「TOC+」ウィジェット 
をいれる。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。
皆様は、自身のWebページに目次をつけることで、わかりやすい記事にしたいと思ったことはございませんか？
そのようなときは、目次一覧を自動で生成してくれる便利なプラグイン「Table of Contents Plus」はいかがでしょうか？
このプラグインでは、さらに、ウィジェットで好きなエリアに目次を入れることができるようになります。
この機能をつかうと、画面スクロールに対応したカスタムエリアに目次を追加でき、画面スクロールに合わせて移動する目次をつくることができるようになります。
それでは説明してまいります。
注意ポイント
私のWordpressのテーマは「AFFINGER5」になっており、カスタマイズの見た目が違う場合があるとおもいます。
しかし、それぞれのテーマで画面スクロールするエリアを編集すれば、同じように表示いただけると思います。
目次
1.「Table of Contents Plus」ってなに？
「Table of Contents Plus」は、表示されている記事ページの「見出し」を参照して、「目次」を自動生成してくれるプラグインです。
ブログを書いている上で、一つ一つの見出しにリンクできる「目次」をつくるには、非常に時間と手間がかかります。
このリンクにジャンプする仕組みにはid属性の値を割り振っていく必要があります。
もっと詳しく
id属性とは、簡単に言えばWEBページでその場所を特定するための名札みたいなものです。
詳しい記事：
この時間と手間をはぶけるのが、目次を自動生成してくれるプラグインです。
他にもいろいろなプラグインがあります。
皆様も自分好みの見た目のプラグインを探してみてください。
私は、「TOC+」の画面表示の見た目とウィジェットに登録できる機能が使いやすく、このプラグインをインストールしました。
参考
2.ウィジェット「TOC+」を画面スクロールするエリアに追加
2.Step1 「外観」から「ウィジェット」を開く
自身が管理しているWEBサイトのダッシュボードにいきます。
メニューの「外観」から「ウィジェット」をひらきます。
「ウィジェット」の画面は大きく分けて二つの分類があります。
左側に「追加したいウィジェット」が表示されており、右側で「WEB上で表示したい位置」が選べるようになっています。
2.Step2 「ウィジェット」を編集する
「ウィジェット」編集画面で今回使用する項目は以下の通りです。
ポイント
ウィジェットの左側：
- 目次を表示させるウィジェット「TOC+」
ウィジェットの右側：
- PC画面のときは、画面と一緒に動いてもらいので、「スクロール広告用」
に追加。 - スマホ画面のときは、スクロールするスライドメニューを開くと見えるようにしたいので、「スライドメニュー内下に表示」
に追加。
それでは、それぞれの項目にウィジェットを追加していきましょう。
追加は、ウィジェットの▼プルダウンメニューもしくはドラッグ＆ドロップでおこなえます。
「スクロール広告用」に「TOC+」を追加。（横の▼で「タイトル」も入れることができます。私は「この記事の目次」としております。）
「スライドメニュー内下に表示」に「TOC+」を追加。（横の▼で「タイトル」も入れることができます。）
以上で、目的の画面と一緒にスクロール場所に「目次」を入れることができました。
皆様も自分のすきな場所に「目次」をいれてみてください。
はてな
ウィジェットとは：
ウィジェット（英: Widget）は、グラフィカルユーザインタフェース（GUI）のインタフェース部品（UIパーツ）の総称であり、ウィンドウやテキストボックスなどが含まれる。
（ウィキペディアフリー百科事典より引用）
3.目次を開閉できるアコーディオン型にする方法
目次が縦長になり、クリックで項目を閉じたり開いたりできる機能をつけたくなったら、次の記事を参考にしてみてください。
4.画面スクロールに合わせて移動する開閉可能なメニューフィールドの作り方
画面スクロールに合わせて移動する目次を作成したいのに、格納するメニューフィールドがない方に、スライドメニューを自作する方法をご紹介しております。
このメニューフィールドに、JavaScriptの.clone()メソッドを使用して本文の目次をコピー、CSSでレイアウトを調整していただければ、画面スクロールに合わせて移動する目次を作ることができます。
参考
まとめ
お疲れ様でした。
今回は、プラグインをインストールとウィジェットの編集をご紹介して参りました。
ココがポイント
問題解決のステップ
- WordPressのテーマに画面スクロールに合わせて移動するカスタマイズエリアがあるものを選ぶ。
- 目次を自動生成してくれるプラグインをインストール。（ウィジェットで編集できるもの）
- ウィジェットを編集し、画面スクロールするエリアに「目次」を追加する。
ご一読いただきありがとうございました。
