特集・記事リスト 記事・特集リスト
資料ダウンロード 無料お役立ち資料
本サイトについて 本サイトについて
お問い合わせ お問い合わせ
閉じる

WordPress(ワードプレス)で目次を簡単に作成する方法

WordPressを利用してWebサイトを運営されている方が多いと思われますが 、目次のつけ方がよくわかりにくいと思った事はありませんか?目次にはサイトを訪れたユーザーに書いてある内容を簡潔に伝えたり、情報にいち早く到達してもらう役割があります。ユーザーの利便性向上のために、ぜひ導入しましょう。今回はご自身で目次をつける方法と、プラグインを使って自動で目次をつける方法を紹介します。

カテゴリ: WordPress

皆さんは、WordPressで作成した記事に目次を付けていますか?
目次には、サイトを訪れたユーザーにどんな記事であるか伝える役割や知りたい情報にいち早く到達してもらえるという役割があります。利便性向上のために、ぜひ導入することをおすすめします。

今回は、記事の目次を作成する方法をいくつか紹介します。自分に合った方法で記事に目次をつけ、ユーザービリティの高いサイトを目指しましょう。

目次の作成方法はプラグインによる自動化と手動で作成の2種類

WordPressにおいて、目次の作成方法は2種類あります。

1. プラグインを活用する
2. 記事作成時に自分で作成する

どちらもメリットデメリットはあります。 プラグインの場合、自動作成を設定することができ、
設定さえすれば、記事作成時に目次に関して手を煩わせることがありません。 しかし、プラグインの数を増やすとに比例してサイトの表示速度が遅く重くなってしまうというデメリットがあります。 自分で作成する場合、プラグインを使用しないためサイトが重くなるということはないものの、記事作成時に目次を入力するという手間が発生します。

メリット・デメリットを理解して自分のサイトに適した方法で作成しましょう。 この記事では、「Table of Contents Plus」「Easy Table of Contents」という2つのプラグインの設定方法と、自力で作成する方法を紹介します。

プラグイン「Table of Contents Plus」を使って目次を作成する方法

プラグイン「Table of Contents Plus」の特徴

プラグイン「Table of Contents Plus」とは、記事の目次を自動作成できる人気のあるプラグインです。H1からH6までの見出しを目次として自動生成してくれます。

特徴としては以下が挙げられます。
記事の目次を自動生成してくれる。
目次を表示する位置や表示内容を細かく設定できる。
投稿、固定ページ、カスタム投稿に対応している。
日本語対応である。
デザインも設定できる。
人間用のサイトマップを自動生成する機能も備わっている。

注意点は、記事の中に見出し用のHTMLタグ(H1〜H6)を記述しなければ目次が点だけで表示されることです。

特徴を抑えたところで、実際に使い方を見ていきましょう。

プラグイン「Table of Contents Plus」をインストールする

管理画面の右のメニューバーの「プラグイン」をクリックし、「新規追加」を選択します。

画面右上の検索フォームに「Table of Contents Plus」と入力します。

「今すぐインストール」をクリックし、その後「有効化」をクリックします。

基本設定の方法

管理画面の右のメニューバーの「設定」をクリックし、「TOC+」を選択します。

基本設定のタブでは、それぞれ以下の画像の通り設定ができます。
どの設定も選択した後には、画面下部の「設定を更新」をクリックすることで適用されます。クリックし忘れないようにしましょう。

それぞれ詳しく説明します。

位置

目次の表示位置を「最初の見出しの前、最初の見出しの後、上、下」のいずれかから指定できます

表示条件

目次の数を条件として、目次の表示非表示の設定ができます。例えば2に設定した場合、見出しが2つ以上ある場合に目次が表示されます。

以下のコンテンツタイプを自動挿入

どのようなタイプの記事に目次を入れるか決めることができます、postは投稿した記事、pageは固定ページを指しています。

見出しテキスト

目次にタイトルをつけるか決めることができます。デフォルトは、「Contents」です。目次タイトルとは以下の部分です。

ユーザーによる目次の表示・非表示を許可

目次をユーザー自身が折りたたむ(表示・非表示)ことを可能にするかいなかを設定できます。表示・非表示の際にクリックするリンクの表記も決められます。

また、目次全体を最初から表示するのか、非表示にするのかも設定可能です。

階層表示

階層表示とは、H1~6の見出しの違いを、目次にも反映させることです。階層表示の有無は、以下のように表示されます。

【階層表示になっている目次】

階層表示にしない場合は、インデントを下げずに表示されます。

【階層表示しない目次】

ページ綴り

目次に番号をつけるか否かを設定できます。数字を入れると以下の画像のような見出しになります。

入れない場合は数字の部分が消えます。

スムーズ・スクロール効果を有効化

