ブログのつくり方

WordPressの投稿にプラグインを使って簡単に目次を表示する方法

投稿日:

ブログの記事に目次を設置すると、目次を見るだけで記事にどんなことが書いてあるのかが分かります。

また、目次のリンクをクリックすれば読みたい項目にすぐに移動することができるので、目次があるだけでユーザビリティを向上させることが可能です。

とは言え、どんなやり方でブログに目次を設置しようかと悩むこともあるのではないでしょうか。

そこで、ここではWordPressの投稿にプラグインで簡単に目次を挿入する方法について説明します。

 

WordPressの投稿にプラグインを使って目次を表示する方法

それでは、以下にWordPressの投稿にプラグインで簡単に目次を挿入する方法について説明します。

 

プラグイン「Easy Table of Contents」で目次を設置する

記事に目次を設置するには、プラグインを使うのが一番簡単です。

WordPressの初心者でも簡単に目次を記事に挿入することができます。

ただ、プラグインと言っても、目次を入れられるプラグインはいくつもありますが、「Easy Table of Contents」というプラグインを使うと、簡単な設定で記事に自動で目次を設置することができます。

また、このプラグインは、文字色や背景色を設定画面で簡単に指定できたり、目次を入れたくない記事を指定して除外できたりするなど細かい設定もできるので便利です。

では「Easy Table of Contents 」を使ってどのように目次を表示するかですが、設定に必要な作業の流れは以下のとおりです。

「Easy Table of Contents 」を使って記事に目次を入れる方法

  1. 「Easy Table of Contents 」をインストール・有効化する
  2. 「Easy Table of Contents 」の設定画面で、投稿に目次を挿入するための設定をする
  3. サイトを表示して目次が設置されているかどうかを確認する

上記①~③で行う作業について、詳しくは以下の項目で解説します。

 

①「Easy Table of Contents 」のインストール・有効化

はじめに、①の「Easy Table of Contents 」をインストール・有効化する方法について説明します。

ここで行う作業は以下のとおりです。

「Easy Table of Contents 」のインストール・有効化手順

  1. WordPress管理画面「プラグインの追加」画面を表示
  2. 画面の右上にある検索ウィンドウに「Easy Table of Contents 」と入力
  3. 検索結果に表示された「Easy Table of Contents 」の「今すぐインストール」をクリック
  4. インストールが完了したら「有効化」をクリックする

以下に、上記①~④の流れを詳しく見ていきます。

まず、WordPress管理画面のメニューから「プラグイン」⇒「新規追加」をクリックして、「プラグインの追加」画面を表示します。

そうすると、以下のような画面になるので、右上にある検索ウィンドウに「Easy Table of Contents」と入力します。

そして、検索結果の左上に「Easy Table of Contents」が表示されたら、「今すぐインストール」をクリックしてください。

インストールが終わったら、以下のように「有効化」というボタンが表示されるので、「有効化」をクリックし、ここまでの作業が終了です。

 

②投稿に目次を挿入するための設定をする

次に、「Easy Table of Contents」の設定画面から投稿に目次を設置するための作業を行います。

プラグインをインストールして有効化しただけでは、まだ目次は表示されません。

最初に「Easy Table of Contents」の設定画面で、「どのページに目次を表示するか」「どんな時に目次を表示するか」などを設定する必要があります。

ではどんな作業を行うかとですが、ここで行う大まかな設定の流れは以下のとおりです。

「Easy Table of Contents」の設定の流れ

  1. 「Easy Table of Contents」の設定画面を開く
  2. 必要な項目の設定を行う
  3. 「変更を保存」ボタンをクリックして設定内容を保存する

上記①~③について、以下の項目で詳しく説明します。

 

「Easy Table of Contents」設定画面を表示する

はじめに、「Easy Table of Contents」の設定画面は、以下の①もしくは②の方法で表示できます。

「Easy Table of Contents」の設定画面の表示手順

  1. WordPress管理画面「設定」⇒「目次」をクリック
  2. WordPress管理画面「プラグイン」⇒「インストール済みプラグイン」⇒「Easy Table of Contents」の「設定」をクリック

上記の方法で設定画面を表示したら、次に、以下の「一般」「外観」「高度」という項目で必要な設定を行います。

 

「一般」設定

まず、「一般設定」から以下の項目が設定できるようになっています。

サポートを有効化 目次を挿入したいページを選択

(必要に応じて「投稿」や「固定ページ」にチェックを入れてください)

自動挿入 目次を自動挿入するページを選択
位置 目次を挿入する位置を選択する

(プルダウンメニューから「最初の見出しの前(デフォルト)」「最初の見出しの後」「上部」「下部」が選択できますが、デフォルトの位置がおすすめです)

表示条件 何件以上の見出しがある時に目次を表示するかを設定
見出しラベルを表示 目次の上に見出しラベル(タイトル)を表示するかどうかを選択
見出しラベル 目次の上に表示する見出しラベルの文言を設定
折りたたみ表示 目次を折りたたみ表示ができるようにする場合はチェック
初期状態 ページを表示した時に、初期状態で目次を非表示にする場合はチェックを入れる
ツリー表示 目次をツリー状に表示する場合にはチェックを入れる
カウンター 目次の前に付ける番号の表示の仕方を選択する
スクロールを滑らかにする 目次をクリックした後、コンテンツに移動するスクロールの動きを目で追えるように滑らかにする場合はチェックを入れる

