WordPress

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

皆さんは、WordPressの記事に目次を付けていますか?
目次には、サイトを訪れたユーザーにとって、どんな記事であるか伝える役割や知りたい情報にいち早く到達できるという役割があります。
中には、Wordpressの記事に目次をつけたいけど、難しそうだと思っている方もいらっしゃるのではないでしょうか。
今回は、プラグインはもちろん、自分で作成する方法もお伝えします。自分に合った方法で記事に目次をつけ、ユーザービリティの高いサイトを目指しましょう。

目次の作成方法

WordPressにおいて、目次の作成方法は2種類あります。
①プラグインを活用する
②記事作成時に自分で作成する
どちらもメリットデメリットはあります。

プラグインの場合、自動作成を設定することができ、
設定さえすれば記事作成時に目次に関して手を煩わせることがありません。
しかし、プラグインの数に比例してサイトが重くなってしまうというデメリットがあります。

自分で作成する場合、プラグインを使用しないためサイトが重くなるということはないものの、記事作成時に目次を入力するという手間が発生します。

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

プラグイン「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を読み込まない場合にはチェックを入れましょう。
見出しレベル デフォルトではH1-6の全てが目次として表示されるようになっていますが、目次に表示するレベルを選択することが可能です。
除外する見出し 特定のキーワードを含んだ見出しを目次から除外することができます。

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

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

プラグイン「Easy Table of Contents」を使用する

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

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

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

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

画面右上の検索フォームに「Easy Table of Contents」と入力します。
「今すぐインストール」をクリックし、その後「有効化」をクリックします。


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

「一般」の設定方法

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


それぞれ説明します。

 

サポートを有効化 目次を有効にする投稿のタイプを選択することができます。
自動挿入 目次を自動で挿入する投稿のタイプを選択することができます。
位置 見出しを表示する位置を「最初の見出しの前、最初の見出しの後、上部、下部」いずれかから選択できます。
表示条件 見出しの件数も条件に目次を表示するかを設定できます。

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

見出しラベルを表示 目次のタイトルをつけるか否かを設定することができます。目次のタイトルとはこの部分です。
見出しラベル 「見出しのラベルを表示」にチェックを入れた場合、表示する目次のタイトルを決めることができます。
折りたたみ表示 目次を折りたたむ(非表示)にすることのできるボタンを設置するかどうかを設定できます。
初期状態 チェックすると初期状態で目次を折りたたんむこと(非表示)ができます。

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

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

 

カウンター 目次の頭に付く数字の表記方法を「少数点表示、数字、ローマ数字、なし」から選択することができます。目次の頭の数字とは以下の部分です。
スクロールを滑らかにする 目次をクリックした際に該当箇所に移動するのスクロールを滑らかにするか否かを設定できます。

「外観」の設定方法

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

 

目次の幅を設定することができます。「固定値(px)、相対(%)、カスタム(ユーザー定義)」から選択できます。
カスタム幅 上記の「幅」で「カスタム(ユーザー定義)」を選択した際に、目次の幅を「pr、%、em」のいずれかの数値で指定することができます。
回り込み テキストの回り込みを「なし、右、左」から選択できます。
タイトル文字サイズ 目次タイトルの文字の大きさを「pt、px、%、em」のいずれかから数値で指定できます。目次タイトルとは以下の部分です。

画像

タイトル文字の太さ 目次タイトルの文字の太さを以下から指定できます。

・Thin

・Extra Lite

・Light

・Normal

・Medium

・Semi Bold

・Bold

・Extra Bold

・Heavy

文字サイズ 目次の文字サイズを「pt、px、%、em」のいずれかの数値で指定することができます。
テーマ 目次のデザインを指定することができます。以下の種類があります。

・グレー

・ライトブルー

・白

・黒

・透過

・カスタム

カスタムテーマ 上記の「テーマ」で、「カスタム」を選択した際に、目次の配色を細かく指定することができます。

 背景色:目次の背景色(地の色)

 縁線色:目次の縁の色

 タイトル色:目次タイトルの色

 リンク色:リンク部分の色(目次の見出しの色)

 ホバー時のリンク色:リンク部分にマウスオーバーされた時の色

 訪問済みリンク色:クリック済みのリンク部分の色

「高度」の設定方法

高度の設定では、より細かく目次の設定をすることができます。以下が高度の設定の画面です。

中でもよく利用する設定について説明します。

 

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という中見出しがある場合には以下のようになります。

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

目次に番号をつけたい場合もあるかと思います。そのような場合には、それぞれの見出しの<li>と<a href=”anker”>の間に数字を記入してください。

 

まとめ

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

ピックアップ記事

  1. SEOの仕組みとは?検索エンジンの仕組みと順位の決まり方
  2. Twitterのビジネスアカウントは必要?注意点と活用法を紹介
  3. [ゼロからやさしく解説]Instagramのアカウント登録/初期設定/使い方
  4. SEOに悪影響、重複コンテンツが起こりやすいケースと対処法まとめ
  5. Googleアルゴリズムとは?仕組み・更新の履歴・対策方法まとめ

関連記事

  1. WordPress

    WordPress(ワードプレス)でWebサイト全体を非公開にする方法

    サイトを製作している途中の段階やサイトや記事の内容に不備が見つかった際…

  2. Photoshop

    Photoshopのぼかしツールを使って被写体をボカす簡単な方法

    Photoshopで画像編集をしてる時に背景をぼかしたいって思ったこと…

  3. WordPress

    WordPressで表を簡単に作成・編集する方法【初心者向け】

    Wordpressを使ってサイトやブログを作成する際、表を追加したいと…

  4. Photoshop

    【Photoshop初心者向け】基本的なPhotoshopの使い方

    今回はPhotoshopで出来る「写真編集」「グラフィックデザイン」「…

  5. WordPress

    【WordPressの基礎・始め方】半日でゼロからブログを立ち上げる方法

    「wordpressを初めて使うけどまずは何をすれば良いのか、、」と悩…

  6. Photoshop

    Photoshopのグラデーションツールで美しいグラデーションを作る方法

    Photoshopにはグラデーションツールがあります。グラデーションツ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

解析/ツール

広告/マーケティング

デザイン/Web制作

Webコラム

PAGE TOP