当サイトおすすめ洋画ベストはこちらをクリック

目次を表示してくれるプラグイン【TOC+】入れ方と設定方法

 

今回は、記事の『目次』を

手動で作らなくても自動で記事を読み込んで構築してくれるプラグイン

『TOC+』を紹介します。

これを導入するとこのような目次が

記事公開と同時に自動で現れるので

訪問してくれた人にとって見やすい記事作りができます

[speech_bubble type=”ln-flat” subtype=”R1″ icon=”DALA.png” name=”DALA”]でも、目次ってそもそも必要なの?[/speech_bubble] [speech_bubble type=”ln-flat” subtype=”L1″ icon=”MUG.png” name=”MUG”]要点だけを閲覧したい人もいるからね。そんなときTOC+で表示した目次の見たい項目だけをクリックすると、その項目まで自動で移動してくれて便利だよ[/speech_bubble]

そもそも目次とは?

 

[speech_bubble type=”ln-flat” subtype=”R1″ icon=”DALA.png” name=”DALA”]目次って言ったら、本の最初らへんにあるアレじゃないの?[/speech_bubble] [speech_bubble type=”ln-flat” subtype=”L1″ icon=”MUG.png” name=”MUG”]そうそう!書籍などの目次とWebサイト上の目次は一緒だよ![/speech_bubble]

Webサイトやブログなどでも、1ページが2000文字超えなどの長文ページがあります。

その際に、目次があると知りたい項目を一目で探し出すことができるんです。

例えば!
このページでも『入れ方は知ってるから設定方法だけ見たい』という場合に、入れ方の項目を飛ばして設定方法を閲覧することができるんです

Table of Contents Plus【TOC+】の入れ方

ワードプレス管理画面のプラグインから「新規追加」で

右にあるキーワード検索枠に「 Table of Contents plus 」と入力しましょう(小文字でもOK)

注意
必ずTable of Contents Plusのタイトルで⚓マークのものをインストールしてください。画像が違ったり、タイトルが違うと中もが異なるものがインストールされてしまいます

インストールが完了したら『有効化』

これで、TOC+のインストールは完了です。

最低限しておこう:基本設定

インストールが済んだらそのままその足で基本設定をしてしまいましょう。

基本的には同じ場所にチェックを入れていくだけで済む簡単な設定です。

① 【目次の上にタイトルを表示】
目次に「目次」や「Index」といった表示をすることができます。
表示する場合はチェックを

② 【ユーザーによる目次の表示・非表示を切り替えを許可】
「目次が邪魔だな」と思う閲覧者が、目次を隠せるように
するかしないかのチェックです
最初は目次をたたんでおく場合は「最初は目次を非表示」にチェック

③ 【階層表示】
階層を表示するか否かの設定(あまり必要性がないような気もするけど一応)

④ 【スムーズ・スクロール効果を有効化】
項目を選択したときの飛び方の切り替えです。
ジャンプ=飛ぶ
スクロール=滑っていく

⑤ 【外観】
基本的にいじらなくて大丈夫です。サイズやデザインの変更をしたい方は変更しましょう
モバイルでの表示を考えると横幅は自動の方が好ましいと思います

 

基本的な設定は以上です。これで、記事に応じて目次が出現します。

因みに、基本設定上から2番目の設定『表示条件』は

記事内の見出しが最低いくつから目次を出現させるかの設定なので僕は3にしています。

見出し2個の記事に目次はいらないからね(*’▽’)

しかし、このままではいけない【必読】

さて、これで目次が出現するわけですが、

そのままラストスパート【上級者設定】までいきましょう!

[speech_bubble type=”ln-flat” subtype=”R1″ icon=”DALA.png” name=”DALA”]えーまだ設定するの?![/speech_bubble]

 

[speech_bubble type=”ln-flat” subtype=”L1″ icon=”MUG.png” name=”MUG”]だって、このままだとこんな感じのダサい見た目のままになるんだ[/speech_bubble]

[speech_bubble type=”ln-flat” subtype=”R1″ icon=”DALA.png” name=”DALA”]あ、ちょっと前のヒカルの『マグダラ』の目次だ。てことは、あいつ設定きちんとしてなかったんだなw[/speech_bubble] [speech_bubble type=”ln-flat” subtype=”L1″ icon=”MUG.png” name=”MUG”]www上級者設定もチェックだけで済むから10秒もかからないよ[/speech_bubble]

更に詳しく:上級者設定

基本設定の下部、⑥をクリックしましょう

上部5項目はすべてチェックを入れておきましょう

特に、先ほどのようなデザイン崩れを直すには

CSSファイルを除外』にチェックを入れると直ります

 

見出しレベルの項目は、拾う見出しの階層の選択です

h5やh6まで選択してしまうと、目次がダラダラ長くなってしまうのでh3までに

しておきましょう

 

以上がTOC+の設定です。お疲れさまでした☆

 

 

注意

尚、目次のデザインはテーマによって多少変わってきます。

今回画像等含め、僕が導入しているのは有料テーマ『SANGO』のデザインの目次です。

 

おまけ:目次をサイドバーに表示する

目次をサイドバーに設置してみましょう。

ワードプレス管理画面➡【外観】➡【ウィジェット】

左のカテゴリの中に【TOC+】というのがあると思います。クリック

表示先は【追尾バー】を選択しましょう。

タイトルを記入して、お好みでチェックを入れ、完了

 

これで、追尾型の目次が表示できました☆

文字数が多く、内容量の多いページの場合、目次が常に視界に

あると何かと閲覧者的には便利だと思います。おまけとして、導入してみてください☆

因みに【追尾バー】はSANGO以外のテーマでもあると思います。

僕が以前使っていた無料テーマ『Simplicity2』にもありました。

 

記事よっては、目次表示してもなぁというものもあるとはおもいます。

実際、手動で「目次を入れたい記事だけ入れる」こともできますし、

その方が本当に閲覧者目線ではあると思いますが、

そのためにはCSSなどについて知る必要があるので、

ブログを始めたばかりの方は、このTOC+がベストだと思います(*^_^*)

▼こちらの記事も読まれています▼

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA