SEO/SEM

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

ページ内リンクでジャンプやスクロールさせるHTMLタグの作成方法
ページ内リンクを適切に使用すると、読者が読みたい箇所まで一気にスクロールでき、欲しい情報にいち早くたどり着きやすくなります。そのため、使い勝手の良いユーザビリティが高いサイトを作ることにつながるのです。

しかし、サイト制作の初心者ではページ内リンクがうまく設定できない場合があります。

この記事では、ページ内リンクの設定方法や不具合が生じた際の対処法について紹介しますので、ぜひ参考にしてみてください。

ページ内リンクとは

ページ内リンクは、「ページ内ジャンプ」「アンカーリンク」とも呼ばれており、ページ内の好きな場所までクリックひとつでスクロールさせることができるものです。

サイトでは、目次のような形式ではじめに記事の概要を簡単に説明した見出しにページ内リンクを設定し、詳しい説明が書かれている本文の該当箇所へリンクを飛ばす形式でよく使われています。

ページ内リンクをうまく設計すれば、読者が欲しい情報に即座に到達できるようになります。

例えば「大学受験の英語の勉強法」といった記事の中で、読者が数ある英語の勉強法の項目から特に「文法の勉強法」について知りたい場合で考えてみましょう。

目次から目的の「文法の勉強法」へ飛ぶことができれば、「長文の勉強法」などの不要な項目をスクロールする時間を省き、「文法の勉強法」の情報だけを入手できます。

このようにページ内リンクは、素早く・的確に欲しい情報を取得することができるので、ユーザーの利便性に繋がるのです。

ユーザビリティについては、下記の記事で詳しく紹介しています。
ユーザビリティとは?アクセシビリティとの違いや参考例を紹介

ページ内リンクの作り方

ページ内リンクには、3つの設定方法があります。

  • HTML(nameタグ)を使った設定方法
  • HTML5(idタグ)を使った設定方法
  • WordPressを使った設定方法

ひとつずつ紹介していきます。

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タグを書かなくても手軽に内部リンクの作れるプラグインがあるのでおすすめです。

ページ内リンクのデザイン

ページ内リンクには、3つのデザイン要素があります。

  • テキストリンク
  • リンクボタン
  • リンク画像

それぞれの項目について紹介していきます。

テキストリンク

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

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

リンクボタン

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

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

リンク画像

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

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

ページ内リンクがうまく飛ばない原因と対処方法

ページ内リンクを設定したのにうまく効かない時には、主に3つの原因が考えられます。

  • タグがきちんと書かれていない
  • リンクの識別コードが重複している
  • jQuerymobileを利用している

ここではその原因と対処法について解説していきます。

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

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

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

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

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

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

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

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

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

jQuerymobileを利用している

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

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

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

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

ページ内リンクの位置がずれる原因と調整法

ページ内リンクの着地位置は、ずれることがよくあります。これは、ページの読み込みが終わっていない状態でリンクをクリックしてしまったことなどが原因で、よく発生します。

しかし、ページ内リンクが毎回同じようにずれる場合には、「position:fixed」を使ってヘッダーを固定していることが原因として多いです。以下では、この調整方法を2つご紹介します。

1つ目は、ページ内リンクのジャンプ先のid属性値にCSSを指定する方法です。「position:fixed」を使ってヘッダーを固定している場合、ページ内リンクがヘッダーの高さの分だけ、ずれてしまうことがあります。

その場合は、padding-topでヘッダーの高さの分をずらし、margin-topでそのマイナスの値を入れるとズレが解消されます。

例えば、「padding-topを80px 」「margin-topを-80px」などにするという感じです。

2つ目は、jQueryを使用して調整する方法です。

リンクの飛んだ先の情報の表示エリアについて、ヘッダーの高さを引いた位置から指示を出すコードを書くことで解決します。

ページ内リンクが毎回同じようにずれる場合には、ぜひこれらの方法を試してみてください。

まとめ

今回の記事では、ページ内リンクの設定方法と、問題が起きた時の原因の対処法について紹介しました。設定方法ひとつでも、自分でコードを書く方法やWordPressを用いる方法などさまざまです。

リンク元のデザインは複数あるため、サイトの目的に合ったデザインを利用することで、ユーザーにとって使いやすいサイトが作成できます。また、適切にページ内リンクを作成することは、SEO対策にもつながります。

この記事を参考にして、ページ内リンクの作成方法を理解しましょう。

プロフィール
大澤 健人(おおさわ けんと)
GMO TECH株式会社 大澤 健人(おおさわ けんと)大澤 健人(おおさわ けんと)のFacebook
2012年より一貫して検索エンジン領域のコンサルティング業務に従事。 2017年にGMO TECH社に参画。営業組織の構築、新商材開発、マーケティング部門立ち上げをおこなう。 現在、MEOコンサルティング、SEOコンサルティング、運用型広告などSEM領域全体を統括し、 お客様の期待を超える価値提供を行うため日々、組織運営・グロースに奔走している。
   

Seminarセミナー

現在受付中のセミナーはありません。

CONTACT US

デジタルマーケティングに関することならお気軽にご相談ください

メルマガ登録

メールマガジンはこちらからご登録ください。

デジタルマーケティングに関するホットな情報をお届けいたします。

フォームからのお問い合わせ

GMO TECHへの業務依頼、発注を希望される方はこちらよりご連絡ください。