ページ内リンクの作り方

サイト職人をご利用のお客様から、「ページ内リンクの作り方」についてのお問い合わせをいただくことがあります。
ページ内リンクとは、クリックするとページ内の好きな位置までスクロール（遷移）できるリンクのことで、長文のページでは目次の役割として使われることが多いものです。
スタッフブログでは、以前「目次を設置するメリット」についてご紹介いたしました。

・前回記事：
長文の記事には目次を付けて、ユーザビリティ、クリック率（CTR）向上をしよう！

そこで今回は、ページ内リンクの作り方について解説していきます。

スクロールしたい位置のタグにid属性を指定する

まず、ページ内リンクを作る場合は、リンクをクリックしたあとにスクロールしたい位置を決め、その位置にあるタグにid属性を指定します。
そのため、まずはスクロール先となる場所にid属性を指定するところから始めてください。今回は、タイトルというid属性のh2タグへスクロールするため、下記のように記述します。

例）

この時、「ページ内リンクのid属性の内容は、絶対にtitleでなければいけないの？」と思う方もいるでしょう。
そのようなことは、ありません。id属性の中身は任意の文字列で構いません。
そのため、 “point1”や“point2”などのように、自由に文字列を記述しましょう。
この点については、id属性というものが理解できている方なら、特に問題ないでしょう。

ちなみに、「ページ内リンクでスクロール先とするのは、見出しタグでなければいけないの？」と疑問に感じるかもしれません。この点についても、任意の場所で構いません。たとえば、特定のdivタグにスクロールさせたい場合は、divタグにid属性の付与を行ってください。

リンクを指定する

上記のid属性を指定する作業を行うことで、ページ内リンクにおけるスクロール先を作ることができました。

では、次にリンクを指定してスクロールボタンを作成していきます。
ページ内リンクのスクロールボタンは、通常のリンクと同じように、aタグを用いて作成します。
このときhref属性にはURLを入力する代わりに「#id名」の形式で入力します。

ちなみに、id名だけを入力しても正しく動作しません。
#を付けたうえでid名を記述するのが正しい書き方なので間違えないように覚えておいてください。

例）

以上で完成となります。1度、完成したら任意の場所までスクロールできるかページ内リンクの動きを確認してみましょう。

異なるページの途中にスクロールする方法

ページ内リンクというものは、同じページ内でしか利用できないと思う方もいるでしょう。
そのようなことは、ありません。スクロール先が異なるページであったとしても、まったく問題ありません。
しかし、先程とはページ内リンクの書き方が異なります。

まずは、スクロール先となるページの対象場所にidを付与します。この点については、先程と同じ作業となります。
次に、aタグを利用してスクロールボタンを作ります。このとき、aタグには、スクロール先のページのURLと#id名を同じ場所に記述します。
下記の書き方を見れば特に難しくはないでしょう。

例）

これで、異なるページでもページ内リンクで簡単にスクロールできます。
もし、新しいタブを開いた上で特定の場所までスクロールしたいのであればaタグにtarget=”_blank”を記述してください。

例）

target=”_blank”は、新しいタブを作成するために必要な記述です。この記述があれば、新しいタブを開いた上で任意の場所までスクロールできます。

ページ内リンク作成時の注意点

ページ内リンクを作成するにあたって、2点だけ注意して頂きたいことがあります。それぞれの注意点は下記のとおりです。

1ページ中の同じid名は1個まで

id属性は固有の識別子として扱われるため、1ページの中で同じid名は1個までという文法の規則があります。
もし複数の見出しに同じid名が指定されていると、意図した位置までスクロールしない不具合も発生します。
実装の際は同じid名が2個以上書かれていないか確認しましょう。属性チェックをかけておくとミスをすることがありません。

aタグにname属性は指定しない

aタグをスクロール先に指定する場合、id属性の代わりにname属性を指定することでスクロールも可能でした。
しかしHTML5では、aタグに指定されるname属性は廃止され、非推奨となりました。そのためname属性ではなく、id属性の使用が推奨されます。

まとめ

ページ内リンクの作り方について、ご理解いただけましたでしょうか。
手順も少なく、難しいことも入力しないので、気軽に作成できるかと思います。
ページ内リンクがあれば、目的の場所までページ内の移動が簡単にできます。

長文のページなどで目次としてページ内リンクを活用し、訪問者の直帰率を下げ、ユーザビリティ・可読性・クリック率の向上に繋げましょう。