【WordPress】目次の表示ができるプラグインTable of Contents Plusの設定方法

どうもやすです＾＾

 

今回はWordpressの記事を書く際に目次を表示させたいと

 

思った事がありますよね？

 

そこで今回はその目次を表示することができるプラグイン

 

Table of Contents Plusの設定方法について解説していきたいと思います

 

Table of Contents Plusを入れてみよう

Worepressのダッシュボードの下の所ある

 

プラグインにマウスを持っていき

 

 

右側にある新規追加をクリックします

 

この画面にいきましたら

 

赤枠で囲っている　検索窓にTable of Contents Plusと入れます

 

この画面になりましたら

 

赤枠で囲っているインストールをクリック

 

 

その後赤枠で囲っている【有効化】をクリック

 

ちゃんと有効化されているか確認するため

 

ダッシュボードにあるプラグインの所にマウスを持っていき

 

右側に出る項目の【インストール済みプラグイン】をクリック

 

この画面のように

 

Table of Contents Plusが入っていればこのような項目が出てきます

 

これでTable of Contents Plusのインストールは完了です＾＾

 

お次はTable of Contents Plusの設定に入ります

 

 

Table of Contents Plusを設定して目次を表示しよう

 

ダッシュボードの下にある設定にマウスを持っていきます

 

右側に出てくる項目の中にTOC+というのがあると思います

 

赤枠で囲っている所です＾＾

 

TOC+をクリックしますとこの画面になります

 

1個ずつ設定について書いていきますね＾＾

 

1　位置項目は　赤枠の通り最初の見出しの前【デフォルト】にします

 

2　表示条件は　赤枠の通り2つ以上見出しがある時に設定します

表示条件に関しては、記事を書く際に段落という項目があるのですが

 

そこの中にある見出しに関してのことです

 

下記で実際にやり方の解説を書いていますので

そちらをみてくださいね＾＾

 

3　以下のコンテンツタイプを自動挿入は

【Post】 【Page】のみにチェックを入れます

 

4　見出しテキスト

ここは見出しを出す際に

表示をどの言葉にするかという意味です　目次やコンテンツなど

 

あなた自身でしっくりくる言葉にしましょう

 

僕は目次にしています＾＾

 

5　階層表示

チェックを入れておきます

 

6　番号振り

チェックを入れておきます

 

7 スムーズ・スクロール効果を有効化

こちらもチェックを入れておきます

 

次は外観の設定です

 

8　横幅

こちらはデフォルトで大丈夫です

 

9　回り込み

こちらもデフォルトです

 

10　文字サイズ

これは95％で設定しておきましょう＾＾

 

11　プレゼンテーション

こちらは実際に目次を表示した際の背景の色を選択できます

 

あなた自身の好きな色に変えましょう＾＾

 

 

そして上級者向け【表示】をクリックしましょう

 

 

表示をクリックしますと下にある画面になりますので

 

こちらも設定していきましょう

 

 

上記のように赤枠で囲っている所は全部チェックは外しましょう＾＾

 

 

赤枠の中にCSSファイルを除外　という項目があります

こちらなのですが

CSSファイルを除外のチェックが入っていると目次の色の表示ができなくなるので

 

ここはチェックを入れないようにしましょう＾＾

 

お次は見出しレベルの設定ですが、上記で表示条件の説明をしましたが

 

 

こちらは実際に使う見出しの設定になります

 

今はheading2-h2とheading3-h3にチェックが入ってます

 

段落の中に見出しという項目が6まであるのですが

 

この設定の場合は、段落の見出しは2と3だけを使わないといけないのです

 

例えば記事の見出しを使う際に見出しレベルを2と3にしているのに

 

記事内で見出し1と4を選択しても目次は出てこないと言うことです

 

下記で実際に記事で見出しを使うやり方を解説していますので

 

そちらを見てもらえたらわかるとおもいます＾＾

 

 

