あずきです🐥
WordPressにおけるおすすめなプラグインの1つ…
Easy Table of Contents
について、その導入手順と「基本的な設定方法」をブログ初心者さん向けに1から解説していきます
まず！
この「Easy Table of Contents」は、WordPressで投稿した記事ごとの「目次」を自動生成するためのプラグインです
具体的には、そのページ内に設置した「見出し」をもとに…
↑ こういった目次ボックスが、記事ごとで自動挿入されます
そもそも、WordPressの「目次作成」と言えば…
Table of Contents Plus（通称TOC＋）
というプラグインが有名ですが、ただ最近は「バージョンの更新」が長期間空いてしまっているケースも目立ち、徐々に…
Easy Table of Contents
が「新たな定番」になってきている印象です
ということで、今回は2つのステップで丁寧に解説していきます
- 「Easy Table of Contents」の導入手順【インストールと有効化】
- 「Easy Table of Contents」の基本的な設定方法
さっそく見ていきましょー🐥
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020
＼ 本気で戦うなら ／
―― 検証と改善を重ねた唯一無二のテーマ ――
「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』
今なら超時短ツール「タグ管理プラグイン（税込4,980円）」を無料配布中！
-
【愛用】「WING AFFINGER5」って実際どうなの？気に入ってる点・気になる点をガチレビュー【WordPressのおすすめテーマ／専業ブロガー4年目】
続きを見る
-
WordPressの「タグ管理」とは？どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化／一括修正が最強に便利】
続きを見る
注意
プラグインを使用することで、ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります。 プラグインの使用に際しては、あらかじめデータやファイルをバックアップされたうえで、ご自身の責任にて行ってください
目次
【2021年版】WordPressプラグイン「Easy Table of Contents」の導入手順と基本的な設定方法【ブログ記事の目次を自動作成】
ステップ①：プラグイン「Easy Table of Contents」をWordPressに導入する手順【インストール＆有効化】
はじめに…
プラグイン「Easy Table of Contents」の導入手順
について
WordPress管理画面の左側にある一覧メニューから…
↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう
つづいて、画面の右上にある…
↑ こちらの検索フォームに Easy Table of Contents と入力し、その下の検索結果から…
↑ このアイコンが目印のプラグイン「Easy Table of Contents」を探します
無事見つかったら…
↑ こちらの「今すぐインストール」ボタンをクリックし、このボタンが…
↑ このように「有効化」という表示に切り替わったことを確認したら、こちらの「有効化」ボタンもクリックして、プラグインの導入は完了です🐥
＼ 本気で成果にこだわるなら ／
―― 効果のある広告やリンクを徹底解析 ――
「超強力」なサイト改善と効率化！「AFFINGERタグ管理マネージャー3 + PVモニター」プラグインセット
※「STINGERタグ管理プラグイン3」のデータはそのまま使用できます
「WING AFFINGER5」及び「WING STINGER PRO2」専用プラグイン
ステップ②：プラグイン「Easy Table of Contents」の基本的な設定方法
つづいて2つ目のステップは…
「Easy Table of Contents」の基本的な設定方法
について
WordPress管理画面の左側にある一覧メニューから…
↑ 設定 ＞ 目次 をクリックしましょう
「Easy Table of Contents」の設定画面が開いたら、ここから「3つ」の設定エリアにわけて設定を行っていきます
- 一般
- 外観
- 高度
【一般】エリアの設定
プラグイン「Easy Table of Contents」の設定画面を開いたら、まずは1番上側にある…
↑ こちらの、左上に 一般 と表示されているエリアの設定から行っていきましょう
設定内容に唯一絶対の正解はありませんが、ここでは自分が実際に行っている設定をもとにご紹介していきますね🐣
【一般】エリア：「サポートを有効化」
↑「サポートを有効化」の項目では、今回行っている「全体」の設定とは別で…
投稿・固定ページなどの編集画面
の1番下側に、「Easy Table of Contents」専用の設定エリアを追加するかどうかを指定できます
具体的には…
↑ このような設定エリアが、投稿や固定ページの各編集画面に「個別」で追加されます
で、基本的には…
↑ このように…
- 投稿
- 固定ページ
という2項目にチェックを入れておくのが無難です
【一般】エリア：「自動挿入」
↑「自動挿入」の項目では、目次を自動作成する対象の「投稿タイプ」を指定できます
こちらも、さきほどと同様に…
↑ この…
- 投稿
- 固定ページ
の2項目を入れておきます
補足
「有効化済みの投稿タイプにのみ自動挿入します」という注釈がありますが、実際に試してみたところ、「サポートを有効化」の項目で仮にチェックを外しても、こちらの「自動挿入」にチェックを入れていれば目次は無事表示されました
【一般】エリア：「表示条件」
↑「表示条件」の項目では、「見出しが●件以上ある場合に、目次を自動で表示」といったルールを指定できます
こちらの件数は任意ですが、通常は…
↑「3件」くらいにしておくと無難だと思います
【一般】エリア：「見出しラベル」
↑「見出しラベル」の項目では、実際に表示される目次のなかの…
↑ こちらの「タイトル部分」の名前を指定できます
ここの名称もお好みですが、基本は…
↑「目次」などにしておくと、シンプルかつわかりやすくておすすめです
【一般】エリア：「初期状態」
↑「初期状態」の項目では、記事にアクセスして表示される目次の状態を…
↑ このように、最初は「閉じた状態」にするかどうかを指定できます
こちらも任意ですが、個人的には…
↑ チェックを入れておくのがおすすめです
「そもそも目次の存在をすべてのユーザー（＝訪問者）が求めているか？」と考えたときに、必ずしも「そうではない」という層もいると思うので…
- 目次を見ないユーザーのために、基本は「クローズ」にして邪魔にならないように
- そのうえで、目次が必要なユーザーには、その都度自分で「オープン」してもらう
という形が1番無難じゃないかなという判断です
【一般】エリア：「カウンター」
↑「カウンター」の項目では、目次に表示される見出しリストの頭に…
見出しの階層
がパッとわかるよう「数字」を自動で割り振るかどうか、またその「表示タイプ」を指定できます
具体的には…
↑ こちらの部分ですね
関連
「そもそも見出しってなに…？ 階層ってどういう意味？」という場合は、こちらをどうぞ ↓
-
WordPressブログの「見出し」とは？H1・H2・H3…の作り方＆使い分けのポイント【記事の階層を作る】
続きを見る
ただ個人的には…
↑「なし」に設定しておくのがおすすめです
この「カウンター」は一見すると便利な機能ですが、仮に「そもそも自分で数字を入れてしまっている」というパターンもあるかもしれないので、その場合…
頭の数字が重複
してしまい、かえってわかりづらくなる可能性があるためですね
ということで…
【一般】エリアのそのほかの項目については、通常デフォルトのままで問題ありません🐥
【外観】エリアの設定
同じく「Easy Table of Contents」の設定画面から、今度は…
↑ こちらの、左上に 外観 と表示されている設定エリアを行っていきます
【外観】エリア：「幅」「カスタム幅」
↑「幅」と「カスタム幅」の項目では…
- まず「幅」の項目で、目次ボックスの「横幅サイズ」をいくつかの選択肢から選ぶ
- 「幅」の選択肢では足りないという場合のみ、「カスタム幅」の項目から細かく指定
することができます
こちらも任意ですが、参考までに自分は…
↑ このように…
- 幅 ユーザー定義
- カスタム幅 95%
という設定にしています（デフォルトの「Auto」は個人的にしっくりきませんでした）
ちなみに「100%」だと、スマホ画面で確認したときに左右の ”ぐらつき” が気になったので、結果「95%」に落ち着きました※
※使用しているWordPressテーマを始め、WordPressの環境などによっても変わる可能性がります
【外観】エリア：「タイトル文字サイズ」「タイトル文字の太さ」
↑「タイトル文字サイズ」と「タイトル文字の太さ」の項目では、目次のタイトルにあたる部分（例 目次 / コンテンツ ）の…
- フォントサイズ
- 太さ
をそれぞれ指定できます
こちらも絶対の正解はありませんが、自分はいろいろ試してみた結果…
↑ こちらの…
- タイトル文字サイズ 100%
- タイトル文字の太さ Bold
に落ち着きました
【外観】エリア：「テーマ」「カスタムテーマ」
↑「テーマ」の項目では、表示される目次の「デザイン」をいくつかのテンプレートから選択できます
特にこだわりがなければ、デフォルトの「グレー」のままが無難だと思います
ちなみに！
用意されているテンプレートは使わずに、「自分で細かく決めたい！」という場合は…
↑ こちらの「カスタム」を選択したうえで、その下の…
↑「カスタムテーマ」という項目から、任意のカラーを指定していく形です
参考までに、自分は「サイト全体」の配色と統一感をもたせるために…
- 背景色 #ffffff
- 枠線色 #ebebeb
- タイトル色 #515151
- リンク色 #0044cc
- ホバー時のリンク色 #2a6496（デフォルトのまま）
- 訪問済みリンク色 #428bca（デフォルトのまま）
↑ こちらのカラーでそれぞれ設定しています
実際の画面で見ると…
↑ このようなイメージです
ということで…
ここまでできたら、【外観】エリアのそのほかの項目については、通常デフォルトのままでOKです🐥
【高度】エリアの設定
同じく「Easy Table of Contents」の設定画面から、今度は…
↑ こちらの、左上に 高度 と表示されているエリアについて設定していきます
【高度】エリア：「見出し」
↑「見出し」の項目では、目次に表示させる見出しの「階層」を指定できます
あまり深い階層まで表示させてしまうと、記事によっては ”冗長” な目次となって「かえって不便」になりかねないので、基本的には…
↑「見出し1」～「見出し3」までにチェックを入れておけば無難です
ちなみに！
「見出し1（＝記事タイトルのこと）」を目次に載せるかどうかは任意ですが、自分は入れた方が「主題が伝わりやすい」かなと思っています
【高度】エリアのそのほかの項目については、通常デフォルトのままでOKです
ということで…
最後に「変更を保存」ボタンを忘れずにクリックしたら、「Easy Table of Contents」の基本的な設定は完了となります🐥
▼ WordPressの基本的な記事作成については、こちらをどうぞ ▼
-
【2020年】ワードプレスで記事を作って投稿しよう！【あずきのWordPressブログガイド／第7章TOP】
続きを見る
今回の記事はこちらの章に属しています
＼ このブログでも愛用中！ ／
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
✔ 洗練された美しいデザイン性と、「変幻自在」な圧巻のバリエーション！
✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現！
✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備！
今なら超時短ツール「タグ管理プラグイン（税込4,980円）」を無料配布中！
-
WordPressの「タグ管理」とは？どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化／一括修正が最強に便利】
続きを見る
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter（@azuki_rinrin）にわりといるので、覗いてもらえると嬉しいです^^