ワードプレス(WordPress)のプラグインEasy Table of Contentsのインストールと設定方法や使い方を詳しく解説します。
- Easy Table of Contentsの使い方と設定方法がわかります
Easy Table of Contentsで実現できること
Easy Table of ContentsはWordpressの無料プラグインです。
設定画面は日本語なので使うのは簡単です。
このプラグインをインストールして有効化すると記事に目次を自動で作成してくれます。
Easy Table of Contentsで自動生成した目次は下記のように表示されます。
Easy Table of Contentsで自動生成した目次↑初期設定(デフォルト)の状態で生成した目次です。右上のアイコンをクリックすると目次を閉じることができます。
上の写真はWordPressの有料テーマ「JIN」を利用した時に表示されるEasy Table of Contentsの目次になります。
他のWordPressテーマを利用している場合は表示が異なります。
当記事内の写真はすべて有料テーマ「JIN」を利用して表示させた目次です。
Easy Table of Contentsの良い点と残念な点
他の目次作成プラグインと比べてEasy Table of Contentsの良い点と残念た点を書きます。
Easy Table of Contentsの良い点
他の目次作成プラグインには無いEasy Table of Contentsオリジナルの特長が多いことが良い点です。
- 目次内のクリック済みのリンクの色を変更することができるので、既読と未読を利用者がわかりやすくなり利便性が向上する
- 目次の”表示”、”非表示”を記事ごとに設定できる
- 目次の挿入(設置)位置を記事内の”最初の見出しの前”、”最初の見出しの後”、”上部”、”下部”の4種類から選択できる。ただし全体設定のみで記事毎の選択は不可
Easy Table of Contentsの残念な点
実際にEasy Table of Contentsを使ってみて残念に感じた点を挙げます。
- 目次内の見出しラベルが左詰めになっていて中央に変更できない
- 行間の高さが詰まっていて隙間が少なく窮屈
- WordPressの有料テーマ「JIN」を利用していると表示が変になる(前述の2点もこれが原因)
Easy Table of Contentsのインストール方法
Easy Table of ContentsプラグインをWordpressにインストールする手順を解説します。
WordPressにEasy Table of Contentsプラグインを追加
WordPressのダッシュボード(管理者画面)のプラグインの新規追加を選択します↑WordPressのダッシュボード(管理者画面)のプラグインの新規追加をクリックします。
プラグインを追加画面の検索ボックスに”Easy Table of Contents”と入力して検索結果を表示させます- 検索ボックスに”Easy Table of Contents”と入力すると下に検索結果が表示されます
- ”Easy Table of Contents”の今すぐインストール”ボタンをクリックします
“インストール中”と表示されます
Easy Table of Contentsのインストールが完了すると”有効化”と表示されるのでクリックします↑Easy Table of Contentsのインストールが完了すると有効化ボタンが表示されるのでクリックします。
これでEasy Table of Contentsのインストールと有効化が完了しました。
次は設定をしていきます。
Easy Table of Contentsの使い方と設定方法
Easy Table of Contentsプラグインを有効化した直後の初期設定(デフォルト)の状態だと投稿記事内に自動で目次は生成されません。
記事内に目次を自動生成するには、設定で”自動注入”の項目内の”投稿”にチェックマークを入れて有効化して設定を保存する必要があります。
Easy Table of Contentsを設定する方法を解説します。
設定の中にある目次を選択します↑WordPressのダッシュボード(管理者画面)の”設定”の”目次”をクリックします。
設定
Easy Table of Contentsの目次設定は1画面(タブ)内に1列に羅列されていて長いので下記の大項目ごとに別けて解説します。
- 一般 (設定)
- 外観 (設定)
- 高度 (設定)
一般 (設定)
Easy Table of Contentsの一般(設定)画面サポートを有効化
目次を挿入(設置)したい記事のタイプを選択できます。
選択肢は下記の13種類です。
自動挿入
目次を自動挿入(設置)したい記事タイプを選択します。
前述の”サポートを有効化”とまったく同じ記事タイプが並んでいます。
この項目にチェックマークを入れた記事タイプの記事には自動で目次が挿入(設置)されます。自動挿入を有効化するには前述の”サポートを有効化”の両方にチェックマークを入れる必要があります。
もし、手動で投稿記事毎に目次の挿入(設置)をしたい場合は自動挿入のチェックボックスにチェックマークを入れてはいけません。
“サポートを有効化”の項目にチェックマークが入っていて”自動挿入”の項目にはチェックマークが入っていない場合は下記のように投稿(記事)内の編集画面に目次を挿入するか否かを選択するチェックボックスが表示されます↓
投稿記事内の編集画面に表示されたEasy Table of Contentsの設定項目位置
目次の表示位置を下記の4か所から選択できます。
- 最初の見出しの前(デフォルト)
- 最初の見出しの後
- 上部
- 下部
表示条件
投稿ページ(記事)内の見出しの項目数によって目次を作らない設定に変更できます。
- 1～10件以上の見出しがある場合
“件”となっていて日本語の単位が変ですが見出しの数です。
なので、”1～10項目以上の見出しがある場合”という意味になります。
初期設定は4になっているので見出しの数が少ない記事だと目次が表示されません。
もし少ない見出し数の記事にも目次を表示したい場合はこの設定を少ない数に変更します。
見出しラベルを表示
目次の上に見出しラベル(タイトル)を付けるか否かの設定ができます。見出しラベルは後述の”見出しラベル”で変更できます。
見出しラベル
目次の最上段に表示される見出しのラベルを好きな文字に変更することができます。
初期設定では Table of Contents になっているので日本語の”目次”に変更しましょう。
折りたたみ表示
チェックマークを入れて有効にすると目次を折りたたむことがことができます。
初期状態
チェックマークを入れて有効にすると目次は最初から閉じた状態になります。
ツリー表示
チェックマークを外すことで階層(ツリー)表示しないように変更できます。
ツリー表示しないとH2やH3の見出しの大きさに関係なく全部の見出しが同じ階層に並びます。
階層表示になっていないと目次が非常に見にくくなるので必ずチェックマークが入っている状態にしてください。
カウンター
見出しの先頭に自動的に付けられる番号の種類を変更できます。
- 小数点表示(デフォルト)
- 数字
- ローマ字
- なし
カウンター設定が小数点表示(デフォルト)のときの目次
カウンター設定が「数字」のときの目次
カウンター設定が「ローマ字」のときの目次スクロールを滑らかにする
目次内の各見出しのリンクをクリックしたときの移動(スクロール)を滑らかにする設定です。
この設定の状態に関わらずスクローズせずに直ぐにリンク先に飛ぶのでチェックマークが付いた状態のままで大丈夫です。
外観 (設定)
Easy Table of Contentsの外観(設定)画面幅
目次の幅をプルダウンメニュー内の設定値に変更できます。
固定は200～400pxで25刻み、相対は Auto または25～100%で25刻み、カスタムはユーザー定義を選択できます。
AutoだとPC環境によりますが目次の幅が短くなるので相対の100％にします
カスタム幅
目次の幅を px、％、em 単位で設定できます。
前項の幅で”ユーザー定義”を選択した場合にのみ有効になります。
回り込み
記事内本文の文字の左または右に目次を設置できます。
- なし(デフォルト)
- 左
- 右
この回り込み設定で左や右にするとスマホ画面での表示が崩れる可能性があるので必ず”なし(デフォルト)”を選択します。
タイトル文字サイズ
目次の最上部に表示されている”見出しラベル”の文字サイスを設定できます。
pt、px、％、em 単位で設定できます。
タイトル文字の太さ
目次の最上部に表示されている”見出しラベル”の文字の太さを設定できます。
下記の9種類の太さから選択できます。
- Thin
- Extra Light
- Light
- Normal
- Medium
- Semi Bold
- Bold
- Extra Bold
- Heavy
上になるほど細く、下になるほど太くなります。
文字サイズ
目次に表示される見出し項目の文字サイズを変更できます。
目次の最上部に表示されている”見出しラベル”以外の文字サイズのことです。
pt、px、％、em 単位で設定できます。
テーマ
目次の色を選択できます。
カスタムにした場合は後項目の”カスタムテーマ“でカラーの変更が可能です。
カスタムテーマ
- 背景色：目次の背景色
- 枠線色：目次の枠線の色
- タイトル色：目次内の見出しラベルの色
- リンク色：目次内の見出し項目のリンクの色
- ホバー時のリンク色：見出し項目にカーソルを置いた時の色
- 訪問済みリンク色：クリック済み見出し項目のリンクの色
高度 (設定)
Easy Table of Contentsの高度(設定)画面高度の設定はほとんど変更する必要はないので表で解説します。
| 項目名 | 説明 |
|---|---|
| 小文字 | 目次内のアンカーに大文字の英字が含まれている場合は小文字にすることができます |
| ハイフネーション | 英単語の改行時のアンカーに _ ではなく – を使用することができます |
| ホームページ | 固定ページをブログ(サイト)のトップページに表示していると目次が表示されません。その際に目次を表示する場合に設定します |
| CSS | プラグインのCSSスタイルの読み込みを禁止できます。オンにすると外観(設定)は無効になります |
| 見出し | 目次の生成時に含めるH1～H6の見出しを選択できます |
| 除外する見出し | 見出しに特定の文字列が含まれているとき、目次に表示させないように設定できます |
| スムーズスクロールのオフセット | スムーズスクロールをした時に表示が被って見にくい場合は適切な余白を指定して調整できます |
| モバイルのスムーズスクロールのオフセット | スマホでスムーズスクロールをした時に表示が被って見にくい場合は適切な余白を指定して調整できます |
| パス制限 | ブログ内の特定の記事でのみ目次を表示させたい場合に設定します |
| デフォルトのアンカー接頭辞 | ページ内リンクと目次リンクの数値が被る場合は独自の接頭辞を設定できます |
| ウィジェットの固定セレクタ | ウィジェットに目次を設置する時に固定セレクタを入力します |
ウィジェットに目次を設置する方法
Easy Table of Contentsの目次をPCのサイドバー追尾に設置する方法を解説します。
投稿記事内に挿入する目次は他の目次自動生成プラグインを利用して、ウィジェットのPCサイドバーにはEasy Table of Contentsを使うこともできます。
サイドバー追尾の機能はパソコンで閲覧する時に限った話になりますが利用者は目次を観ながら記事を見ることができるので読みやすくなります。
- WordPressのダッシュボード(管理者画面)の外見のウィジェットを選択します
- 使用するテーマによって多少異なりますがJINの場合はサイドバー追尾【PC】の∨マークをクリックします
- ⊞マークをクリックするとウィンドウが表示されるので検索ボックスに 目次 と入力して検索すると検索結果に「目次」が表示されるのでクリックします
- サイドバー追尾【PC】内の下の行に「目次」が追加されます
- 最後に更新ボタンを押して設定を保存します
①ダッシュボード(管理者画面)の外見のウィジェットを選択
WordPressダッシュボード(管理画面)の外観の中にあるウィジェットを選択します➁サイドバー追尾【PC】の∨をクリック
ウィジェット画面内のサイドバー追尾【PC】の∨をクリックして展開します③ ⊞マークを押して「目次」を検索してクリック
ウィジェット画面内のサイドバー追尾【PC】の⊞マークを押して「目次」を検索してクリックします- ⊞マークをクリックします
- ウィンドウが表示されるので検索ボックスに 目次 と入力します
- 検索結果に「目次」が表示されるのでクリックします
④「目次」が追加されます
サイドバー追尾【PC】内の下の行に「目次」が追加されます⑤更新ボタンを押して設定を保存
ウィジェット画面右上の”更新”ボタンを押しますPCでブログサイトの記事を開くと横のサイドバーに目次が追加されています。
サイドバーに目次が追加されていますまとめ
記事に目次を自動生成してくれる Easy Table of Contents は便利なWordPressのプラグインです。
記事の中に目次があるとブログ利用者も記事作成者もどの位置にどんな内容の見出しがあるのかが一目瞭然になるので利便性が向上します。
目次を設置するとブログサイト利用者は読みたい箇所だけを読むこともできるし、記事作成者も記事の見出しの階層の間違いに直ぐに気づくことができます。
ただし、WordPressの有料テーマ「JIN」を利用している場合は目次が綺麗なデザインで表示されないので他の目次プラグインを利用することをおススメします。
当記事の写真はすべてWordPressのテーマに「JIN」を利用して、Easy Table of Contentsの目次を設置しています。
もし「JIN」を利用している場合は他の目次プラグインを導入する上で比較のための参考になると思います。
なお、Table of Contents Plusの目次はウィジェットのサイドバーに表示させるだけにして、投稿記事に挿入する目次は他の目次生成プラグインを使うことも可能です。
※プラグイン同士の競合は起きません。
導入候補になる目次自動生成プラグイン Table of Contents Plusの使い方と設定方法はこちらの記事を参考にしてください↓
