Easy Table of Contentsの使い方を徹底解説｜目次プラグイン

2024年9月16日

当ページのリンクには広告が含まれています。

当記事では、記事とサイドバーに目次を自動挿入できるプラグインの解説をします。

目次プラグインといえば設定項目が少ないTable of Contents Plusもありますので、初心者の方はそちらの方が良いかもしれません。

反対にEasy Table of Contents は、かなり細かく設定できるため、こだわりたい方はこちらを使うとよいでしょう。

一部を除き、すべての項目について解説したため、目次を活用して知りたい箇所をつまんでください。

その前に、当サイトで使用しているテーマSWELLでは、デフォルトで目次機能が用意されています。

4つのデザイン、2種類のリスト選択、長い目次用の省略ボタンなど選ぶだけのシンプル機能です。
もちろんプラグインほど細かく設定はできませんが、必要な機能はすべて揃っているため、気になる方は以下をご覧になってください。

→詳細はこちら

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

サイトをみてみる

Easy Table of Contentsをインストール

手順

プラグインの中にある「新規プラグインを追加」をクリック
「Easy Table of Contents」で検索
「今すぐインストール」をクリック
「有効化」をクリック

Easy Table of Contentsの一般設定

管理画面の設定
↓
目次をクリック

サポートを有効化

チェックを入れた場所で、目次を表示できます。
特にこだわりがなければ、”投稿“と”固定ページ“にチェックしましょう。

自動挿入

自動挿入は、投稿のみで良いでしょう。
1つ前で固定ページにもチェックを入れてあるため、必要に応じて手動で入れれば良いかと思います。

位置

特にこだわりがなければ、最初の見出し前（デフォルト）で良いでしょう。
一応それぞれ表示される位置は、以下を参考にしてください。

easy-table-of-contents見出しの上に目次 — 最初の見出しの前

easy-table-of-contents見出し後に目次 — 最初の見出しの後

表示条件

指定した数以上の見出しがある場合、目次が自動挿入されます。

見出しラベルを表示

チェックを入れると、目次のタイトルを自由に設定できます。

Toggle on Header Text

チェックを入れると、ユーザーが目次の開閉をできるようになります。

Header Label Tag

ラベルに割り当てるHTMLタグを指定できます。
特別な理由がなければ、デフォルトのままでOKです。

折りたたみ表示

チェックを入れると以下の折りたたみボタンが表示されます。

ただ検索上位に表示されると”目次”の見出しも表示されますが、閉じた状態だと載りませんでした。
そのため、基本開いた状態が好ましいでしょう。

初期状態

上記で折りたたみ表示にチェックを入れると、表示されます。
ページを読み込んだとき、どちらの状態にしておくか指定できます。
基本はノーチェックで良いでしょう。

ツリー表示

チェックを入れると、見出しタグの値が小さくなるにつれ段落が付きます。

ツリー状のほうが見やすいため、チェックしておきましょう。

カウンター

見出し前の表示を設定できます。

特に理由がなければ、デフォルトの小数点表示で問題ないかと思います。

Counter Position

設定したカウンターの位置を調整できます。
基本はデフォルトの「inside」で良いでしょう。

TOC Loading Methed

目次を読み込む方法を選択できます。
以下の2つの機能は、デフォルトの「JavaScript」でしか機能しません。

どちらも不要であれば「Pure CSS」のが軽くなるため、おすすめです。

スクロールを滑らかにする

目次をクリックときの挙動を設定できます。

チェックをすると滑らかですが、しない方がと見出しまで早く飛びます。

Exclude href from url

チェックをすると、ページ内リンク（記事の中で特定の場所までのリンクを作ること）をID指定なしで、飛ばせるとのことですが、まず使うことはないでしょう。

TOC AMP Page Support

チェックをすると、AMPページでも目次機能を有効にできます。

Easy Table of Contents外観設定

幅

基本的に100%を推奨します。
100％にしておけば、スマホやPCなど異なる画面サイズで見たときに、自動で幅調整してくれます。

Alignment

なし（デフォルト）のままでOK。

