ブログに「目次」をつける方法（プラグイン：Table of Contents）

2018年3月24日 2018年3月24日ササキアキ

ササキアキ

今日は、この文章の下の箇所に表示されている「目次」についての解説をします。

目次ってどうやって作るの？

投稿のテキスト量が長くなってしまった時、投稿の一番上にこういう目次があったら、便利ですね。

読者さんも読みたい項目をクリックして、読みたいところに飛べますね。

ワードプレスの場合は、目次を作るのは簡単です。
目次専用のプラグインがいくつも出ています。

代表的なプラグインは

を使っていらっしゃる方も多いです。
どちらも「プラグイン名　設定方法」などで検索すると設定方法が出てきます。

今回私は

Table Of Contents Plus　のプラグインは最終更新が2年前
Easy Table of Contentsの最終更新が1週間前
という点から、2年間更新していないプラグインは不安もあるため
Easy Table of Contentsを選択しました。

そして「Easy Table of Contents」のいいところは、
目次の自動挿入をオンにしてもオフにしても、個別ページで無効と有効が選択できることです。

管理画面＞プラグイン > 新規追加　から

プラグインの検索に「Easy Table of Contents」を記入してください。

「今すぐインストール」をクリックして有効化します。

これでインストールの完了です。

有効化したら、
管理画面 > 設定 > Table of Contents　というタブができました。

「Table of Contents」　をクリックして、設定をしていきましょう。

ちなみに私のブログの設定はこちらです。
画像をクリックすると大きくなり全体がわかります

部分的に英語表記となっている部分もありますので上から順に説明します。

Enable Support	目次を有効にする	目次を挿入するページを指定する投稿ページだけでいいでしょう。
Auto Insert	自動で挿入	自動的に挿入するかを選択する
Position	目次を表示させる場所	・最初の見出しの上に設置・最初の見出しの下に設置・記事の上・記事の下
Show when	条件	○個以上の見出しを使ったら目次を表示させる
Display Header Label	目次にタイトルをつけますか？
Header Label	表示させるタイトル
Toggle View	開閉ボタンを付けるか	ユーザーが目次の表示を切り替えられるようにする
Initial View	初期設定	ページを開いた時に目次を開いた状態にするかどうか
Show as　Hierarchy	階層	見出しタグを階層にするかどうか
Counter	見出し番号	Decimal（階層の表示番号） 1 1.1 1.2 2 Numeric 上位階層に数字がつかない Roman（ローマ数字）
Smoooth Scroll	スムーズスクロール	スクロールを滑らかにする

Width	幅の広さ	Auto (スマホ対応でAutoのままでいいでしょう)
Custom Width	幅の広さ	カスタム幅を使用するには、「幅」オプションから「ユーザー定義」オプションを選択します。そのままでいいでしょう
Float	右寄せ・左寄せ	Noneで
Title Font Size	タイトルの文字の大きさ	120%
Title Font Weight	タイトル文字の太さ	Medium
Font Size	文字サイズ	95%
Theme	デザイン	表示させてみてイメージの合うものに
Custom Theme	デザインカスタム	Theme Customを選択した際の設定

上級者向けの項目になりますので、不要な箇所は省略します。
設定が必要な箇所のみ説明します。

Headings		h1~h6までのどの見出しまで目次に表示させるか
Smooth Scroll Offset	210px	スクロールした時に見出しの箇所にぴったりと止まるかどうかの設定です。この設定はスムーススクロールオプションを有効化している場合のみ有効です。 Lightningの場合は210pxがちょうどいい。
Mobile Smooth Scroll Offset	50px	スマホの場合 Lightningの場合は、50pxがちょうどいい?（画面を見ながら微調整してください。）