MENU

運営中のサブブログ

主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。

マンニメバナー画像

趣味の1つ漫画アニメについて書いています。
鬼滅のレビューはコメント600件以上きました。

カゲオ
サイト管理人
当ブログはWordPressが今より楽しく、便利になるをテーマに分かりやすい解説記事を心がけています。
サブブログ|デスク環境構築サイト運営中⇒見てみる

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

当ページのリンクには広告が含まれています。
Easy Table of Contentsの使い方

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

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

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

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

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

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

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

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

目次

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

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

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自動挿入

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

位置

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見出しラベル

Toggle on Header Text

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

Header Label Tag

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

折りたたみ表示

easy-table-of-contents折りたたみ設定
easy-table-of-contents折りたたみボタン

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

目次を折りたたんだ状態
目次を折りたたんだ状態

目次を開いた状態
目次を開いた状態
検索結果の見出し

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

初期状態

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

ツリー表示

目次に段落をつけるか設定

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

段落ありの目次
段落ありの目次
段落なしの目次
段落なしの目次

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

カウンター

目次カウンター設定

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

目次カウンター小数点表示
小数点表示(連番アリ)
目次カウンター数字
数字(連番ナシ)
目次カウンターローマ字
ローマ字
目次カウンターなし
なし

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

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

Easy Table of Contents Headings Padding設定

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

タイトル文字サイズ

目次タイトル調整
目次タイトル

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

タイトル文字の太さ

目次のフォントサイズ

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

目次タイトル細字
細字バージョン
目次タイトル太字
太字バージョン

文字サイズ

目次文字サイズ設定

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

目次の見出しサイズ

Font Weight

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

Child Font Size

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

テーマ

目次デザインをカスタム指定

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

カスタムテーマ

目次カスタムカラー
目次カラー設定のサンプル

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

Easy Table of Contentsの高度な設定

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

小文字

目次のアンカーに小文字設定

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

目次のアンカーサンプル

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

ハイフネーション

目次のハイフネーション設定

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

目次のアンカーハイフネーション

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

一応意味としては

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

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

ホームページ

トップページの目次設定

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

Category

チェックをすると、カテゴリーページにも目次を表示できます。

Tag

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

Product Category

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

Custom Taxonomy

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

Device Target

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

Load js In

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

CSS

目次のCSS設定

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

Inline CSS

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

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

見出し

目次の自動見出し設定

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

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

除外する見出し

目次から除外したい見出し

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

SiteNavigation Schema

用途不明

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

目次のスムーズスクロール設定

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

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

目次スクロール調整前
目次スクロール調整後

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

パス制限

目次のパス制限

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

Exclude By Matching Url/String

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

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

目次のアンカー接頭辞

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

目次アンカーidサンプル

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

Default Anchor Prefix For All

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

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

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

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

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

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

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のウィジェットの設定

Easy Table of Contentsサイドバー設定

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

目次ウィジェット閲覧中背景色

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

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

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

Easy Table of Contents投稿画面設定

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

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

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

見出しラベル

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

Alignment

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

見出し

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

初期状態

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

Hide Counter

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

見出しの差し替え

目次プラグイン見出し差し替え

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

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

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

除外する見出し

指定した見出しを目次から除外できます。
3つの指定方法があるため、それぞれ解説します。

見出し全文指定

指定した文字と「一致する見出し」を除外

除外したい見出しを一言一句間違わずに入力する方法です。
指定した文言は目次から削除され、その分の行間は自動で詰まります。

指定したキーワードから始まる見出しを除外

指定した文字から「始まる見出し」を除外

キーワードの後ろに「*(アスタリスク)」を付けることで、”指定した文字から始まる“見出しを除外できます。

指定したキーワードを含む見出しを除外

指定した文字列を「含む見出し」を除外

キーワードを「*アスタリスク」で囲むと、”指定した文字を含む“見出しを除外する

easy-table-of-contents表示条件

ただし除外した結果、一般設定で指定した見出しの表示条件数を下回ると、目次は非表示になりますので注意してください。

結論:Easy Table of Contentsは多機能過ぎる最強目次プラグイン

以上、目次プラグインEasy Table of Contentsの解説をしました。

いくつかわからない設定もありましたが、重要なところは押さえてあるかと思います。
テーマに目次表示機能がない方は、こちらのプラグインで目次を作成してみてください。

目次デザインをカスタマイズしたい方は以下もどうぞ。

当サイトで使用しているテーマなら、デフォルトで目次機能が用意されています。

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

Easy Table of Contentsの使い方

この記事が気に入ったら
フォローしてね!

シェアしていただけると励みになります
  • URLをコピーしました!

記事への質問等はこちらからどうぞ

コメントフォーム

※日本語が含まれない内容は投稿できません。

目次