WordPress設定

Easy Table of Contentsの使い方と設定方法 目次生成WordPressプラグイン読み終わるまで 2

Easy Table of Contentsの使い方と設定方法 目次生成WordPressプラグイン アイキャッチ

ワードプレス(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で自動生成した目次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のダッシュボード(管理者画面)のプラグインの新規追加を選択します

↑WordPressのダッシュボード(管理者画面)のプラグインの新規追加をクリックします。

プラグインを追加画面の検索ボックスに"Easy Table of Contents"と入力して検索結果を表示させますプラグインを追加画面の検索ボックスに”Easy Table of Contents”と入力して検索結果を表示させます
  1. 検索ボックスに”Easy Table of Contents”と入力すると下に検索結果が表示されます
  2. ”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の一般(設定)画面Easy Table of Contentsの一般(設定)画面
サポートを有効化

目次を挿入(設置)したい記事のタイプを選択できます。
選択肢は下記の13種類です。

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
自動挿入

目次を自動挿入(設置)したい記事タイプを選択します。
前述の”サポートを有効化”とまったく同じ記事タイプが並んでいます。

この項目にチェックマークを入れた記事タイプの記事には自動で目次が挿入(設置)されます。自動挿入を有効化するには前述の”サポートを有効化”の両方にチェックマークを入れる必要があります。

もし、手動で投稿記事毎に目次の挿入(設置)をしたい場合は自動挿入のチェックボックスにチェックマークを入れてはいけません。

“サポートを有効化”の項目にチェックマークが入っていて”自動挿入”の項目にはチェックマークが入っていない場合は下記のように投稿(記事)内の編集画面に目次を挿入するか否かを選択するチェックボックスが表示されます↓

投稿記事内の編集画面に表示されたEasy Table of Contentsの設定項目投稿記事内の編集画面に表示されたEasy Table of Contentsの設定項目
位置

目次の表示位置を下記の4か所から選択できます。

  • 最初の見出しの前(デフォルト)
  • 最初の見出しの後
  • 上部
  • 下部
表示条件

投稿ページ(記事)内の見出しの項目数によって目次を作らない設定に変更できます。

  • 1~10件以上の見出しがある場合
    “件”となっていて日本語の単位が変ですが見出しの数です。
    なので、”1~10項目以上の見出しがある場合”という意味になります。

初期設定は4になっているので見出しの数が少ない記事だと目次が表示されません。
もし少ない見出し数の記事にも目次を表示したい場合はこの設定を少ない数に変更します。

見出しラベルを表示

目次の上に見出しラベル(タイトル)を付けるか否かの設定ができます。見出しラベルは後述の”見出しラベル”で変更できます。

見出しラベル

目次の最上段に表示される見出しのラベルを好きな文字に変更することができます。

初期設定では Table of Contents になっているので日本語の”目次”に変更しましょう。

折りたたみ表示

チェックマークを入れて有効にすると目次を折りたたむことがことができます。

初期状態

チェックマークを入れて有効にすると目次は最初から閉じた状態になります。

ツリー表示

チェックマークを外すことで階層(ツリー)表示しないように変更できます。
ツリー表示しないとH2やH3の見出しの大きさに関係なく全部の見出しが同じ階層に並びます。

階層表示になっていないと目次が非常に見にくくなるので必ずチェックマークが入っている状態にしてください。

カウンター

見出しの先頭に自動的に付けられる番号の種類を変更できます。

  • 小数点表示(デフォルト)
  • 数字
  • ローマ字
  • なし
カウンター設定が小数点表示(デフォルト)のときの目次カウンター設定が小数点表示(デフォルト)のときの目次
カウンター設定が「数字」のときの目次カウンター設定が「数字」のときの目次
カウンター設定が「ローマ字」のときの目次カウンター設定が「ローマ字」のときの目次
スクロールを滑らかにする

目次内の各見出しのリンクをクリックしたときの移動(スクロール)を滑らかにする設定です。

この設定の状態に関わらずスクローズせずに直ぐにリンク先に飛ぶのでチェックマークが付いた状態のままで大丈夫です。

外観 (設定)

Easy Table of Contentsの外観(設定)画面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の高度(設定)画面Easy Table of Contentsの高度(設定)画面

高度の設定はほとんど変更する必要はないので表で解説します。

高度(設定)の項目
項目名説明
小文字目次内のアンカーに大文字の英字が含まれている場合は小文字にすることができます
ハイフネーション英単語の改行時のアンカーに _ ではなく – を使用することができます
ホームページ固定ページをブログ(サイト)のトップページに表示していると目次が表示されません。その際に目次を表示する場合に設定します
CSSプラグインのCSSスタイルの読み込みを禁止できます。オンにすると外観(設定)は無効になります
見出し目次の生成時に含めるH1~H6の見出しを選択できます
除外する見出し見出しに特定の文字列が含まれているとき、目次に表示させないように設定できます
スムーズスクロールのオフセットスムーズスクロールをした時に表示が被って見にくい場合は適切な余白を指定して調整できます
モバイルのスムーズスクロールのオフセットスマホでスムーズスクロールをした時に表示が被って見にくい場合は適切な余白を指定して調整できます
パス制限ブログ内の特定の記事でのみ目次を表示させたい場合に設定します
デフォルトのアンカー接頭辞ページ内リンクと目次リンクの数値が被る場合は独自の接頭辞を設定できます
ウィジェットの固定セレクタウィジェットに目次を設置する時に固定セレクタを入力します

ウィジェットに目次を設置する方法

Easy Table of Contentsの目次をPCのサイドバー追尾に設置する方法を解説します。

投稿記事内に挿入する目次は他の目次自動生成プラグインを利用して、ウィジェットのPCサイドバーにはEasy Table of Contentsを使うこともできます。

サイドバー追尾の機能はパソコンで閲覧する時に限った話になりますが利用者は目次を観ながら記事を見ることができるので読みやすくなります。

  1. WordPressのダッシュボード(管理者画面)の外見のウィジェットを選択します
  2. 使用するテーマによって多少異なりますがJINの場合はサイドバー追尾【PC】の∨マークをクリックします
  3. ⊞マークをクリックするとウィンドウが表示されるので検索ボックスに 目次 と入力して検索すると検索結果に「目次」が表示されるのでクリックします
  4. サイドバー追尾【PC】内の下の行に「目次」が追加されます
  5. 最後に更新ボタンを押して設定を保存します

①ダッシュボード(管理者画面)の外見のウィジェットを選択

WordPressダッシュボード(管理画面)の外観の中にあるウィジェットを選択しますWordPressダッシュボード(管理画面)の外観の中にあるウィジェットを選択します

➁サイドバー追尾【PC】の∨をクリック

ウィジェット画面内のサイドバー追尾【PC】の∨をクリックして展開しますウィジェット画面内のサイドバー追尾【PC】の∨をクリックして展開します

③ ⊞マークを押して「目次」を検索してクリック

ウィジェット画面内のサイドバー追尾【PC】の⊞マークを押して「目次」を検索してクリックしますウィジェット画面内のサイドバー追尾【PC】の⊞マークを押して「目次」を検索してクリックします
  1. ⊞マークをクリックします
  2. ウィンドウが表示されるので検索ボックスに 目次 と入力します
  3. 検索結果に「目次」が表示されるのでクリックします

④「目次」が追加されます

サイドバー追尾【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の使い方と設定方法はこちらの記事を参考にしてください↓