例えば上記で幅を50%にした場合、以下のように表示されます。

左を選択すると、目次の右側に導入文が回り込みます。

右を選択すると、目次の左側に導入文が回り込みます。

Enable Wrapping

ラッピングを有効にするとの設定ですが、何を指すのかわかりませんでした。

Headings Padding

チェックをすると、目次内見出しの余白を調整できます。
デフォルトに不満があれば、変更してみてください。

タイトル文字サイズ

ここは目次タイトルの長さにもよるため、お好みでOK。
スマホとパソコン両方から確認して、最適なサイズにしてください。

タイトル文字の太さ

Medeumより上は細字
Semi Boldより下が太字

文字サイズ

目次内のフォントサイズ指定です。
％は本文のフォントサイズに対してになります。

Font Weight

フォントの太さを指定できます。
設定方法はタイトルと同じです。

Child Font Size

目次内のh3以降のフォントサイズを指定できます。
文字サイズより、少し小さくすると良いでしょう。

テーマ

目次はサイトカラーに合わせたいので、カスタムがおすすめです。

カスタムテーマ

上記はこちらで少し整えています。

Easy Table of Contentsの高度な設定

よくわからなかった項目もありましたが、だいたい解説しました。
長いため目次を活用して、知りたい項目だけチェックしてください。

小文字

目次内の見出しには、以下のように”id“が割り振られています。

このidを必ず小文字にしたい場合は、チェックします。
当サイトは、数字や大文字が混じっても構わないため、チェックしていません。

ハイフネーション

見出しに英単語が入る場合、適用される項目です。

デフォルトでは、単語の連結に「_アンダースコア」が使用されています。
チェックをすると「–ハイフン」に変更できます。

一応意味としては

アンダースコア：連結
ハイフン：区切り

となりますが、正直どちらでもいいのでチェック不要かと思います。

ホームページ

固定ページでオリジナルのトップページを作成する場合、チェックをすると”目次を表示“できます。

Tag

チェックをすると、タグページにも目次を表示できます。

Product Category

チェックをすると、カスタム投稿で作成した商品ページにも目次を表示できます。

Custom Taxonomy

チェックをすると、カスタム投稿で作成したページにも目次を表示できます。

Device Target

MobileもしくはDesktopを選択すると、選択したほうのデバイスでしか目次は表示されません。

Load js In

JavaScriptを読み込む位置を指定できます。
基本はデフォルトのフッターでOKです。

CSS

基本はチェックしません。
目次デザインを1から自分で指定したい場合は、チェックしてください。

Inline CSS

チェックをすると、読み込みを早くできます。
ただし、チェック後目次の表示が崩れていないか確認してください。

崩れるようであれば、チェックを外しましょう。

見出し

チェックをした見出しタグが目次に自動挿入されます。
h2〜h3もしくはh4くらいまでチェックしておけばよいでしょう。

記事ごとにも設定できます。

除外する見出し

特定の見出しをキーワードで除外できる機能です。
基本使いません。

SiteNavigation Schema

用途不明

スムーズスクロールのオフセット

こちらでスクロールを滑らかにするにチェックを入れたかつ、当サイトのようにヘッダーを固定追従させている場合のみ、指定します。

ヘッダーを固定させると、その縦幅の分”目次のスクロール位置”がズレます。

パソコンとスマホでは、ヘッダーの幅が違うため、それぞれ微調整する必要があります。

パス制限

パス（記事URLの一部）を指定することで、特定の記事だけに目次を表示させることができます。
ただ記事ごとに表示/非表示の設定ができるため、基本使わないかと思います。
例えば、カテゴリーやタグなど、大きな枠組みで指定するのはありかもしれません。

Exclude By Matching Url/String

URLを指定することで、目次を非表示にできます。
先ほどと逆ですが、こちらも滅多に使うことはないでしょう。

デフォルトのアンカー接頭辞(せっとうじ)

通常アンカー用のidは、英数字しか指定できません。
しかし我々は日本語で見出しを作るため、見出し内に英数字がない場合は、ここで指定した文字が適用されます。

