ブログに「目次」をつける方法(プラグイン: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 Offset210pxスクロールした時に見出しの箇所にぴったりと止まるかどうかの設定です。
この設定はスムーススクロールオプションを有効化している場合のみ有効です。
Lightningの場合は210pxがちょうどいい。
 Mobile Smooth Scroll Offset50pxスマホの場合
Lightningの場合は、50pxがちょうどいい?(画面を見ながら微調整してください。)

 

 

見出しをつけましょう

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

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

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

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

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

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

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

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

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

この記事を書いた人

佐々木亜紀
佐々木亜紀
株式会社アドプラス 代表取締役 
千葉コワーキングスペース201オーナー

ウェブ制作8年、実店舗運営5年。
ワードプレス制作と実店舗運営の経験を生かして集客のためのワードプレスの基礎構築講座を主宰。

中小企業庁
ミラサポ専門家派遣事業登録専門家
千葉県産業振興センター登録専門家

初回限定オンライン無料相談受付中

受講をする前にまずは相談したい!
そんなお声にお答えいたします。

こんなことでお悩みの方はどうぞご相談ください

・自分の事業でワードプレスが本当に必要?
・現状の集客方法にワードプレスをプラスしたほうがいいの?
・ 現状のホームページを生かせない?
・ワードプレスを取り入れたいけど今のブログはどうするの?
・今のホームページはどうしたらいいの?
・講座ってどんな内容なの?