「一般」設定で必要な設定としては、まず、デフォルトだと目次を挿入する対象として「投稿」が選択されていないので、「サポートを有効化」「自動挿入」で「投稿」にチェックを入れる必要があります。

他の項目はデフォルトのままにしていても目次は表示されますが、ユーザーにとって使いやすいように、「見出しラベル」が「Table of contents」を「目次」や「この記事の目次」に変えるなどすると良いです。

 

「外観」設定

次に「外観」設定からは、以下の項目が設定できるようになっています。

外観 目次の幅をプルダウンメニューから選択
カスタム幅 幅の設定で「ユーザー定義」を選び、目次の幅を直接指定する場合には数値を入力
回り込み 目次の下にコンテンツの回り込むをするかどうかを選択
タイトル文字サイズ タイトルの文字サイズを設定
タイトル文字の太さ タイトルの文字の太さを設定
文字サイズ 目次の文字サイズを設定
テーマ 目次のデザインを設定
カスタムテーマ
(「テーマ」でカスタムを選択した時のみ設定)
背景色 目次の背景色を設定
枠線色 目次の枠線の色を設定
タイトル色 目次のタイトルの文字色を設定
リンク色 目次の文字色を設定
ホバー時のリンク色 目次にカーソルを合わせた時のリンク色を設定
訪問済みリンク色 訪問済みのリンク色を設定

「外観」設定は、目次の外観を整える設定なので、デフォルトのままでも問題はありませんが、サイト全体のデザインと合うように色を変更するなどして、調整することをおすすめします。

 

「高度」設定

次に「高度」設定では、以下の項目を設定できます。

小文字 アンカーリンクのid属性値に必ず小文字を設定する場合はチェックを入れる

※通常はデフォルトのままで支障ありません

ハイフネーション 英単語を改行する時のアンカーリンクに「-」を使う場合はチェックを入れる

※通常はデフォルトのままで支障ありません

ホームページ ホームページ(トップページ)の項目に目次を表示する時にはチェックを入れる
CSS プラグインのCSSを読み込まない(初期状態のままで表示するか自分でCSSを設定する)場合はチェックを入れる
見出し 目次を生成する見出しのサイズを選択
除外する見出し 目次に含めない見出しがある場合には指定する
スムーズスクロールのオフセット もし固定のナビゲーションを表示している場合に、その表示に隠れて見出しが表示されないように余白を設定する
モバイルのスムーズスクロールのオフセット スムーズスクロールのオフセットをモバイル端末のみで適用する場合に設定
パス制限 目次の生成をしたくないページのパスを入力する
デフォルトのアンカー接頭辞 見出しの中に英数字が含まれている場合には、それがアンカーターゲットのid属性値として使用されますが、見出しに英数字が含まれていない(日本語のみ)の場合は利用できる文字がないため、代わりに接頭辞として使う文字を設定する

※通常はデフォルトのままで支障ありません

ウィジェットの固定セレクタ ウィジェットでサイドバーに目次を表示する場合には、使用しているテーマで定義しているサイトバーの「class」もしくは「id」を入力する

「高度」設定は、基本的には特に何もしなくても問題ありませんが、目次を表示したくないページがある場合や、目次に表示したくない見出しがある時などには、個々に指定することができるので、必要に応じて設定すると良いです。

ここまで設定が完了したら、最後に画面一番下にある「変更を保存」ボタンをクリックします。

 

③サイトを表示して目次が設置されているか確認する

次に、プラグインの設定が完了したら、実際にサイトを表示して、目次が設置されているかどうかを確認します。

希望通りの状態で目次が表示されていれば、ここで設定完了です。

ちなみに、デフォルトの外観設定で投稿に目次を表示すると、以下のような表示になります。

もし、表示してみて見た目がサイトのデザインと合わない場合は、設定画面から色を変更するなどして調整してみることをおすすめします。

 

まとめ

以上、WordPressの投稿にプラグインを使って簡単に目次を表示する方法について説明しました。

ブログの記事に目次を設置する方法は、プラグインを使うと簡単です。

目次を設置できるプラグインはいくつかありますが、「Easy Table of Contents」というプラグインを使うと簡単に目次を設置することができます。

また、単に目次を投稿に挿入するだけではなく、目次に表示しない見出しやページを設定できたり、背景色や文字色を指定したりと、細かい設定をして調整することが可能です。

それほど難しい作業をすることなく記事に目次を挿入することができるので、目次の入れ方に迷った時には「Easy Table of Contents」を試してみてはいかがでしょうか。

  • この記事を書いた人

ミヤノ カナコ

ブログ運営歴5年目のブロガー・フリーランスライター。OL時代には、多くのカスタマーセンターやヘルプデスクでメール・電話での問い合わせ対応に従事。現在は、ブログでの情報提供のほか、エッセイの発信を中心に活動中。このブログでは、ブログのつくり方や文章の書き方など、ネットビジネスに役立つ情報をお届けします。

Copyright© ミヤノカナコ.com , 2019 All Rights Reserved.