デフォルトでは「i」が指定されています。
特に指定する必要はないでしょう。

Default Anchor Prefix For All

言語に関係なく、デフォルトのアンカー接頭辞を上記で指定したものにします。

ウィジェットの固定セレクタ

テーマ側に追尾サイドバー項目がない方は、こちらにidまたはclassを指定すると、以下のようにサイドバーに目次を固定できます。

ここでいうidやclassは、目次のものではなくサイドバー全体のものです。

そのため、目次だけを固定することができず、他のサイドバーも一緒に固定されてしまいます。
使い勝手が悪いので、基本は設定不要です。

Add Request URL

用途不明

Remove form TOC Title

用途不明

Show Page title in TOC

用途不明

Disable TOC in RestAPI

用途不明

Generate TOC link ids

用途不明

Preserve Line Breaks

改行をつけた見出しを作成した場合、目次でも改行を維持します。

Ajax Load More

用途不明

Manual Adding the shortcode

ここで決めた任意のショートコードを使えば、どこにでも目次を呼び出すことができます。
ただし、一般設定の自動挿入をONにしている場合は、記事内でショートコードを追加する必要はありません。

Manual Adding widget shortcode

ここで決めた任意のショートコードを使えば、ウィジェットに使うことができます。
ただし、ウィジェットに目次項目がすでにあるため、基本は使いません。

Sticky TOC

チェックを入れると、画面のサイドに上記のような目次を入れることができます。
設定項目はたくさんありますが、通常の目次設定とだいたい同じです。
サイドバーに目次を設定してあれば、基本不要かと思います。

Create by Mediavine

用途不明

Goodlayers Core Builder

用途不明

Molongui Authorship

用途不明

Export Settings

これまでの設定をJSON形式でエクスポートできます。
他のサイトでも設定を引き継ぎたい場合に使いましょう。

Import Settings

エクスポートされたJSON形式ファイルはこちらから読み込みます。

Easy Table of Contentsのウィジェットの設定

ウィジェットに「目次」項目が追加されているので、そちらを設置したい場所に移動してください。
タイトル：サイドバー上部に表示される項目
外観にチェック。
Font Title Color：サイドバータイトルのカラー(他のサイドバーと合わせましょう)
タイトル文字サイズ：本文のフォントサイズに対して％指定
タイトル文字の太さ：500以下細字・600以上で太字
閲覧中セクションのハイライト：以下の部分

現在見ている本文の見出しに合わせて、サイドバーの見出し背景に色を付けてくれます。

テーマ側で指定されている場合、色被りがおきるため、目次側の設定は#fffにしておくのがおすすめです。

投稿が見つかりません。

Easy Table of Contentsの投稿画面を設定

投稿画面の一番下に目次の設定が表示されています。
ここで投稿ごとに調整することができます。

目次の自動挿入を無効にします。

チェックを入れると、その投稿だけ目次を消すことができます。
なおサイドバーの目次は消えません。

見出しラベル

目次のタイトルを個別に指定できます。

Alignment

目次の位置を指定できます。
基本変更不要しません。

見出し

一般設定で指定した見出しの階層を変更できます。

初期状態

一般設定で目次の開閉を指定した場合のみ、閉じた状態で目次が表示されます。

Hide Counter

チェックをすると、目次内の見出し番号を削除できます。

見出しの差し替え

“本文の見出し“と”目次の見出し“を変更することができます。
例えば、本文では”検索キーワードを意識した文言“を書いておき、目次では”ユーザーがクリックしたくなる“または”より興味を持たせる”文言“を指定したい時に使いましょう。
記入例は以下を参考にしてください。

新NISA口座の開設方法|新NISA口座まだ開設していない奴いる？いねえよなぁ!!?
新NISAのデメリット|新NISA1ヶ月目でマイナス100万になった男の末路…

左側に本文の見出しを一言一句間違わずに入力「|半角バーティカルバー」で区切って、目次に表示したい文言を入力します。
※.大文字と小文字は区別されるため、注意してください。