ページ内リンクでジャンプやスクロールさせるHTMLタグの作成方法

1. HTML（nameタグ）を使った設定方法

HTMLでは、要素の名前を指定するnameタグを用いてページ内リンクを設定することができます。

まず、リンクで飛んだ先に設定したいタイトルに、アンカー要素（aタグ）のname属性で属性値を指定します。属性値を「title」とした場合、着地点のタグは以下のようになります。

<a name="title">タイトル</a>

そして、そのタイトルに飛ぶことができるように設定するジャンプのタグには、href属性に属性値である「title」の前に＃をつけて「#title」と指定し、以下のようになります。

<a href="#title">タイトルへジャンプ</a>

下記のタグを書くことで、「タイトルへジャンプ」をクリックすると「タイトル」に飛ぶことができるようになります。

<a href="#title">タイトルへジャンプ</a>
<a name="title">タイトル</a>

2. HTML5（idタグ等）を使った設定方法

HTML5では、それまでのHTMLのnameタグの代わりに、idタグの使用が推奨されるようになりました。

基本的な設定方法は以前のHTMLと変わりませんが、アンカー要素（aタグ）以外にも、h2やdivなどのあらゆる要素でid属性が指定できるようになっています。

リンクで飛んだ先に設定したいタイトルに、アンカー要素（aタグ）のid属性に属性値「title」を指定した場合の着地点のタグは以下のようになります。

<a id="title">タイトル</a>

HTML5では、アンカー要素「name」以外でも内部リンクを設定できるようになったので、以下のようにh2やdivを使用しても同様に設定できます。

【h2タイトルへジャンプする場合の着地点の指定タグ】

<h2 id="title">タイトル</h2>

【divタグで指定する場合の着地点の指定タグ】

<div id="title">divの着地点</div>

着地点までジャンプをするタグは、nameタグを使用したときと同様に、href属性の属性値「title」の前に＃をつけて指定します。

<a href="#title">タイトルへジャンプ</a>

こちらを記述することで、「タイトルへジャンプ」をクリックすると「タイトル」に飛ぶことができるようになります。

【h2タイトルへジャンプする場合】

<a href="#title">タイトルへジャンプ</a>
<h2 id="title">タイトル</h2>

【divタグで指定する場合】

<a href="#title">divへジャンプ</a>
<h2 div="title">divの着地点</h2>

3. WordPressを使った設定方法

WordPressを利用している場合には、テキスト編集をしなくてもプラグインを利用することで簡単にページ内リンクを作ることが出来ます。

代表的なプラグインは「Advanced Editor Tools」​​です。

リンク先やリンク元のページ内リンクを入れたい箇所にカーソルを合わせて、idを設定するだけで、テキスト編集せずにページ内リンクを簡単に設定できます。

WordPressでサイトを運営している場合は、テキストからHTMLタグを書かなくても手軽に内部リンクの作れるプラグインがあるのでおすすめです。

テキストリンク

テキストリンクとは、ページ内リンクの設定方法でも解説したような、テキストにページ内リンクを設定するものです。

これは、目次やタイトルから特定の情報にジャンプするときによく使われています。

リンクボタン

リンクボタンとは、主な例を挙げると、「詳細を見る」と書かれた四角いボタンを押すとページ下部の詳細情報までジャンプするようなボタンのことです。

リンクボタンは存在感があるため、通販サイトなどではわかりやすく使い勝手が良いです。

リンク画像

リンク画像とは、画像自体にページ内リンクを設定するものです。画像をクリックすると拡大して表示することができるなど、視覚的にwebサイトを構成するのに役立ちます。

内部リンクのデザインはいくつか種類がありますが、ユーザーにとって違和感なく使いやすいデザインを選択することでユーザビリティが上がります。

タグがきちんと書かれていない

ページ内リンクを設定しても、そもそもタグが間違っている場合は、リンクをうまく飛ばすことはできません。

よくあるミスとしては、本来はリンク元のタグのみに書くべき「＃」が、リンク先のタグ内に書いてある場合です。

また、その反対にリンク元のタグに「＃」を書き忘れていることも考えられます。そのため、最初に「＃」を確認してみると多くの場合には解決します。

リンクの識別コードが重複している

リンクの識別コードが重複していても、うまく飛ばすことができません。

ページ内リンクは、ジャンプの発地点と着地点に同じ「識別コード」を書くことで、ジャンプ先を認識しています。

しかし、タグをコピーするなどした場合、同一ページ内で同じ識別コードが重複してしまうことがあります。こうなると、どこに着地すればよいのかわからないので、ページ内リンクを適切にジャンプさせることができません。

識別コードの重複を確認し、もし重複があった場合は他の識別コードに変えてください。

jQuerymobileを利用している

スマートフォンページを簡単に作ることができるjQuerymobileを利用していていると、ページ内リンクがうまく飛ばないことがあります。

jQuerymobileの仕様上、ページ内リンクの作成に必須の「＃」が無効化されてしまうことがあるためです。

対策としては、アンカー対策用のスクリプトとして、aタグに data-ajax=”false” を追記することでページ内リンクを設定することができるようになります。

ページ内リンクがうまく飛ばない時は、試してみてください。