そして下の設定は特にいじらなくても平気ですので

 

そのまま赤枠で囲っている設定の更新をクリックして保存しましょう

 

実際に記事内に見出しを出してみよう

ここからは上記で設定をした後

 

実際に記事の中で見出しを出すやり方について解説していきます

 

まずダッシュボード欄にある、投稿の項目で新規追加をクリックします

 

この画面になったら

 

記事内に見出しにしたい文字を入力します

 

ここでは見本としてTable of Contents Plusと入力しています

 

文字を入力した後、マウスの左を押しながら入力した文字の上をドラッグして離しますと

上記の画像のように青くなります

【ドラッグとはマウスの左を押しながら文字の上にマウスを移動させていくと青くなることです】

 

ドラッグしましたら赤枠で囲っている段落の項目をクリックしますと

見出しが1から6まで出ると思います

 

先程説明した見出しレベルの内容ですが

 

見出しレベルが2と3なら、ここの見出しは2と3のみにしないと

 

目次が表示されないと言うことです

 

 

ちなみに表示条件の話もしましたが、こちらは見出しの数の話です

 

例えば表示条件をこの解説記事では2つ以上見出しがある時

 

と記載しましたが、この表示条件は見出しを何個使った時に目次を表示するようにしますか？

 

という内容のものですので見出しレベルとは違うと言うことを覚えておきましょうね＾＾

 

ややこしいですけど簡単に解説しますと

 

表示条件とは　見出しを何個使った際に目次を表示させるか？という設定で

 

見出しレベルとは　記事で使う見出しは何番と何番を使っていくか？　という事です

 

 

実際に見出しレベルは2と3で設定していますので、見出し2をクリックし

設定すると

このように文字が大きくなります

 

お次にまた見出しにしたい文字を入力し

 

先程と同じやり方で文字をドラッグし、見出し3をクリック

 

するとこのようになります

 

これで先程話した表示条件の見出しが2つ以上ある時に目次を表示させる

 

という項目はクリアしています【見出しを2つここに表示しているので】

 

ちなみに見出しの位置や場所は関係ないのであなた自身の

見出しを作りたい所でこの設定をしましょう＾＾

 

そして説明した見出しレベルのheading2-h2とheading3-h3も

 

実際に記事内の見出し2と3をクリックしていますので

 

こちらの項目もクリアしています

 

ここについてですが、必ずしも見出し2と3を使わなきゃだめというわけではありません

 

さっきと説明が違うじゃないか！！と思いますが、見出し2だけを使って

 

2つ以上見出しを出すだけでも目次は表示できます

 

なぜかといいますと、実際に記事のプレビューを見てみますと

 

このように目次が表示されると思います

 

 

目次の表示を見てみるとわかりますが、左側に1と1.1という風に表示されていると思いますが

 

 

これを例えば見出し2だけで作って、プレビューでみるとこのようになります

 

 

逆に見出し3だけで作るとこうなります

 

 

何を言いたいかと言うと見出し2、もしくは見出し3だけで2つ以上見出しを作れば

 

目次は表示させることができるということです

 

ただし見出し2と3で作ると1　 1.1という風になりますが

 

見出し2のみや　見出し3のみだと1　 2 という風に目次が表示されます

 

以上で目次についての解説を終わりにします

 

お疲れ様でした！

 

 

まとめ

 

今回は目次を出すことができるプラグイン

 

Tabli of Contents Plusについて解説していきました

 

このプラグインを使い目次を表示されるだけでも

 

1記事ずつの見栄えが変わりますので

 

ぜひこの解説記事を参考に

 

あなたもプラグインを導入して

 

目次の表示をさせて記事の見栄えを良くしちゃいましょ＾＾

 

 

やすでした^^

 

 

P.S.

 

わからない事、どうしたら良いの？という疑問、または感想など

 

なんでもご連絡下さい＾＾→やすに連絡してみる