目次をクリックし、該当の位置に移動する際に、スクロールにするか否かを設定することができます。クリックしない場合は、ジャンプと呼ばれ、画面が切り替わることで該当ページに移動する方法となります。

横幅

目次の横幅を固定値や相対値で決めることができます。

回り込み

テキストの回り込みを設定できます。

文字サイズ

目次の文字サイズを「pt、%、em」のいずれかの数値で指定ができます。

プレゼンテーション

目次のデザインが表示されており、好きなデザインを選択することが可能です。

上級者向けの設定方法

基本設定の下に「上級者向け」という記載があり、クリックするとより詳細な設定ができます。

ここではよく使われる機能を紹介します。

 

CSSファイルを除外

自分でCSSを書いて独自のデザインで目次を表示させたい場合、プラグインのCSSファイルを除外する設定をしておきます。この設定をしていないと、せっかく指定したデザインが崩れる可能性があります。

見出しレベル

デフォルトではh1-6の全てが目次として表示されるようになっていますが、目次に表示するレベルを選択することが可能です。

除外する見出し

特定のキーワードを含んだ見出しを目次から除外できます。

目次を表示させたくない記事がある場合

目次を表示させたくない記事がある場合は、その記事のビジュアルエディタに を貼り付けることで、表示されなくなります。

プラグイン「Easy Table of Contents」を使って目次を作成する方法

プラグイン「Easy Table of Contents」の特徴

特徴としては以下が挙げらます。
記事の目次を自動生成してくれる
記事ごとに目次の表示非表示や内容設定ができる
コンテンツごとに目次を表示するかどうか設定できる
日本語対応である
ページごとに目次挿入用のパネルが表示できる

特徴を押さえたところで、実際に使い方を見ていきましょう。

プラグイン「Easy Table of Contents」をインストールする

管理画面の右のメニューバーの「プラグイン」をクリックし、「新規追加」を選択。

画面右上の検索フォームに「Easy Table of Contents」と入力します。

「今すぐインストール」をクリックし、その後「有効化」をクリックします。

有効化しただけでは、目次は表示されません。設定の必要があります。
管理画面の右のメニューバーの「設定」をクリックし、「目次」を選択します。

「一般」の設定方法

一般の設定では、以下のような画面が表示されます。

それぞれ説明します。

サポートを有効化

目次を有効にする投稿のタイプを選択することができます。

自動挿入

目次を自動で挿入する投稿のタイプを選択することができます。

位置

目次見出しを表示する位置を「最初の見出しの前、最初の見出しの後、上部、下部」いずれかから選択できます。

表示条件

見出しの件数も条件に目次を表示する見出しの件数の条件を設定できます。

例えば2の場合、見出しが2つ以上あった場合に目次が表示されます。

見出しラベルを表示

目次のタイトルをつけるか否かを設定することができます。目次のタイトルとは以下の赤枠の部分です。

折りたたみ表示

目次を折りたたむ(非表示)にすることのできるボタンを設置するかどうかを設定できます。

初期状態

チェックすると初期状態で目次を折りたたむこと(非表示)ができます。

ツリー表示

階層構造で表示するか否かを設定できます。階層構造とは、以下の画像のような状態です。

チェックを外した場合、以下のように表示されます。

カウンター

目次の頭に付く数字の表記方法を「少数点表示、数字、ローマ数字、なし」から選択することができます。目次の頭の数字とは以下の部分です。

スクロールを滑らかにする

目次をクリックした際に、該当箇所に移動するスクロールを滑らかにするか否かを設定できます。

「外観」の設定方法

外観の設定画面は以下のとおりです。

目次の幅を設定することができます。 「Auto」とは自動で幅が調整されることです。「固定値(px)、相対(%)、カスタム(ユーザー定義)」から選択できます。

カスタム幅

上記の「幅」で「カスタム(ユーザー定義)」を選択した際に、目次の幅を「pr、%、em」のいずれかの数値で指定することができます。

回り込み

テキストの回り込みを「なし、右、左」から選択できます。

タイトル文字サイズ

目次タイトルの文字の大きさを「pt、px、%、em」のいずれかから数値で指定できます。目次タイトルとは以下の部分です。

タイトル文字の太さ

目次タイトルの文字の太さを以下から指定できます。下に行くほど太くなります。
・Thin
・Extra Lite
・Light
・Normal
・Medium
・Semi Bold
・Bold
・Extra Bold
・Heavy

文字サイズ

目次の文字サイズを「pt、px、%、em」のいずれかの数値で指定することができます。

テーマ

目次のデザインを指定することができます。以下の種類があります。
・グレー
・ライトブルー
・白
・黒
・透過
・カスタム

カスタムテーマ

