マグダラで一番読まれている人気記事はこちらをクリックで読めます

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

 

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

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

『TOC+』を紹介します。

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

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

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

マグ

でも、目次ってそもそも必要なの?

要点だけを閲覧したい人もいますからね

そんなときTOC+で表示した目次の見たい項目だけをクリックすると、その項目まで自動で移動してくれて便利です

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

TableofContentsPlusは、Wordpress専用の目次出力プラグインのひとつです

 

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

上級者用設定

さて、これで目次が出現するわけですが、そのままだと写真のような文字とイラストのかぶりが発生する可能性があります

見た目を整えるためにも【上級者設定】までいきましょう!

チェックだけで済むので10秒程度で済みますよ

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

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

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

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

 

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

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

しておきましょう

 

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

 

 

注意

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

 

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

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

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

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

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

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

[nlink url=”https://lowbuyer.com/blog-management-3/1800/”]

[nlink url=”https://lowbuyer.com/blog-access-up/1455/”]

コメントを残す

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください