![](https://hakobublog.com/wp-content/uploads/2021/06/2D413595-438C-4812-8D7E-1D9705F172C9-e1625647246434.png)
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とは?](https://hakobublog.com/wp-content/uploads/2021/08/ダミー-はこぶブログ-2.png)
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の使い方【初心者向け】
続きを見る
※AFFINGER6は、専用プラグインの「すごいもくじ」の方が相性がいいかもしれません。(すごいもくじの詳細)
Easy Table of Contentsをインストールする方法
まず、管理画面から「プラグイン」➡︎「新規追加」の検索欄に「TOC」と入力するとEasy Table of Contentsが表示されるので、インストールしましょう。
![Easy Table of Contentsをインストールする方法](https://hakobublog.com/wp-content/uploads/2021/08/プラグインを追加-‹-はこぶブログ-—-WordPress-4.png)
インストールできたら、有効化をクリックしてください。
![](https://hakobublog.com/wp-content/uploads/2021/08/プラグインを追加-‹-はこぶブログ-—-WordPress-2-1.png)
これで、Easy Table of Contentsが使えるようになりました。
ちなみに、Easy Table of ContentsはWordPressの公式ページからもダウンロードできます。
Easy Table of Contentsの使い方・設定方法
Easy Table of Contentsの設定は管理画面の「設定」➡︎「目次」からできます。
![Easy Table of Contentsの使い方・設定方法](https://hakobublog.com/wp-content/uploads/2021/08/目次-‹-はこぶブログ-—-WordPress.png)
使い方①:一般設定
![使い方①:一般設定](https://hakobublog.com/wp-content/uploads/2021/08/目次-‹-はこぶブログ-—-WordPress-1-2.png)
一般 | |
サポートを有効化 | 個別設定ができるページを選択。 |
自動挿入 | 目次を自動挿入するページを選択。 |
位置 | 目次が挿入される位置、「最初の見出しの前」が基本。 |
表示条件 | 見出しがいくつあれば目次を表示するか。 |
見出しラベルを表示 | 目次にラベル(タイトルテキスト)を表示する。 |
見出しラベル | 目次のタイトルテキストを入力、例:「目次」「記事の内容」など。 |
折りたたみ表示 | 読者の表示・非表示の選択を許可する。 |
初期状態 | 初期状態は目次を閉じた状態(非表示)にするか。 |
ツリー表示 | 目次の見出しに階層を表示する。 |
カウンター | 見出しの左に数字を表示する。 |
スクロールを滑らかにする | 見出しのクリック時にスムーズに動かす。 |
少しわかりづらいかもですが、画像に表すと以下のような感じです。
![目次の画像](https://hakobublog.com/wp-content/uploads/2021/08/ダミー-はこぶブログ-1.png)
使い方②:外観設定
![使い方②:外観設定](https://hakobublog.com/wp-content/uploads/2021/08/目次-‹-はこぶブログ-—-WordPress-1-3.png)
外観 | |
幅 | 目次の幅をカスタマイズ、Autoは自動。 |
カスタム幅 | 自分で幅の数値を入力できる。 |
回り込み | 位置を右側か左側か選べる。 |
タイトル文字サイズ | 目次のラベル(タイトルテキスト)の文字サイズ。 |
タイトル文字の太さ | 上が細く、下が太い。 |
文字サイズ | 見出しの文字サイズ |
「テーマ」では背景の色を選択でき、カスタムを選択すると自分でカスタマイズできます。
設定項目
- 背景色
- 枠線色
- タイトル色
- リンク色
- ホバー時のリンク色
- 訪問済みリンク色
使い方③:高度な設定
![使い方③:高度な設定](https://hakobublog.com/wp-content/uploads/2021/08/目次-‹-はこぶブログ-—-WordPress-1-2-1.png)
高度 | |
小文字 | URL化された見出し部分を小文字にする。(基本ON) |
ハイフネーション | URL化された見出しの「_」を「-」にする。 |
ホームページ | 固定ページを表示したトップページに目次を表示する。 |
CSS | プラグインのCSSを読み込まない。(自分でカスタマイズする方はチェック) |
見出し | チェックした見出しが目次に表示される。 |
除外する見出し | 入力した見出しが除外される。 |
スムーズスクロールのオフセット | 目次で移動した時の位置調節。 |
モバイルのスムーズスクロールのオフセット | 目次で移動した時の位置調節。(スマホのみ) |
パス制限 | パスを入力すると特定のページで制限できる。 |
デフォルトのアンカー接頭辞 | 目次をクリックした時のURLの最後の部分。 |
ウィジェット固定のセレクタ | サイドバーに目次を固定するとき、テーマのID,クラスを指定する。 |
除外する見出し
- 「ブログ」➡︎「ブログ」という見出しが除外
- 「ブログ*」➡︎「ブログ」で始まる見出しが除外
- 「*ブログ*」➡︎「ブログ」がどこかに含まれていると除外
- 「ブログ|WordPress|プラグイン」で複数除外
設定が完了したら、「変更を保存」をクリックしましょう。
使い方④:サイドバーに表示させる方法
まず、WordPress管理画面の「外観」➡︎「ウィジェット」から目次を選択し、サイドバーに追加しましょう。
![使い方④:サイドバーに表示させる方法](https://hakobublog.com/wp-content/uploads/2021/08/ウィジェット-‹-はこぶブログ-—-WordPress.png)
「閲覧中セクションのハイライト色」とは目次の現在位置を表示する時の、背景色です。
使い方⑤:記事別に設定を変更する方法
設定を変更する前に、「設定」➡︎「目次」➡︎「サポートを有効化」の「投稿」にチェックを入れましょう。
設定したい記事の下に「Table of Contents」という項目が追加されているはずです。
設定できる項目
- 目次の挿入
- 見出し
- 見出しの差し替え
- 除外する見出し
このように、設定画面の「高度」が記事別に選択できます。
まとめ
今回は「Easy Table of Contents」の使い方やインストール方法について解説しました。
WordPressテーマによってはEasy Table of Contentsと相性が悪いことがあるので、他のプラグインも調べてみてください。
有名なプラグインだと、Table of Contents Plus(TOC+)がおすすめですね。
TOC+については、以下の記事にまとめています。
【徹底解説】Easy Table of Contentsの使い方&設定方法
プラグインとの相性がいいと、カスタマイズが簡単になり、ページ表示速度の改善にもなるので、ぜひ確認しておきましょう。