PR ブログ

【徹底解説】Easy Table of Contentsの使い方&設定方法

2021年9月1日

Easy Table of Contentsにわからない設定があります。
初心者でも設定できますか?

このような、Easy Table of Contentsを使いこなしたい方向けの記事です。

Easy Table of Contentsは初心者でも使いやすく、機能に特化した人気のある目次プラグインです。

今回はそんなEasy Table of Contentsの使い方や設定方法を画像付きでわかりやすく解説します。

参考:【完全解説】AFFINGER6で目次を表示する方法4選!【限定特典あり】

Easy Table of Contentsとは?

まず、目次プラグインの「Easy Table of Contents」の特徴は以下の通りです。

主な特徴

  • 投稿、固定ページ、カスタム投稿などに目次を自動挿入できる
  • CSSなしでも簡単にデザインがカスタマイズできる
  • サイドバーに目次を表示したり、記事別に目次を編集できる

機能性も高く、デザインもカスタマイズできるので、ブログ初心者さんにも優しいプラグインです。

デフォルトのデザインは以下のような感じです。(設定でデザインをカスタマイズできます)

Easy Table of Contentsとは?

WordPressテーマによっては、デザインがおかしくなる事があるので注意しましょう。

設定画面は日本語に対応していて使いやすいですが、わかりにくい設定もあったので詳しく解説します。

Table of Contents Plusとの違い

Easy Table of Contentsと似ているプラグインにTable of Contents Plusがありますが、機能に大きな違いはないので気に入った方を選びましょう。

ただ、WordPressテーマによって相性が変わる事があります。

例えば、SANGOはEasy Table of Contents、AFFINGER6はTable of Contents PlusのオリジナルCSSが用意されています。

Easy Table of ContentsとTable of Contents Plusを比較したい方は以下の記事がおすすめです。

関連記事
【TOC+】目次プラグインTable of Contents Plusの使い方【初心者向け】
【TOC+】目次プラグインTable of Contents Plusの使い方【初心者向け】

続きを見る

※AFFINGER6は、専用プラグインの「すごいもくじ」の方が相性がいいかもしれません。(すごいもくじの詳細)

Easy Table of Contentsをインストールする方法

まず、管理画面から「プラグイン」➡︎「新規追加」の検索欄に「TOC」と入力すると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の使い方・設定方法

使い方①:一般設定

使い方①:一般設定
一般
サポートを有効化個別設定ができるページを選択。
自動挿入目次を自動挿入するページを選択。
位置目次が挿入される位置、「最初の見出しの前」が基本。
表示条件見出しがいくつあれば目次を表示するか。
見出しラベルを表示目次にラベル(タイトルテキスト)を表示する。
見出しラベル目次のタイトルテキストを入力、例:「目次」「記事の内容」など。
折りたたみ表示読者の表示・非表示の選択を許可する。
初期状態初期状態は目次を閉じた状態(非表示)にするか。
ツリー表示目次の見出しに階層を表示する。
カウンター見出しの左に数字を表示する。
スクロールを滑らかにする見出しのクリック時にスムーズに動かす。

少しわかりづらいかもですが、画像に表すと以下のような感じです。

目次の画像

使い方②:外観設定

使い方②:外観設定
外観
目次の幅をカスタマイズ、Autoは自動。
カスタム幅自分で幅の数値を入力できる。
回り込み位置を右側か左側か選べる。
タイトル文字サイズ目次のラベル(タイトルテキスト)の文字サイズ。
タイトル文字の太さ上が細く、下が太い。
文字サイズ見出しの文字サイズ

「テーマ」では背景の色を選択でき、カスタムを選択すると自分でカスタマイズできます。

設定項目

  • 背景色
  • 枠線色
  • タイトル色
  • リンク色
  • ホバー時のリンク色
  • 訪問済みリンク色

使い方③:高度な設定

使い方③:高度な設定
高度
小文字URL化された見出し部分を小文字にする。(基本ON)
ハイフネーションURL化された見出しの「_」を「-」にする。
ホームページ固定ページを表示したトップページに目次を表示する。
CSSプラグインのCSSを読み込まない。(自分でカスタマイズする方はチェック)
見出しチェックした見出しが目次に表示される。
除外する見出し入力した見出しが除外される。
スムーズスクロールのオフセット目次で移動した時の位置調節。
モバイルのスムーズスクロールのオフセット目次で移動した時の位置調節。(スマホのみ)
パス制限パスを入力すると特定のページで制限できる。
デフォルトのアンカー接頭辞目次をクリックした時のURLの最後の部分。
ウィジェット固定のセレクタサイドバーに目次を固定するとき、テーマのID,クラスを指定する。

除外する見出し

  • 「ブログ」➡︎「ブログ」という見出しが除外
  • 「ブログ*」➡︎「ブログ」で始まる見出しが除外
  • 「*ブログ*」➡︎「ブログ」がどこかに含まれていると除外
  • 「ブログ|WordPress|プラグイン」で複数除外

設定が完了したら、「変更を保存」をクリックしましょう。

使い方④:サイドバーに表示させる方法

まず、WordPress管理画面の「外観」➡︎「ウィジェット」から目次を選択し、サイドバーに追加しましょう。

使い方④:サイドバーに表示させる方法

「閲覧中セクションのハイライト色」とは目次の現在位置を表示する時の、背景色です。

使い方⑤:記事別に設定を変更する方法

設定を変更する前に、「設定」➡︎「目次」➡︎「サポートを有効化」の「投稿」にチェックを入れましょう。

設定したい記事の下に「Table of Contents」という項目が追加されているはずです。

設定できる項目

  • 目次の挿入
  • 見出し
  • 見出しの差し替え
  • 除外する見出し

このように、設定画面の「高度」が記事別に選択できます。

まとめ

今回は「Easy Table of Contents」の使い方やインストール方法について解説しました。

WordPressテーマによってはEasy Table of Contentsと相性が悪いことがあるので、他のプラグインも調べてみてください。

有名なプラグインだと、Table of Contents Plus(TOC+)がおすすめですね。
TOC+については、以下の記事にまとめています。

【徹底解説】Easy Table of Contentsの使い方&設定方法

プラグインとの相性がいいと、カスタマイズが簡単になり、ページ表示速度の改善にもなるので、ぜひ確認しておきましょう

-ブログ