Norifumi Nakazono's Blog.

【コピペで完成】WordPressで目次を作る方法【プラグイン不要も解説】

HOW TO WORDPRESS

WordPressの記事で目次を作りたい人「WordPressでブログを投稿するときに目次を作りたい…。でも、あまりプラグインには頼りたくないので、プラグインを使わない簡単な方法も教えてほしいなぁ。」

今回の記事では、上記のような悩みの解決をお手伝いします。

こんにちは、ゾノです。

この記事を書いている僕は、現役でWebデザイナー&マーケターとして活動しつつ、ブログを運営しながら生活しています。今では、外出せずに学べるパソコン教室を運営し、ブログ初心者に特化したブログ指導活動にも取り組んでいます。

本記事の内容

動画で見る(所要時間:8分47秒)

WordPressで目次を作る方法は、2つ知っておけばOK

WordPressで目次を作る方法は、2つ知っておけばOK
WordPressで目次を作るための、2つの簡単な方法をまとめます。

  • Table of Contents Plusを使用する
  • ページ内リンク(id属性)を使用する
結論:当ブログでは「ページ内リンク(id)を使用する」で実装しています。

Table of Contents Plusを使用する

WordPressで目次を作るためのプラグインです。
プラグインに関しては、下記の記事で解説していますのでご覧ください。
» WordPressおすすめプラグインは10個です【初心者必読】

簡単に設定できるので、便利なのですがプラグインの入れすぎは避けたいので、当ブログでは使用していません。
メリットとデメリットについては、下記のとおりです。

メリット

  • プラグインを有効化するだけで、簡単に目次を出せる

デメリット

  • クリック先が、若干だけズレる(修正が必要)
  • プラグインに依存することになる

と言っても、便利なプラグインなので使用してみてもいいと思います。
僕が運営する「WEBビジネス学園」のTable of Contents Plusの設定画面のスクショを公開しておきます。
「WEBビジネス学園」のTable of Contents Plusの設定画面のスクショ

ページ内リンク(id属性)を使用する(おすすめ)

WordPressで目次を作るときに、僕が当ブログで使用している方法はこちらです。
メリットとデメリットについては、下記のとおりです。

メリット

  • クリック先に、ピッタリと移動する
  • プラグインに依存しない

デメリット

  • HTMLを、若干理解する必要がある(2つだけ)

仕組みは、ページ内リンクを使ってページ内で移動させるものです。

実際のソースコードです。

<a href="#p_link">こちらをクリックすると導入部分に移動します</a>

見出し2の設定(移動先)

<p id="p_link">移動先</p>

仕組み

#p_link」 → 「p_link」へ移動します

注意

1ページに、複数のページ内リンクを設置する場合は、「p_link」の名称はそれぞれ別のものに設定してください。

以上です。

WordPressで目次を作るのは、見出し2だけでOK

WordPressで目次を作るのは、見出し2だけでOK
WordPressの目次設定では、見出し2(H2)まででOKだと感じるので、その理由についてまとめます。

  • 見出し3、見出し4などに移動する必要があるか
  • 見出しごとにジャンプされると、記事全体を見てもらえない

この2つについて、詳細を見ていきます。

見出し3、見出し4などに移動する必要があるか

結論、ないと思います。
なぜなら、見出し3や見出し4は見出し2に紐付くものなので、単発で読んでも、記事の本質に触れていただくことは困難だからです。

例えば、こんな感じ誘導ならOKです。

  1. ページを開く
  2. 記事タイトルを見る
  3. 興味のある「見出し2」をクリックして移動
  4. 読む
  5. ページ全体に興味を持ち、トップに戻る
  6. 最初から読んでくれる

これは、理想的ですね。

見出しごとにジャンプされると、記事全体を見てもらえない

もっと理想を言えば、目次をクリックせずに、最初から最後まで読んでみたいと思えるようなブログの構成にするのがベストです。

ブログ全体のベストな書き方は、下記の記事でガッチリとまとめているのでチェックしてみてください。きっとかなり参考になると思います。
» 【ブログ書くことない】ブログ書き方テンプレートで解決【ひな形】

目次のクリックで、移動できなくてもOKです

ブログ記事=本です。

本は目次を見て、読みたいページまで自力で移動しますよね。

そして、その途中に興味があるキャッチフレーズがあると「お?」と思って立ち止まります。

なので、「クリックする → 読みたい場所に移動する」が必ずしもベストとは言えません。
ただ何となく、ブログではクリック → 読みたい場所に移動が主流になっているのはありますね。

個人的意見ですが、読者さんには最初から最後まで、サラ〜っとでもいいので全体的に目を通してほしいという考え方です。

WordPressで目次を作る仕組みと、ページ内移動の仕組みは同じ

WordPressで目次を作る仕組みと、ページ内移動の仕組みは同じ
WordPressでプラグインを使わないで、目次を作る方法はページ内移動(id属性)の仕組みを使えばOKです。

たとえば、同じページ内でも移動できたらいいな、と思うことってないですか。
もしあるのであれば、この方法を使えば解消できます。

手順は3つです。

  • 移動前(クリックする場所)の設定
  • 移動先(クリックしたら移動する場所)の設定
  • 移動するかチェックする

下記の動きは、ページ内リンクの実装イメージです

» こちらをクリックしてみてください
※ページ内移動します(移動先のソースコードを、コピペして使用してください)

これを使えば、ページ内リンクを設置することが可能です\(^o^)/

まとめ:WordPressの目次はプラグインを使用せず、シンプルにする

まとめ:WordPressの目次はプラグインを使用せず、シンプルにする
WordPressの目次で、見出し2〜5くらいまでガッツリ出しているサイトもありますが、効果はそんなにないと思います。

であれば、冒頭に「本記事の内容」or「本記事で理解できること」と書き、それらを見出し2(H2)として記事を書き進めることをおすすめします。

結果、シンプル・イズ・ベストの言葉のとおり、シンプルなブログがいいですね。

読者も読みやすく、筆者も管理しやすい。
これが最高です\(^o^)/

相談やお問い合わせ、ご依頼など

お気軽にメッセージください。
» お問い合わせ

Webマーケティング基礎知識の学習用に、「【入門ガイド】経験ゼロ→お金を生み出すブログを開始する完全マップ」をまとめました。

【入門ガイド】経験ゼロ→お金を生み出すブログを開始する完全マップ

ブログを使ったWeb集客の基本を学習したい方向け。本記事は初心者がブログを開設するために必要な基礎をまとめました。情報が変われば常にアップデートしていきます。これからWebマーケティングをを学びたい人や現在学習中の人は是非ご覧ください。

» 詳細を読む

当ブログと他のサイトの圧倒的な違いは様々な疑問や悩みを解決するために【無料体験レッスン】30分相談会(オンライン開催)に初回限定で参加できることです。

どうしても分からなかったり、1人で悩むことがあればご相談ください。
また質問やメッセージ、相談があればお気軽にお問い合わせください(*´∀`*)
» お問い合わせ

人気記事【Minimalカスタマイズ】マナブログをモデリングして、ブログを作る【manablog】

人気記事【目指せマナブログ】WordPressテーマコピー/相談チャット【無料】