「ページ内リンクのHTMLの記述方法を知りたい」
「ページ内リンクをIDで設定したがずれる、飛ばない」
「WordPressでページ内リンクのUIデザインをCSSで調整したい」
ページ内リンクの設定方法や、「ずれる・飛ばない」原因や、ページ内リンクのデザインを紹介するよ！
ページ内リンクとは？
ページ内リンクとは、ページ内でクリックすると、設定したページ内にスクロールされるリンク設定のことです。ページ内リンクは、読者の検索体験の向上にもつながり、SEO対策にも重要な要素です。
例えば、アフィリエイトサイトでは、下記のような表があったとします。
| ランキング順位 | 会社名 | 特徴 |
| 1位⭐⭐⭐ | 〇〇株式会社 | 取引先が最も多く、信頼性が高い。 |
| 2位⭐⭐ | △△株式会社 | 実例を多く掲載しており、担当者とのMTG時間が確保されている。 |
| 3位⭐ | ××株式会社 | 格安で、お試しプランが提供されている。 |
上記の表であれば、社名に設定されているリンクをクリックすると、詳細を確認できるページ内に飛んだことはありませんか？
最近のSEO対策では、エンゲージメント率が高かったり、検索ユーザーがブラウザをバッグせずに検索を終えると、ページの評価が上がると言われています。
Googleの検索順位アルゴリズムにも直結する上、収益化にも直結するページ内リンクの設定を紹介します。
ページ内リンクの設定方法
ページ内リンクを使うと、同じページ内の特定の場所にユーザーを移動させることができます。以下では、HTMLとWordPressを使ったページ内リンクの設定方法を解説します。
HTMLにidを記述して、ページ内リンクをすることが多いよ！
HTMLでのページ内リンク設定（nameタグ）
HTMLを使用してページ内リンクを設定する場合、name属性を持つアンカー要素を使う方法があります。これは古いバージョンのHTMLで使用されていました。
ページ内リンクは、リンク先とリンク元の２つを設定しましょう。
リンクを飛ばす先のnameタグ設定<a name="example">テスト</a>
ページ内リンクを飛ばす元のhref記述<a href="#example">ここからリンク</a>
これにより、「テスト」をクリックすると、ページ内の「テスト」という名前の場所に移動します。
HTML5でのページ内リンク設定（idタグ）
HTML5では、idタグを使ってページ内リンクを設定するのが一般的です。この方法では、aタグ以外のタグにもid属性を指定することができます。
リンクを飛ばす先の設定でaタグを使う場合<a id="example">テスト</a>
リンクを飛ばす先の設定でh2タグを使う場合<h2 id="example">テスト</h2>
リンクを飛ばす先の設定でdivタグを使う場合
<div id="example">テスト</div>
上記のように設定したら、前述したように、下記コードを記述すればページ内にリンクを飛ばすことができます。
ページ内リンクを飛ばす元のhref記述<a href="#example">ここからリンク</a>
上記のように設定すると、aタグやh2見出し・h3見出しに飛ばすことができ、HTML5の柔軟性を活かした内部リンクが簡単に作成できます。
WordPressを使ったページ内リンク設定
このページを見ている多くのユーザーがWordPressを使用しているでしょう。
WordPressでは、h2見出しやh3見出しに何らかの文字を入力するときに、編集画面の右のサイドバーに「高度な設定」にて、「HTMLアンカー」という項目があります。
今回は、h2見出しに対して、「tekitou」という文字列を入力してみました。
普段、リンクを飛ばすときには、リンクを飛ばしたい文字列を左クリックでドラッグしてから、「https://~~~」のように入力しますが、ページ内リンクを設定したい場合には、下記のように「#tekitou」と入力します。（任意の文字列で構いません。）
ページ内リンクのデザイン
ページ内リンクのデザインは、ユーザビリティを向上させるために非常に重要です。リンクの種類やデザインによって、ユーザーがリンクを見つけやすくし、目的の場所にスムーズに移動できるようにしましょう。
ここでは、テキストリンク、リンクボタン、リンク画像の3つのデザイン要素について解説し、さらに3つの異なるリンクボタンのデザインを紹介します。
また、「a href=”#~~~”」の部分は、リンク先を示しているので、リンク先の設定は、前述したようなidタグを活用して、事前に設定が必要です。
テキストからページ内にリンクする
テキストリンクは、最もシンプルなリンク方法で、通常は文章の一部にリンクを設定します。これは目次やナビゲーションリンクなどでよく使用され、ページ内の特定の場所へジャンプできます。
<a href="#section1">セクション1へジャンプ</a>このようなリンクは、読みやすさや自然な流れを損なわずに、ユーザーが簡単に目的の場所に移動できる方法です。
ボタンを押したらページ内リンクさせる
リンクボタンは、より目立たせたいリンクに使用されます。
ここでは、3種類の異なるデザインのリンクボタンを提案します。CSSを使って、ボタンのスタイルを調整することが重要です。
ページ内リンクボタン①シンプルでフラットなデザイン
詳細を見る <a href="#section2" class="simple-button">詳細を見る</a>.simple-button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
text-align: center;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.simple-button:hover {
background-color: #45a049;
}このデザインは、シンプルでフラットなボタンです。背景色が緑色で、ホバー時に少し色が変わるので、視覚的にも目立ちやすくなります。
ページ内リンクボタン②シャドウ付き立体感のあるデザイン
もっと詳しく<a href="#section3" class="shadow-button">もっと詳しく</a>.shadow-button {
display: inline-block;
padding: 12px 24px;
background-color: #f44336;
color: white;
text-align: center;
text-decoration: none;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease;
}
.shadow-button:hover {
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
}このボタンは、シャドウを追加することで立体感を強調しています。ユーザーがボタンにマウスを乗せると、シャドウが拡大し、クリックしやすさが増します。
ページ内リンクボタン③アニメーション付きデザイン
今すぐ確認<a href="#section4" class="animated-button">今すぐ確認</a>.animated-button {
display: inline-block;
padding: 12px 24px;
background-color: #008CBA;
color: white;
text-align: center;
text-decoration: none;
border-radius: 50px;
position: relative;
overflow: hidden;
transition: background-color 0.3s ease;
}
.animated-button:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 300%;
height: 300%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%) scale(0);
border-radius: 50%;
transition: transform 0.5s ease;
}
.animated-button:hover:before {
transform: translate(-50%, -50%) scale(1);
}
.animated-button:hover {
background-color: #005f73;
}このボタンは、ホバー時にアニメーションが発生し、中央から白い波が広がるような演出が加わります。視覚的にインパクトがあり、クリックを促す効果が高いデザインです。
画像がタップまたはクリックされたらページ内にリンクする
リンク画像は、画像自体にリンクを設定して、クリックすると他の場所へジャンプできるデザインです。例えば、製品の詳細画像をクリックすると、その詳細ページに移動するように設定することができます。
<a href="#section5"><img src="画像が入ってるディレクトリのリンク.jpg" alt="リンク画像"></a>視覚的に目立つ画像を使うことで、テキストよりも直感的にユーザーの目を引き、リンク先に誘導できます。
より詳しく見たい場合は、Windowsユーザーは、F12を押して開発者モードを開いてください。
ページ内リンクができない原因
ページ内リンクができない原因として、一般的に3つの原因があります。
それぞれ、解説します。
タグの記述が不適切
タグが正しくない場合、ページ内のリンクも正しく動作しません。よくある間違いは、リンク元のタグに書くべき「＃」が、リンク先のタグに書かれていることです。
逆に、リンク元のタグに「＃」を書き忘れていることもあります。ですので、最初に「＃」の有無を確認すると、問題が解決することが多いです。
リンク識別コードの重複
リンクの識別コードが重複していると、正しくジャンプできません。ページ内リンクは、始まりの場所と終わりの場所に同じ識別コードを書き込むことで、どこに移動するかを認識します。
しかし、タグをコピーすることで、同じページ内で同じ識別コードが重複することがあります。
この場合、どこに着地すればよいのかわからなくなり、ページ内リンクがうまく機能しません。識別コードの重複を確認し、重複があれば他の識別コードに変更してください。
jQuery Mobileの活用
jQuery Mobileを使ってスマートフォン用のページを作るとき、ページ内のリンクがうまく機能しないことがあります。これは、jQuery Mobileの特性により、リンクを作る際に必要な「＃」が効かなくなることがあるからです。
この問題を解決する方法として、aタグに data-ajax=”false” を追加することが有効です。これを行うことで、ページ内リンクが正しく動作するようになります。もしページ内リンクがうまくいかない場合、ぜひ試してみてください。
ページ内リンクの位置ずれの原因と調整方法
ページ内リンクがずれることがありますが、これは主にページが完全に読み込まれる前にリンクをクリックすることが原因です。
毎回位置ずれが起きている場合は、ヘッダーを固定していることが多く、その場合の調整方法を2つ紹介します。
1つ目は、ページ内リンクのジャンプ先のid属性にCSSを設定する方法です。ヘッダーが固定されていると、リンクがヘッダーの高さ分ずれてしまうことがあります。これを解消するには、ヘッダーの高さだけずらし、マイナスの値を設定します。例えば、ヘッダーが60pxの場合、「padding-topを60px」にし、「margin-topを-60px」にします。
2つ目は、jQueryを使って調整する方法です。リンク先の表示位置をヘッダーの高さを引いた位置から指示するコードを書きます。ページ内リンクが毎回同じようにずれる場合は、これらの方法を試してみてください。
3つ目は、CocoonからSWELLへ移行するなど、WordPressのテーマを移行したときに発生する位置ずれがあります。この場合、画像自体がずれている場合があるので、ずれる前後の画像付近の要素を削除し、再度設定してみましょう。
ページ内リンクに関するよくある質問
ページ内リンクに関するよくある質問をまとめています。
ページ内リンクとはどういうものですか？
ページ内リンクは、ユーザーが現在見ているWebページの中で、異なる位置に移動できる仕組みを示しています。 特に、HTMLのaタグのhref属性やhタグのid属性を活用して、任意の箇所へ移動するためのリンクです。
ページ内のアンカーとは何でしょうか？
アンカーリンクとは、WEBページを閲覧中に、クリックすることでページ内の特定の位置に移動できるリンクのことを指します。 ページ内リンクとも呼ばれます。 アンカーは英語でいかりを下ろす、または固定するという意味があります。
HTMLで特定の位置にリンクするためにはどうしたらよいですか？
特定の位置にジャンプするための方法 HTMLページ内の特定の位置に移動するためには、「アンカータグ」を用います。 アンカータグは、「#○○」という形式でaタグに設定し、「○○」には移動したいid名を記入します。 アンカータグと移動先のid指定は同時に使わなければ機能しないため、注意が必要です。
マーケメディアでは、SEO対策に関する資料を多く掲載しており、無料で閲覧できます。企業のメールアドレスがあれば、誰でもチェックできるので、気になる資料があれば、ぜひご覧ください。
コメント