• このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

【WordPress】簡単にできる!記事に目次をつけるプラグイン「Easy Table of Contents」

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

こんにちは!プロクラスの中山です。
急に暑い日が続いていますね…

最近、WordPress(ワードプレス)の講座を受講される方に「自分のブログを作りたい」とおっしゃる方が増えてきました!
少し前までは会社のホームページの更新方法の研修やお店のホームページを作りたいなど、お仕事で受講される方が大多数だったのですが、「自分の個人のサイトを作りたい!」という熱い想いを持った方が増えてきてとても嬉しいです 😳

今日はそんなブロガーさんたちにオススメの便利なプラグインをご紹介します!

WordPressの記事に目次をつけよう!

しっかりとした記事を書くと文字だらけで読みにくくなりますよね。読者の方がすぐに必要な内容の箇所にたどり着けるようにするために、「目次」をつけてみませんか?

ちなみに、見た目は、このページの上部にあるような感じになります。

ページ内の情報が整理されて読みやすくなる上、SEO対策にもなりますよ!

目次をつけるとなぜSEO対策にいいの?

目次は、クリックすると同じページの中の他の箇所に移動することができる「内部リンク」というものになります。Googleはリンクがついている文字の内容を読み取って「ふむふむ、このページにはこんな内容が書いてあるんだな」と理解します。
ページの中のそれぞれのブロックで何が書いてあるか、目次を見れば大事なポイントがわかるのでユーザーにもGoogleにもわかりやすいサイト構造になります!

また、このプラグインで目次をつけるには「見出し」というものを設置しなければいけません。(使い方はこの後ご紹介します)
見出しの中に「検索されるであろうキーワード」が含まれていると有利とされているので、普段から適切に見出しをつける癖をつけるのもSEO対策に効果的です。
オマケに、文章を整理して書くコツが身につきますね!

目次をつけるプラグイン「Easy Table of Contents」

「Easy Table of Contents」プラグインのインストール方法

  • まずは管理画面のメインナビゲーション(左メニュー)にある「プラグイン」の中の「新規追加」をクリックします。
  • 続いて、検索窓に「Easy Table of Contents」と入力し、プラグインを探します。

    似たようなプラグインもたくさんあるのでご注意ください!

  • 見つかったら「インストール」を押して、プラグインのファイルを自分のサイト内に保存します。
  • 「インストール」だけではプラグインが動いていない状態なので、「有効化」をクリックすればOKです。

※または、下記よりプラグインのファイルをダウンロードいただけます。
>>Easy Table of Contentsのページ

さて、これで下準備は完了です!この後少し設定をしましょう。

プラグインの初期設定

お持ちのサイトのバージョンや環境によって、日本語化されない場合もありますが、設定はかんたんなのでご安心ください!

プラグインが有効化されると下記のように青いバーがついた状態になります。
「設定」(または英語の場合は「Settings」)というボタンが表示されますので、クリックして設定画面を開きましょう。

日本語の場合

英語の場合

下記のような設定画面が表示されます。
後からでも変えることができるので、迷った方はとりあえず適当に設定して画面を見てから直しましょう!

まずはどの投稿タイプで目次機能をONにするかを設定しましょう。

一番上のチェックボックスの項目「サポートを有効化」の部分です。

「投稿」でも「固定ページ」でも、どちらでも目次を使えるようにする場合は両方にチェックを入れておきましょう!
これにチェックが入っていない投稿タイプでは目次を挿入できないので、初めにチェックしておきましょう。

目次は自動で表示するようにしますか?

次に、「自動挿入」の部分です。
これにチェックが入っている投稿タイプは、自動で目次が作られてページ内に挿入されます。
もし目次が不要なページがあれば、ページごとに非表示にすることもできますので、とりあえず「投稿」と「固定ページ」両方にチェックをつけておきましょう。

特定のページに目次をつけたいだけの場合は、ここにチェックはいれないで個別のページの編集画面で目次を表示する設定をしましょう。

目次を入れる位置はどこにしましょうか?

「最初の見出しの前」がもともと設定されているので、そのままでいいと思います。
もしページの一番初めに固定で表示したい場合は「上部」にしていただくといいでしょう。

