『しろくまフリーランス』は、現役フリーランス運営の「個人を豊かにする情報発信メディア」です。

Easy Table of ContentsでWordPressブログに目次を作成しよう【超簡単】

Easy Table of ContentsでWordPressブログに目次を作成しよう

本日はこのブログに目次を作っていく。
WordPressで目次をつくる定番プラグインは以下2つだが、本記事では『Easy Table of Contents』の導入・設定手順を解説していくぞ。

  1. Table of Contents Plus
  2. Easy Table of Contents ⬅︎今回はコチラ

どうしてブログに目次が必要なのか?

例として、本記事の執筆時点で、「【図解】エックスサーバーでWordPressブログをつくる全手順(ドメイン取得~サイト公開まで)」を表示すると次のようになる。

【図解】エックスサーバーでWordPressブログをつくる全手順(ドメイン取得~サイト公開まで)

この記事は作業内容を画像で説明しているため、どうしても記事が縦長になってしまい、途中まで読み進めた方が後から戻ってきづらい。
また、記事のどこに何が書いてあるのか読み進めないと判断できないため、読むことなく離脱してしまう方も多いだろう。

せっかく丹精込めて書いた記事なのに、読まれることなく眠っていくのは悲しい。
とはいえ、読者の皆様に無理やり読んでもらいたいわけではなく、きちんとお役にたてていただきたいという想いもある。

そのために登場するのが目次(Agenda)だ。

記事に目次があれば、

  1. 読むべきところが一瞬で分かる
  2. 読みたいところまでスキップできる
  3. 構成が頭に入るので、覚えやすい

など、読者の皆様にメリットを与えることができる。

くますた

ちなみに、私が超おすすめしているWordPressでブログを作ってくれていれば、専用プラグインを入れるだけで目次がつくれてしまうぞ。

Easy Table of Contentsの導入方法

さて、早速だが『Easy Table of Contents』の導入方法を解説しよう。
まずはプラグインのインストールからだ。

Easy Table of Contentsのインストール

WordPress(ワードプレス)の管理画面から、[プラグイン][新規追加]の順でクリックする。

Wordpressでプラグインを新規追加する手順

続いて、画面右上の検索欄に「Easy Table of Contents」と入力する。
2~3秒で、一番上に表示されるはずなので、[今すぐインストール]をクリックしよう。

Wordpressでプラグインを新規追加する手順

 

インストールは長くても10秒くらいで完了する。[有効化]しておくことも忘れずに。

Wordpressでプラグインを新規追加する手順

Easy Table of Contentsの初期設定

ここでは簡単な設定方法をご説明する。
デフォルトのままでもいいのだが、少しいじるだけでユーザーエクスペリエンスが高まるぞ。

管理画面に戻って、[設定][目次]の順でクリックする。

 

目次を表示する投稿タイプを選ぶ

WordPress(ワードプレス)の投稿タイプには、

  • 投稿
  • 固定ページ

の2種類がある(その他は無視してOK)。

私は「投稿」のみで目次を表示するようにしている。

くますた

固定ページでも目次を開きたい方は、「固定ページ」にもチェックをいれれば表示されるようになるぞ。

 

細かい設定

ここで、目次の細かい設定を行っていく。

位置 最初の見出しの前(デフォルト)
表示条件 3(2でもいい)
見出しラベルを表示 ✔︎をいれる
見出しラベル 「この記事の目次」など、好きな項目を入力する
折りたたみ表示 ✔︎をいれる
※ユーザーの利便性が上がる
初期状態 ✔︎しない
ツリー表示 ✔︎をいれる
カウンター 数字
スクロールを滑らかにする ✔︎をいれる

くますた

この辺は好みによって変えてくれてOKだぞ!

見出し

ここは結構重要な設定だ。
私は見出し2(h2)と見出し3(h3)のみ✔︎することにしている。

くますた

見出し4(h4)までチェックしてしまうと、記事によっては目次がとても長くなってしまうからだ。

変更を保存

最後に[変更を保存]をクリックすれば、目次作成は完了だ。

簡単にカスタマイズしてみよう

デフォルトだと目次デザインがなかなかダサい。
設定画面から少しカスタマイズしていこう。CSSやHTMLの知識はいらないから安心してほしい。

【3分で完成】Easy Table of ContentsでWordPressブログに目次を作成しよう【知識不要】

設定で「外観」を変更する

設定次第でいくらでも見た目は変わるが、参考に私の設定をここに晒そう。

【3分で完成】Easy Table of ContentsでWordPressブログに目次を作成しよう【知識不要】

実際の目次はこんな感じで表示される。

【3分で完成】Easy Table of ContentsでWordPressブログに目次を作成しよう【知識不要】

これ以上の見た目をよくしたい、もっとおしゃれな感じにしたければ、以下記事を参考にCSSカスタマイズをおすすめするぞ。

WordPressにおしゃれな目次を表示できるEasyTOCの使い方とCSSコードサンプル

Easy Table of Contents・オシャレな目次のCSSカスタマイズ | カゲサイ

プラグイン『Easy Table of Contents』でデザインされたカラフルな目次を自動生成する設定方法

1 COMMENT

現在コメントは受け付けておりません。

error: