【WordPress】初心者でも目次を簡単に自動生成!ページ内リンク(アンカーリンク)も

2020年10月20日

Pocket

 

▶︎この記事はこんな人におすすめ

・目次を付けたいけど難しそう

・目次を自動生成したい

ページ内リンクで飛べるようにしたい

 

皆さん、目次はつけていますか?せっかく作った記事に目次が無いなんて、勿体無いですよね。そこで今回は、初心者でも簡単に目次を自動生成させる方法をご紹介します。

 

スマホから簡単に出来るので、記事を見ながらサクッと設定しちゃうと後々楽ですよ!それでは早速参りましょう。

 

お問い合わせフォーム自動生成したい方はこちらを参照ください↓

 

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


目次を作るための『Table of Contents Plus』というプラグインがあります。プラグインと聞くと面倒だからいいやと思う方もいらっしゃると思いますが少し待ってください!

 

今から紹介するプラグインは設定が簡単な上に、作業効率を間違いなく格段と上げてくれます。サイトのユーザビリティを上げてGoogleアドセンス審査を受けようと思っている方はインストールしない手はないでしょう。

 

Googleアドセンス審査を受ける方はこちらを参照ください↓

 

このプラグインは見出しを自動で目次にしてくれるというものです。そのため階層表示であったり、ページ内リンクで項目の始まりまで飛ばすことも簡単に出来ます。

 

次の作業手順の項目で写真付きで分かりやすく解説していきますので、一緒に設定してみましょう!

 

作成手順


①プラグインを追加


▶︎ダッシュボード>プラグイン>新規追加をクリックし、『Table of Contents Plus』を検索します。

 

▶︎今すぐインストールをクリックし、有効化してください。そしてインストール済みプラグインのページから『Table of Contents Plus』を見つけ、設定を押します。

 

▶︎そして上記の通りに数字やチェック項目を合わせると、この記事のような目次を自動で作成出来ます。見出しテキストを変えたり番号を振ったり振らなかったりと、柔軟に変更出来ます。

 

スムーズ・スクロール効果を有能化は今チェックが入っていませんが、チェックを入れると該当箇所までスムーズに移動するのでおすすめです。

 

▶︎デザインもいくつか選べるので、ブログテーマに沿ったものを選ぶと良いでしょう。

 

②見出しをつける


▶︎記事を作成する際、目次にしたい見出しを決めます。例えば上の「目次はどうやって作るの?」を目次にしたい場合、文を選択して段落<p>をクリックします。そして見出し2<h2>を選択します。

 

目次として作らず、見出し、本文、見出し、本文というように書いていきましょう。そこからプラグインが自動で見出しを引っ張ってきて目次にするイメージです。

 

※ちなみに見出し1というのは記事のタイトルなので、見出し2から設定しましょう。

 

▶︎個人的には見出しを大きく見せたいので、見出し2を選択した後にフォントサイズを28pxまで上げるようにしています。目次の大きさは変わりません。

 

▶︎今は見出しだけ羅列していますが、通常はそれぞれの見出しの下に本文を書きます。プレビュー画面で見ると目次が自動で再生されているのが確認出来ます。感動ですね。

 

▶︎目次の項目はページ内リンク(アンカーリンク)になっており、クリックすると該当する見出しのところまでジャンプします。また、[hide]を押すと目次が非表示になります。目次の項目が多い時に便利ですね。

 

③目次を階層で作成


▶︎先程まで見出し2<h2>を用いて目次を作っていましたが、階層的に目次を掘り下げたい場合は見出し3<h3>を使用します。尚、フォントサイズは24pxで設定しています。

 

更に詳細について書きたい時は見出し4<h4>を使いますが、目次に詰め込み過ぎても逆に分かり辛くなってしまうので見出し2〜3くらいを使うのが良いでしょう。

 

まとめ


以上、スマホから簡単に目次を自動生成する方法をご紹介しました。いかがだったでしょうか?プラグインを入れるだけでこんなに簡単に目次を作れるって画期的ですよね。

 

目次があるだけで、検索ユーザーにとって非常に見やすくなるため、サイトのユーザビリティ向上は必至です。まだ設定していない方も、Googleアドセンス審査にむけてチャチャっと設定しておきましょう!

 

Googleアドセンス審査を受けようと思っている方はこちらを参照ください↓