何件以上見出しがあったら目次を表示したいですか?

あまりページの内容がない投稿には目次がなくても大丈夫ですね。
「見出しが何件以上あったら目次を生成する」という設定ができるのですが、ここはデフォルトの4件のままにしておきましょうか。お好みで設定してみてください。

見出しラベルを表示しますか?

「見出しラベルを表示」という部分にチェックをつけると、「見出しラベル」という欄に入力した文字が目次部分のタイトルになります。
表示したくない人はチェックを外しておきましょう。

その他、他にもいろいろなチェックボックスが並んでいますが、特に変更する必要のなさそうなものは飛ばします!

目次はどんな色にしますか?

続いて、目次のデザイン設定です。
元々の「グレー」がシンプルなデザインなのでどんなサイトでもだいたい大丈夫だと思いますが、見た目にこだわりたい方は「ライトブルー」「白」「黒」など違う色を選ぶことができます。

また、「カスタム」を選択してお好みの色に設定することも可能です!

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

プロクラスの「簡単ホームページ作成!はじめてのWordPress講座」を受講いただいた方はテーマのデザイン上、目次をクリックした時にヘッダー(タイトルやサイトメニューの部分)に文字が隠れてしまいます!

そのため、目次をクリックした時にヘッダーが被らないようにどれくらいずらしますか?という設定をしないといけません。

サイトのロゴやタイトルのサイズなどで若干変わると思いますが、私は「180px」、モバイルのオフセットを「80px」で設定してみました。
設定した後、目次を表示したら自分で押してみて文字が隠れないか確認してみてくださいね。

このように、文字がメニューに隠れてしまいます。

最後に、ページ一番下の「変更を保存」を押すのを忘れずに!
これで初期設定は完了です。

投稿に目次を表示しよう

初期設定が完了したら、あとは簡単です。
投稿や固定ページを書く時に、見出しをつけていきましょう!

プロクラスの講座を受講された方はやり方をお伝えしていますが、見出しにしたい文字の部分にマウスカーソルを合わせた状態で、編集画面上部にあるツールバーの中にあるプルダウンメニューを「段落」から「見出し2」や「見出し3」に変更します。

すると、テーマで設定された見出しのデザインに変わります。
※プルダウンメニューがない場合は「ビジュアル」というタブから「テキスト」というタブになっていないか確認してください。

ページの内容に合わせて、読みやすいように適宜見出しを作成していきます。
各ブロックにタイトルをつけていくような感じですね。見出しを見てページの中身がわかるように、あまり長くなりすぎないように内容をまとめましょう。

この見出しが4つ以上になったら、自動で見出しが生成されます。
(初期設定で自動挿入にチェックを入れている場合)

ページごとに見出しの表示/非表示を切り替える

初期設定で自動挿入にチェックを入れなかった方や、「このページでは見出しを表示したくない」という方は、各ページの編集画面の下の方に見出し設定が追加されているはずですので、そこで設定を変更します。

「目次を挿入します。」にチェックを入れると目次を表示することができ、反対に目次を消したい時はこのチェックを外します。

また、どのレベルの見出しを目次に使用するかを「見出し」のチェックで設定することが可能です。
あまり細かい目次は表示したくない場合は「見出し4」〜「見出し6」あたりはチェックを外しておいてもいいかもしれませんね。

さぁ、目次の完成です!

WordPressのプラグインを使えば、簡単に機能が増やせます!

いかがでしたしょうか?

情報発信のためのブログを作りたい!という方にとってはなかなか便利なのではないでしょうか?
自分で作るには面倒&難しい内容でも、WordPressをうまく活用すれば簡単に追加することができますよ!

その他、「こんなことはできないのかな?」「こんな機能があったらいいのに!」など、お持ちのホームページやブログでお困りのことがありましたらお気軽にご相談ください!

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
各地で開催中!

【簡単ホームページ制作!はじめてのWordPress講座】
受講者満足度95%以上の人気講座!

WordPress東京
【簡単ホームページ制作!はじめてのWordPress】講座詳細はこちら