１．目次が必要な記事の量と目次を設定するメリット
２．目次の作り方
３．目次から移動先に滑らかに画面スクロールさせるプラグイン
４．目次を自動で作ってくれるプラグイン
目次が必要な記事の量と目次を設定するメリット
ブログの記事の先頭や最後に、見出しがあるものを時々見かけると思います。
今日の投稿には、ワザと目次を作ってあります。
記事の量が少ないこともあるでしょうから、いつも見出しを作る必要はありません。
本来なら、この記事にも目次は作りません。
H2の見出しが４つ以上ある場合は、見出しを作ったほうが記事が読みやすくなるといいます。
見出しを自動的に作成してくれるWordPressのプラグインでも、デフォルト設定ではH2の見出しが４つ以上ある場合に自動的に目次を作るというふうになっています。
目次を作るメリットは、ユーザーが読みたい部分、読み返したい部分を見つけやすくなるということです。
ひと言でいうと、「可読性」が向上するので「離脱率」も低くなる。
また、目次が検索結果に表示されますから、わずかでもSEOに効果があるとも言われます。
とは言っても、見出しが２～３つくらいしかない記事に目次などはいらないでしょう。
目次の作りかた
１．ユーザーが目次をクリック（タップ）した場合に移動させたいタイトル文字の先頭をマウスでクリックしてカーソルがある状態にします。
下図では、「目次が必要な記事の量とメリット」というタイトルの先頭にカーソルがある状態になっています。
次にエディターの中から、アンカーのアイコンをクリックします。
２．アンカーをクリックして表示された下記のID入力窓に任意のIDを入れます。ここでは「link1」と設定しています。
- 1つのIDは、同じ文書内で1ヵ所にだけ使用できる。（重複させてはならない）
- 使用できる文字は、半角の英数字、ハイフン（ - ）、アンダーバー（ _ ）、コロン（ : ）、ピリオド（ . ）。（ハイフン以外の記号は使わない方が無難）
- アルファベットで始めなければならない。（数字や記号で始めてはならない）
- 大文字と小文字の区別があります。
３．アンカー（⚓）のマークが、移動先のタイトル先頭に付いていることを確認して下さい。
４．アンカーに対するリンクを設定する目次の文字をドラッグで範囲指定します。
下図では、「目次が必要な記事の量とメリット」という文章を範囲指定しています。
次にエディターの中の「リンクの挿入／編集」をクリックします。
５．リンク先URLを、「#link1」と入力します。アンカーをクリックして設定した任意のIDの先頭に「#」付けるだけです。
以上の操作で、目次をクリックすれば、アンカーを設定した文章へ移動するリンクの設定できました。
以降は、「link2」、「link3」・・・とID名だけを変えて、同じことを繰り返して設定していけばいいだけです。
目次から移動先に滑らかに画面スクロールさせるプラグイン
アンカーを設定した文章に対して、目次からリンクを貼れば移動はできるのですが、このままでは移動の瞬間がとても味気ないのです。
移動先にスクロールするというより、「パッと瞬間移動する」といった表現のほうが似合うかも知れません。
移動のしかたになんだか、違和感があり、洒落ていません。
ダサいのです。
そこで、目次をクリック（タップ）した場合に、ゆっくりと流れるように目的の文章まで移動させるために「Easy Smooth Scroll Links」というプラグインを使います。
１．ダッシュ―ボードの項目から、プラグイン→新規追加を選択します。
２．右上の検索窓に「Easy Smooth Scroll Links」と入れて検索すれば、下図のように表示されます。”今すぐインストール"をクリックしてインストールし、有効化します。これだけでOKです。
「Easy Smooth Scroll Links」自体の設定はデフォルトのまま何もする必要はありません。試しに、この投稿の目次をクリックしてみて下さい。違和感なくスムーズに移動するハズです。
目次を自動で作ってくれるプラグイン
私のお勧めは、「Table of Contents Plus」というプラグインです。
このプラグインで作られる目次は、デザイン的にも感じが良いので、お勧めです。
ただ、私も入れていますが、このサイトでは使ったことがありません。
たぶん、記事のボリュームが目次を必要とするほどないということと、全ての投稿に目次を自動で付ける必要はないし、とはいっても、プラグインを入れたのに記事ごとにいちいちつけるのも面倒。
なので、たまに必要であれば、今日の投稿でお伝えしたアンカーを付ける方法で済ませています。
「Table of Contents Plus」については、赤石カズヤさんという方が、”WordPressで綺麗な目次を作りたい！【Table of Contents Plus】をカスタマイズしてみた”で、詳しく説明なさっているので、そちらをご参考下さい。
アンカーの便利な使い方
投稿では、目次の作成にアンカーを使いましたが、アンカーは目次のためだけに使うものではありません。
同一のページ内で、任意の場所に移動させたり、別ページの任意の特定場所に移動させたりという使い方をします。
例として、「〇〇については、”〇〇の使い方について”の投稿で説明しています。」という文章があった場合、ユーザーは「”〇〇の使い方について”」という投稿を探さないといけません。
簡単なのは、「”〇〇の使い方について”」という文章に、そのページのURLでリンクを設定すればいいのですが、ユーザーのお目当ての情報が、必ずしもリンク先記事の先頭にあるとは限りません。
そうすると、ユーザーは、記事をスクロールさせながら、目的の情報を探すことになります。
もし、アンカーによって、特定部分へダイレクトにリンクされていれば、ユーザーは探す手間もなく、必要な情報にたどりつくことができます。
アンカーによる異なるページ内の特定部分への移動
設定の方法は、ページ内移動さほど変わりません。
例として、
と記事を書いた場合に
- 移動させたい移動先の文章の先頭部分アンカーを設定する。（link1とか、link2とかというIDを設定すること）
- 移動元の文章に対して、次のようにリンク設定する。（例では、「外注を使う」という文章に下記のリンクを設定）
「外注を使う」という部分をクリックしてみて下さい。
先頭ページに移動せず、ダイレクトに特定部分へ移動します。
このように、アンカーを上手に使うことで、ユーザーへのユーザビリティが向上し、その結果、サイト内の回遊率も高まります。
