Wordpress

スクロールする目次を作る方法【Table of Contents Plus】【AFFINGER5】

  1. HOME >
  2. Wordpress >

スクロールする目次を作る方法【Table of Contents Plus】【AFFINGER5】

カスタマイズ

スクロールする目次を作る方法

  • 画面のスクロールに合わせて移動する「目次」を作りたい。
  • スライドメニューやサイドバーに「目次」をいれたい。

ココがポイント

結論:
目次一覧を自動で生成してくれるプラグイン「Table of Contents Plus」(以降、「TOC+」と表記)をインストールする。
WordPressの各テーマで画面スクロールと合わせて移動する「ウィジェットエリア」「TOC+」ウィジェット 「TOC+」ウィジェット をいれる。

皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

ユウスケ

皆様は、自身のWebページに目次をつけることで、わかりやすい記事にしたいと思ったことはございませんか?

そのようなときは、目次一覧を自動で生成してくれる便利なプラグイン「Table of Contents Plus」はいかがでしょうか?

このプラグインでは、さらに、ウィジェットで好きなエリアに目次を入れることができるようになります。

この機能をつかうと、画面スクロールに対応したカスタムエリアに目次を追加でき、画面スクロールに合わせて移動する目次をつくることができるようになります。

それでは説明してまいります。

注意ポイント

私のWordpressのテーマは「AFFINGER5」になっており、カスタマイズの見た目が違う場合があるとおもいます。

しかし、それぞれのテーマで画面スクロールするエリアを編集すれば、同じように表示いただけると思います。

 

1.「Table of Contents Plus」ってなに?

TOC+ってなに?

「Table of Contents Plus」は、表示されている記事ページの「見出し」を参照して、「目次」を自動生成してくれるプラグインです。

ブログを書いている上で、一つ一つの見出しにリンクできる「目次」をつくるには、非常に時間と手間がかかります。

このリンクにジャンプする仕組みにはid属性の値を割り振っていく必要があります。

もっと詳しく

 

この時間と手間をはぶけるのが、目次を自動生成してくれるプラグインです。

他にもいろいろなプラグインがあります。
皆様も自分好みの見た目のプラグインを探してみてください。

私は、「TOC+」の画面表示の見た目とウィジェットに登録できる機能が使いやすく、このプラグインをインストールしました。

 

2.ウィジェット「TOC+」を画面スクロールするエリアに追加

2.Step1 「外観」から「ウィジェット」を開く

ウィジェット編集画面

自身が管理しているWEBサイトのダッシュボードにいきます。

メニューの「外観」から「ウィジェット」をひらきます。

 

ウィジェット編集画面の詳細

「ウィジェット」の画面は大きく分けて二つの分類があります。

左側「追加したいウィジェット」が表示されており、右側「WEB上で表示したい位置」が選べるようになっています。

 

2.Step2 「ウィジェット」を編集する

ウィジェットを編集

「ウィジェット」編集画面で今回使用する項目は以下の通りです。

ポイント

ウィジェットの左側:

  • 目次を表示させるウィジェット「TOC+」「TOC+」ウィジェット

ウィジェットの右側:

  • PC画面のときは、画面と一緒に動いてもらいので、「スクロール広告用」スクロール広告用に追加。
  • スマホ画面のときは、スクロールするスライドメニューを開くと見えるようにしたいので、「スライドメニュー内下に表示」スライドメニュー内下の表示に追加。

 

それでは、それぞれの項目にウィジェットを追加していきましょう。

「TOC+」ウィジェット
追加は、ウィジェットの▼プルダウンメニューもしくはドラッグ&ドロップでおこなえます。

 

スクロール広告用にTOC+を追加

「スクロール広告用」「TOC+」を追加。(横の▼で「タイトル」も入れることができます。私は「この記事の目次」としております。)

 

スライドメニュー内下の表示にTOC+を追加

「スライドメニュー内下に表示」「TOC+」を追加。(横の▼で「タイトル」も入れることができます。)

 

PCのサイドバーに見出しに設定したタイトルが目次としてできる  スライドメニューの目次

以上で、目的の画面と一緒にスクロール場所に「目次」を入れることができました。
皆様も自分のすきな場所に「目次」をいれてみてください。

 

はてな

ウィジェットとは:

ウィジェットWidget)は、グラフィカルユーザインタフェース(GUI)のインタフェース部品(UIパーツ)の総称であり、ウィンドウテキストボックスなどが含まれる。
(ウィキペディアフリー百科事典より引用)

 

3.目次を開閉できるアコーディオン型にする方法

目次が縦長になり、クリックで項目を閉じたり開いたりできる機能をつけたくなったら、次の記事を参考にしてみてください。

 

4.画面スクロールに合わせて移動する開閉可能なメニューフィールドの作り方

画面スクロールに合わせて移動する目次を作成したいのに、格納するメニューフィールドがない方に、スライドメニューを自作する方法をご紹介しております。

 

このメニューフィールドに、JavaScriptの.clone()メソッドを使用して本文の目次をコピー、CSSでレイアウトを調整していただければ、画面スクロールに合わせて移動する目次を作ることができます。

 

まとめ

お疲れ様でした。

今回は、プラグインをインストールとウィジェットの編集をご紹介して参りました。

ココがポイント

問題解決のステップ

  1. WordPressのテーマに画面スクロールに合わせて移動するカスタマイズエリアがあるものを選ぶ。
  2. 目次を自動生成してくれるプラグインをインストール。(ウィジェットで編集できるもの)
  3. ウィジェットを編集し、画面スクロールするエリアに「目次」を追加する。

ご一読いただきありがとうございました。

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.