こんにちは、YaaRuuです！
国語辞典を使ったことはありますか？
日本語の単語や意味などを調べるときに便利ですが結構なページ量があります。
そのため実際に利用する場合は調べたい単語の五十音をもとにページを開くと思います。
「本」という単語を調べる場合、1ページ目からページをめくって調べていくのではなく最初に「は」行のページを開いてそこから探した方が目的の単語にを早く見つけることができます。
仮にこの国語辞典がインターネット上で閲覧できるページを作ろうと思った場合、どのような状況になるか想像してみます。
国語辞典の種類にもよりますが収録語数は少なくとも1万語以上あるため、その数の単語や連語などを1ページに全て記載したとします。
その中で検索機能も使えないと仮定した場合、「本」という単語を調べたい時は「あ」行からずっと下にスクロールをし続けて「本」という単語を探すことになります。
そのような状況の時に、実際の辞典で「は」行のページを開いたように対象の行まで一瞬で移動できると多少便利になります。
ある程度のHTML知識があればそのような機能を自前で作ることが可能なのですが、実際に作るとなるとそれなりに時間がかかります。
ブログの記事を書いていくと目次を作った方が見やすくなったり、その目次の場所まで移動できればと思うことがあります。
そもそも目次を書かないことも考えられますが、目次があると上記のように見てくれる方にとって利便性が良くなります。
また、どのようなことが書いている記事なのか把握しやすくなるため内容まで見てもらえる可能性が高くなります。
便利なことに記事の中で目次を書くと自動的に目次一覧を作成してくれて、かつその目次まで一瞬で移動できる機能を提供してくれるプラグインがあります。
それが今回の「Table of Contents Plus」となります。
これを設定しておくことで見てくれる人の利便性を向上させることができます。設定も簡単ですのでぜひともインストールして設定していきましょう。
今回は記事を書く前に行う自動目次生成プラグインの設定を記事にしております。
もしお役に立つような情報があれば幸いです。それではどうぞよろしくお願いいたします。
1. プラグイン情報
プラグインの情報は次の通りです。プラグインを追加する際のキーワードで利用します。
- プラグイン名 ： Table of Contents Plus
- 作者 ： Michael Tran
2. Table of Contents Plusプラグインの有効化
WordPress管理画面左側のプラグイン①を選択し新規追加②をクリックします。
右上にあるキーワード – プラグインの検索…のテキストボックス③に「Table of Contents Plus」と入力します。
※大文字や小文字、スペースなども検索対象に含まれます。
そのためもし検索結果が上手く出てこない場合は、文字の見直しや作者の文字列を入力してみてください。
（作者の文字列 ： 今回は「Michael Tran」となります）
キーワードを入力後④、検索結果が出てきます。
出てきたプラグイン名と作者⑤がプラグイン情報と同じであることを確認して、今すぐインストールボタン⑥を押します。
インストールできましたら有効化ボタン⑦を押します。
プラグインを有効化しました。と表示されることを確認します。
3. 自動で目次を生成するための設定
自動で目次が生成される設定を行います。
WordPress管理画面左側の設定⑧を選択しTOC+⑨をクリックします。
目次の表示条件⑩と以下のコンテンツタイプを自動挿入⑪で対象となるにコンテンツにチェックを入れます。
※コンテンツの「post」が通常の記事で、「page」が固定ページを表しています。自分自身で自動生成が必要と思うコンテンツにチェックを入れてください。
（私の場合は固定ページに目次は不要であったため、以下の画像では「post」だけにチェックを入れています）
下の方にスクロールし目次の上にタイトルを表示のテキスト⑫に表示する文字を入力し、必要に応じて番号振り⑬のチェックを外します。
（私の場合は移動した先の目次にも番号を振りたかったため番号振りのチェックを外しています）
下の方にスクロールし、上級者向け（show）⑭をクリックして、必要に応じて見出しレベルのheading 1 – h1のチェック⑮を外します。
（私の場合は一番最初のタイトル部分は目次として不要であったため外しております）
画面を下にスクロールし、設定を更新ボタン⑯を押します。
設定を保存しました。と表示されることを確認します。
4. 自動目次生成の確認
自動で目次が生成されるか確認します。
WordPress管理画面左側の投稿⑰を選択し新規追加⑱を選択します。
タイトルを追加⑲に好きなタイトルを入力します。
タイトルのすぐ下にある「ブロックを選択するには「/」を入力」の右側のブロックを追加ボタン⑳を押します。
見出し㉑をクリックします。
※もし見出しがない場合は、すべて表示をクリックして見出しを探してください。
見出し㉒に好きな見出しを入力します。
この作業について、TOC基本設定で設定した表示条件の数以上繰り返します。
（表示条件が4つであれば見出しを4つ以上作ります）
Enterキーを押して再度ブロックを追加ボタン㉓を押して見出しを作っていきます。
見出しを表示条件の数以上作り終えたら、画面右上のプレビュー㉔をクリックし、新しいタブでプレビュー㉕をクリックします。
目次が自動で生成されていることを確認し、それぞれの目次をクリック㉖します。
※私の環境の場合、以下の画像のように見出しテキストの文字が三本線のアイコンに重なってしまったため、見出しテキストの最初に空白文字を数個入力して重ならないように調整しました。
対象の目次まで移動することを確認します。
（下記の画像では、1. ConoHaの公式サイトへアクセスという目次をクリックした後の画像となります）
5. サイドバーへの目次設定
自動生成された目次は基本的には最初の見出しの前に表示されます。
その状態で画面を下にスクロールしていくと目次が見えなくなってしまいます。
また目次が見えないため目次先にも一瞬で移動できなくなってしまいます。
みなさんのブログの構成にもよりますが、もしサイドバーにも目次があった方が良いと思われる方は以下の設定も参考にしていただければと思います。
WordPress管理画面左側の外観㉗を選択しウィジェット㉘を選択します。
TOC+の▲㉙をクリックします。追尾サイドバー（PCのみ）㉚を選択しウィジェットを追加ボタン㉛を押します。
画面右側の追尾サイドバー（PCのみ）にTOC+が入っていることを確認します。
再度投稿ページのプレビュー画面を確認します。
もしプレビュー画面を開いていない場合はひとつ前の「4. 自動目次生成の確認」を参考にしてください。
（プレビュー画面を開いている状態なのであれば、ブラウザの更新ボタンを押すことでも設定が反映されます）
画面のサイドバーに自動生成された目次㉜が表示されていることを確認します。
画面を下にスクロールしても自動生成された目次㉝が追尾されることを確認します。
これでTable of Contents Plusの設定は完了となります。
今回は記事を書く前に行う自動目次生成プラグインの設定について記載しました。
次回もそれぞれのプラグインの設定方法について記載します。
IT応援ブログはあなたのITライフを応援します！！