上記の「テーマ」で、「カスタム」を選択した際に、目次の配色を細かく指定することができます。
背景色:目次の背景色(地の色)
縁線色:目次の縁の色
タイトル色:目次タイトルの色
リンク色:リンク部分の色(目次の見出しの色)
ホバー時のリンク色:リンク部分にマウスオーバーされた時の色
訪問済みリンク色:クリック済みのリンク部分の色

「高度」の設定方法

高度の設定では、より細かく目次の設定ができます。
中でもよく利用する設定について説明します。

CSS

CSSスタイルの読み込みをするか否かを設定できます。チェックを入れた場合CSSが読み込まれず、外観の設定が適用されなくなります。

見出し

h1-6の見出しのうち、どれを目次に含めるのかを設定できます。

除外する見出し

特定のキーワードが含まれている見出しを目次から除外することができます。

パス制限

特定のパスでは、目次の作成を制限することができます。

プラグインなし!自力で作成する方法

ここまで、プラグインを用いて目次を作成する方法をご紹介してきましたが、ここからはプラグインに頼らない方法をお伝えします。

簡単!ページリンクなしの目次

目次はページリンクが付いているのが一般的ですが、リストとしての目次で十分である場合には、この方法で作成することができます。ページリンクを設定する必要がない分、簡単に作成可能です。

テキストエディタにて、目次の初めに、<ul>を記入

それぞれの見出しの前に<li>を記入し、それぞれの見出しの後に</li>を記入

見出しの最後に</ul>を記入

以下のようになります。

ビジュアルエディタであればリストボタンから選択することで簡単に設定できます。

リストボタンで挿入すると以下のようになります。

ページリンク付き目次の作成方法

ページリンクなしで作成した目次にリンクを追加すればページリンク付きの目次も作成可能です。

まず、それぞれの「見出し」をaタグで囲みます。

全部行うと、以下のようになります。

なお、「見出し1」を選択した後に「linkボタン」を選択し、URLを記入するテキストボックスに「#」を記入し、「リンク追加」をクリックするでも同じことができます。

次にリンク先である見出しにの変更を加え行います。

リンク先の見出しの<h2>と記入されいる部分を<h2 id=”anker◯”>に書き換えましょう。◯には数字を入れます。

この「anker1」がリンク先の目印になるので、目次の「#」の後に追加します。

見出しそれぞれに同じ作業を行うと、以下のようになり、完成です。

見出しの大小を区別する目次

「見出し1」の中に「目次1−1」や「目次1−2」など中見出しが含まれている場合には、入れ子表示の設定を行います。

liタグ内にulタグを入れ込むことで可能になります。
見出し1に見出し1−1、1−2、1−3という中見出しがある場合には以下のようになります。

 

目次に番号をつけたい場合

目次に番号をつけたい場合もあるかと思います。そのような場合には、<ul>を<ol>に変更してください。

まとめ

WordPressにて目次を作成する方法をご紹介しました。プラグインで、自動で作成するのはとても手軽です。一方で、プラグインは入れすぎると重くなってしまうという懸念点もあります。また、自作で目次を作成することは、とても難しいわけではありません。すでに多くの記事がある場合には手間がかかってしまいますが、新たなサイトを立ち上げる際には検討してみてください。
自分に合った作成方法で目次を設置し、よりユーザビリティの高いサイトを目指しましょう。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

須藤 一樹

Webディレクター/コンサルタントの須藤です。大手企業から少数ベンチャーまで様々な規模のチームに加わり、主にオウンドメディアプロジェクトを推進してきました。"本質的な課題解決"をモットーにクライアントに向き合います。わかりやすさを重視して実践で使える記事をお届けします。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

無料でできるWebマーケティング11選  <MIDORIBON>

ダウンロード資料画像

Webマーケティングに取り組もうとしている方に向けて、無料で利用できるWebマーケティングに役立つツールを9つ集めました。ツールの始め方からWebマーケティングに利用するメリット、実践的な活用方法まで解説します。

コストをかけずにまずはWebマーケティングに取り組んでみたい思いの方にぴったりの一冊です。

そのままの計画で、目標達成できますか?

Webマーケティングには予想外な事態がつきものであることを私たちは理解しています。
考えて、考え抜いて設計したはずのKPIが全く達成されずに、形骸化し誰も触れない状態になっている。

サイト内でユーザーがどのような行動をとっているかを解析

自社と競合を比較し、どこが勝っていてどこが弱みなのかを浮き彫りに

ユーザーのニーズや業界動向等を調査し、状況にあった施策を提案

課題解決のポイント、目標達成のプロセスなど
Webサイトの成長につながる具体的な手段をご提示いたします

運営会社

Web制作・広告・コンサルティングのセルリア

サービス一覧
会社概要