ブログに「目次」をつける方法(プラグイン:Table of Contents)

ブログに目次を付けちゃおう
今日は、この文章の下の箇所に表示されている「目次」についての解説をします。

目次ってどうやって作るの?

投稿のテキスト量が長くなってしまった時、投稿の一番上にこういう目次があったら、便利ですね。

読者さんも読みたい項目をクリックして、読みたいところに飛べますね。

ワードプレスの場合は、目次を作るのは簡単です。
目次専用のプラグインがいくつも出ています。

代表的なプラグインは

を使っていらっしゃる方も多いです。
どちらも「プラグイン名 設定方法」などで検索すると設定方法が出てきます。

今回私は

Table Of Contents Plus のプラグインは最終更新が2年前
Easy Table of Contents最終更新が1週間前
という点から、2年間更新していないプラグインは不安もあるため
Easy Table of Contentsを選択しました。

そして「Easy Table of Contents」のいいところは、
目次の自動挿入をオンにしてもオフにしても、個別ページで無効と有効が選択できることです。

Easy Table of Contentsの設定方法

プラグインをインストールしましょう

管理画面>プラグイン > 新規追加 から

プラグインの検索に「Easy Table of Contents」を記入してください。

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

これでインストールの完了です。

設定方法

プラグインEasy Table of Contentsの設定方法

有効化したら、
管理画面 > 設定 > Table of Contents というタブができました。

「Table of Contents」 をクリックして、設定をしていきましょう。

ちなみに私のブログの設定はこちらです。
画像をクリックすると大きくなり全体がわかります

設定項目

部分的に英語表記となっている部分もありますので上から順に説明します。

General(一般設定)
Enable Support 目次を有効にする 目次を挿入するページを指定する
投稿ページだけでいいでしょう。
Auto Insert 自動で挿入 自動的に挿入するかを選択する
Position 目次を表示させる場所 ・最初の見出しの上に設置
・最初の見出しの下に設置
・記事の上
・記事の下
Show when 条件 ○個以上の見出しを使ったら目次を表示させる
Display Header Label 目次にタイトルをつけますか?
Header Label 表示させるタイトル
Toggle View 開閉ボタンを付けるか ユーザーが目次の表示を切り替えられるようにする
 Initial View 初期設定 ページを開いた時に目次を開いた状態にするかどうか
 Show as Hierarchy 階層 見出しタグを階層にするかどうか
 Counter 見出し番号  Decimal(階層の表示番号)
1
1.1
1.2
2
Numeric
上位階層に数字がつかない
Roman(ローマ数字)
Smoooth Scroll スムーズスクロール

 

スクロールを滑らかにする
Appearance(見た目)
Width 幅の広さ Auto
(スマホ対応でAutoのままでいいでしょう)
Custom Width 幅の広さ カスタム幅を使用するには、「幅」オプションから「ユーザー定義」オプションを選択します。
そのままでいいでしょう
Float 右寄せ・左寄せ Noneで
Title Font Size タイトルの文字の大きさ 120%
Title Font Weight タイトル文字の太さ Medium
Font Size 文字サイズ 95%
Theme デザイン 表示させてみてイメージの合うものに
Custom Theme デザインカスタム Theme Customを選択した際の設定
Advanced(上級者向け)

上級者向けの項目になりますので、不要な箇所は省略します。
設定が必要な箇所のみ説明します。

 Headings  h1~h6までのどの見出しまで目次に表示させるか
Smooth Scroll Offset 210px スクロールした時に見出しの箇所にぴったりと止まるかどうかの設定です。
この設定はスムーススクロールオプションを有効化している場合のみ有効です。
Lightningの場合は210pxがちょうどいい。
 Mobile Smooth Scroll Offset 50px スマホの場合
Lightningの場合は、50pxがちょうどいい?(画面を見ながら微調整してください。)

 

 

見出しをつけましょう

さて、目次のプラグインを設置すると気がつくことがあると思います。

まずは、的確なわかりやすい「見出し」をつけるということです。

そして、特にh2(見出し2)からh3(見出し3)を順序を整えて、適切な言葉を選んでつける。

これができたら、ユーザーさんにも読みやすく、わかりやすいブログに近づいていきますね。

そして、嬉しいことに、この見出しをつけることは、googleの評価も高いので適切なSEO対策になります。

これで文章構成もSEO効果もバッチリ

表示確認をしてみましょう

すべての設定を完了したら、投稿のページを確認してみましょう。
目次を作るプラグイン

記事の上にこんな目次が表示されていたら完成です。