ページ内リンクの効果的な使い方とSEOへの影響 HTMLの書き方とデザインのコツ

ページ内リンクとは、同じページ内の特定の場所にジャンプするリンクのことです。

ページ内リンクを設置すると、ユーザーが読みたい内容にすぐにアクセスできるようになり、ユーザビリティやSEOにも効果があります。

しかし、ページ内リンクの作り方やデザイン、不具合の対処法などを知らないと、うまく活用できません。この記事では、ページ内リンクの基本的な作り方と効果的な使い方について解説します。

ページ内リンクとは
ページ内リンクの作り方
HTMLでページ内リンクを作る方法
HTML5でページ内リンクを作る方法
WordPressでページ内リンクを作る方法
ページ内リンクのデザイン
テキストリンク
リンクボタン
リンク画像
ページ内リンクがうまく動かないときの対処法
タグが正しく書かれていない
リンクの識別コードが重複している
jQuerymobileを利用している
ページ内リンクの位置がずれるときの調整法
まとめ

ページ内リンクとは

ページ内リンクとは、同じページ内の特定の場所にジャンプするリンクのことです。

ページ内リンクは、「ページ内ジャンプ」「アンカーリンク」とも呼ばれています。ページ内リンクを設置すると、ユーザーが読みたい内容にすぐにアクセスできるようになります。例えば、この記事の最初にある目次は、ページ内リンクを使って各項目にジャンプできるようになっています。このように、ページ内リンクは、ユーザビリティを高めるために重要な要素です。

また、ページ内リンクは、SEOにも効果があります。ページ内リンクを設置すると、ページ内のキーワードを強調することができます。

また、ページ内リンクをクリックすると、ページの滞在時間が長くなります。これは、検索エンジンにとって、ページの品質や信頼性の指標となります。したがって、ページ内リンクを設置することで、検索順位を上げることができる可能性があります。

ページ内リンクの作り方

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

HTMLでページ内リンクを作る方法
HTML5でページ内リンクを作る方法
WordPressでページ内リンクを作る方法

それぞれの方法について詳しく見ていきましょう。

HTMLでページ内リンクを作る方法

HTMLでページ内リンクを作る方法は、要素の名前を指定するname属性を使う方法です。この方法は、HTML4までの標準的な方法でしたが、現在は非推奨となっています。しかし、古いサイトやブラウザではまだ使われていることがありますので、知っておくと便利です。

HTMLでページ内リンクを作る方法は、以下の2つの手順で行います。

リンクで飛んだ先に設定したいタイトルに、アンカー要素（aタグ）のname属性で属性値を指定する。
そのタイトルに飛ぶことができるように設定するジャンプのタグには、href属性に属性値の前に#をつけて指定する。

例えば、タイトルに「ページ内リンクとは」というテキストを設定し、そのタイトルに飛ぶことができるようにする場合は、以下のように書きます。

<a href="#link">ページ内リンクとは</a>
<a name="link">ページ内リンクとは</a>

このように書くことで、「ページ内リンクとは」というテキストをクリックすると、「ページ内リンクとは」というタイトルに飛ぶことができます。

HTML5でページ内リンクを作る方法

HTML5でページ内リンクを作る方法は、要素の識別子を指定するid属性を使う方法です。この方法は、HTML5で推奨される方法で、name属性よりも柔軟にページ内リンクを設定できます。HTML5では、アンカー要素（aタグ）以外にも、h2やdivなどのあらゆる要素でid属性が指定できるようになっています。

HTML5でページ内リンクを作る方法は、以下の2つの手順で行います。

リンクで飛んだ先に設定したいタイトルに、任意の要素のid属性で属性値を指定する。
そのタイトルに飛ぶことができるように設定するジャンプのタグには、href属性に属性値の前に#をつけて指定する。

<a href="#link">ページ内リンクとは</a>
<h2 id="link">ページ内リンクとは</h2>

WordPressでページ内リンクを作る方法

WordPressでページ内リンクを作る方法は、プラグインを利用する方法です。WordPressでは、テキスト編集をしなくても、プラグインを利用することで簡単にページ内リンクを作ることができます。代表的なプラグインは「Advanced Editor Tools」です。

このプラグインをインストールすると、リンク先やリンク元のページ内リンクを入れたい箇所にカーソルを合わせて、idを設定するだけで、ページ内リンクを作ることができます。

WordPressでページ内リンクを作る方法は、以下の手順で行います。

WordPressのダッシュボードから「プラグイン」→「新規追加」をクリックし、「Advanced Editor Tools」を検索してインストールする。
インストールしたプラグインを有効化する。
ページ内リンクを作りたい記事を編集画面で開く。
リンク先に設定したいタイトルにカーソルを合わせて、ツールバーの「アンカー」アイコンをクリックする。
「アンカー名」に任意のidを入力して「OK」をクリックする。
リンク元に設定したいテキストにカーソルを合わせて、ツールバーの「リンク」アイコンをクリックする。
「URL」に#と先ほど入力したidを入力して「OK」をクリックする。

このようにすることで、ページ内リンクが作成されます。プラグインを利用すると、HTMLの知識がなくても、簡単にページ内リンクを作ることができます。

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

ページ内リンクのデザインは、ページの見た目や印象に影響する重要な要素です。ページ内リンクのデザインには、以下の3つの方法があります。

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

それぞれの方法について詳しく見ていきましょう。

テキストリンク

テキストリンクとは、テキストにリンクを貼る方法です。テキストリンクは、最もシンプルで一般的なページ内リンクのデザインです。

テキストリンクを設定すると、テキストの色や下線が変わり、リンクであることが分かりやすくなります。テキストリンクのデザインは、CSSでカスタマイズすることができます。例えば、以下のように書くことで、テキストリンクの色や下線を変更できます。

a {
  color: blue;
  text-decoration: underline;
}

a:hover {
  color: red;
  text-decoration: none;
}

このように書くことで、テキストリンクは青色で下線付きになり、マウスオーバーすると赤色で下線なしになります。テキストリンクのデザインは、ページのテーマや目的に合わせて調整することができます。

ただし、テキストリンクのデザインは、リンクであることが明確に分かるようにすることが重要です。リンクであることが分かりにくいと、ユーザーがクリックしない可能性があります。

リンクボタン

リンクボタンとは、ボタンにリンクを貼る方法です。リンクボタンは、テキストリンクよりも目立ちやすく、ユーザーの注意を引くことができます。

リンクボタンを設定すると、ボタンの形や色や影などが変わり、リンクであることが分かりやすくなります。リンクボタンのデザインは、CSSでカスタマイズすることができます。例えば、以下のように書くことで、リンクボタンの形や色や影を変更できます。

a.button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: green;
  color: white;
  box-shadow: 2px 2px 4px gray;
}

a.button:hover {
  background-color: lime;
  box-shadow: none;
}

このように書くことで、リンクボタンは緑色で丸みのあるボタンになり、マウスオーバーすると黄緑色で影が消えるようになります。

リンクボタンのデザインは、ページのテーマや目的に合わせて調整することができます。ただし、リンクボタンのデザインは、ボタンであることが明確に分かるようにすることが重要です。

ボタンであることが分かりにくいと、ユーザーがクリックしない可能性があります

リンク画像

リンク画像とは、画像にリンクを貼る方法です。リンク画像は、テキストリンクやリンクボタンよりも視覚的に魅力的で、ユーザーの興味を引くことができます。

リンク画像を設定すると、画像の枠や影や拡大などが変わり、リンクであることが分かりやすくなります。リンク画像のデザインは、CSSでカスタマイズすることができます。例えば、以下のように書くことで、リンク画像の枠や影や拡大を変更できます。

a.image {
  display: inline-block;
  border: 1px solid black;
  box-shadow: 2px 2px 4px gray;
}

a.image:hover {
  transform: scale(1.1);
  box-shadow: none;
}

このように書くことで、リンク画像は黒色で枠付きになり、マウスオーバーすると少し拡大して影が消えるようになります。リンク画像のデザインは、ページのテーマや目的に合わせて調整することができます。

ただし、リンク画像のデザインは、画像であることが明確に分かるようにすることが重要です。画像であることが分かりにくいと、ユーザーがクリックしない可能性があります。

ページ内リンクがうまく動かないときの対処法

ページ内リンクを設定したのに、うまく動かないときがあります。ページ内リンクがうまく動かないときの原因と対処法には、以下の3つがあります。

タグが正しく書かれていない
リンクの識別コードが重複している
jQuerymobileを利用している

それぞれの原因と対処法について詳しく見ていきましょう。

タグが正しく書かれていない

ページ内リンクがうまく動かないときの最も一般的な原因は、タグが正しく書かれていないことです。タグが正しく書かれていないと、ブラウザがページ内リンクを認識できないため、ジャンプできません。

タグが正しく書かれているかどうかは、以下の点に注意して確認してください。

href属性とid属性の値が一致しているか
href属性の値の前に#がついているか
id属性の値に空白や記号が含まれていないか
タグの開始と終了が正しく行われているか

例えば、以下のように書くと、ページ内リンクがうまく動きません。

ページ内リンクとは

この場合、href属性の値の前に#がついていないため、ページ内リンクとして認識されません。正しくは、以下のように書く必要があります。

<a href="#link">ページ内リンクとは</a>
<h2 id="link">ページ内リンクとは</h2>

このように、タグが正しく書かれているかどうかを確認して、ページ内リンクがうまく動くように修正しましょう。

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

ページ内リンクがうまく動かないときのもう一つの原因は、リンクの識別コードが重複していることです。リンクの識別コードとは、href属性やid属性の値のことです。

リンクの識別コードが重複していると、ブラウザがページ内リンクの正しい先を判断できないため、ジャンプできません。リンクの識別コードが重複していないかどうかは、以下の点に注意して確認してください。

同じページ内に同じid属性の値が存在しないか
同じページ内に同じhref属性の値が存在しないか
別のページに同じid属性の値が存在しないか

例えば、以下のように書くと、ページ内リンクがうまく動きません。

<a href="#link">ページ内リンクとは</a>
<h2 id="link">ページ内リンクとは</h2>
<a href="#link">ページ内リンクの作り方</a>
<h2 id="link">ページ内リンクの作り方</h2>

この場合、id属性の値がlinkという同じ値になっているため、ページ内リンクがうまく動きません。正しくは、以下のように書く必要があります。

<a href="#link1">ページ内リンクとは</a>
<h2 id="link1">ページ内リンクとは</h2>
<a href="#link2">ページ内リンクの作り方</a>
<h2 id="link2">ページ内リンクの作り方</h2>

このように、リンクの識別コードが重複していないかどうかを確認して、ページ内リンクがうまく動くように修正しましょう。

jQuerymobileを利用している

ページ内リンクがうまく動かないときのもう一つの原因は、jQuerymobileを利用していることです。jQuerymobileとは、モバイル向けのWebサイトを作るためのJavaScriptライブラリです。

jQuerymobileを利用すると、ページの遷移やアニメーションなどを簡単に実装できます。しかし、jQuerymobileは、ページ内リンクの動作を変更することがあります。

jQuerymobileは、ページ内リンクをクリックすると、ページの一部をAjaxで読み込んで表示します。これは、ページの読み込み時間を短縮するために有効な方法ですが、ページ内リンクのジャンプが正しく行われないことがあります。

jQuerymobileを利用しているときに、ページ内リンクがうまく動くようにするには、以下の方法があります。

リンクのタグにdata-ajax=”false”という属性を追加する。
リンクのタグにrel=”external”という属性を追加する。
jQuerymobileの設定で、Ajaxを無効にする。

それぞれの方法について詳しく見ていきましょう。

リンクのタグにdata-ajax=”false”という属性を追加する

リンクのタグにdata-ajax=”false”という属性を追加すると、jQuerymobileは、そのリンクをAjaxで読み込まずに、通常のページ内リンクとして扱います。

この方法は、個別のリンクに対してページ内リンクを有効にしたいときに便利です。例えば、以下のように書くことで、ページ内リンクがうまく動きます。

<a href="#link" data-ajax="false">ページ内リンクとは</a>
<h2 id="link">ページ内リンクとは</h2>

このように、リンクのタグにdata-ajax=”false”という属性を追加することで、ページ内リンクがうまく動くようになります。

リンクのタグにrel=”external”という属性を追加する

リンクのタグにrel=”external”という属性を追加すると、jQuerymobileは、そのリンクを外部のリンクとして扱い、Ajaxで読み込まずに、新しいページとして開きます。

この方法は、ページ内リンクを別のページとして表示したいときに便利です。例えば、以下のように書くことで、ページ内リンクがうまく動きます。

<a href="#link" rel="external">ページ内リンクとは</a>
<h2 id="link">ページ内リンクとは</h2>

このように、リンクのタグにrel=”external”という属性を追加することで、ページ内リンクがうまく動くようになります。

jQuerymobileの設定で、Ajaxを無効にする

jQuerymobileの設定で、Ajaxを無効にすると、jQuerymobileは、すべてのリンクをAjaxで読み込まずに、通常のページ遷移として扱います。この方法は、ページ内リンクを含むすべてのリンクに対してAjaxを無効にしたいときに便利です。jQuerymobileの設定で、Ajaxを無効にするには、以下のように書きます。

$(document).bind("mobileinit", function(){
  $.mobile.ajaxEnabled = false;
});

このように書くことで、jQuerymobileの設定で、Ajaxを無効にすることができます。

以上の方法の中から、自分のサイトの目的やデザインに合わせて、最適な方法を選択してください。jQuerymobileを利用しているときに、ページ内リンクがうまく動くようにすることで、ユーザビリティやSEOにも効果があります。

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

ページ内リンクを設定したのに、ジャンプした先の位置がずれるときがあります。ページ内リンクの位置がずれるときの原因と調整法には、以下の2つがあります。

固定ヘッダーがある
スムーススクロールを実装している

それぞれの原因と調整法について詳しく見ていきましょう。

固定ヘッダーがある

ページ内リンクの位置がずれるときの一般的な原因は、固定ヘッダーがあることです。固定ヘッダーとは、ページの上部に常に表示されるメニューやロゴなどのことです。

固定ヘッダーは、ページのナビゲーションやブランディングに効果的ですが、ページ内リンクの位置に影響を与えます。固定ヘッダーがあると、ページ内リンクをクリックしたときに、ジャンプした先のタイトルが固定ヘッダーに隠れてしまうことがあります。

これは、ユーザーにとって不便で、ページの内容が分かりにくくなります。

固定ヘッダーがあるときに、ページ内リンクの位置がずれないようにするには、以下の方法があります。

CSSでpadding-topとmargin-topを調整する。
JavaScriptでスクロール位置を調整する。

それぞれの方法について詳しく見ていきましょう。

CSSでpadding-topとmargin-topを調整する

CSSでpadding-topとmargin-topを調整すると、ページ内リンクの位置を固定ヘッダーの高さ分だけ下げることができます。この方法は、シンプルで簡単に実装できますが、ページのレイアウトに影響を与える可能性があります。

CSSでpadding-topとmargin-topを調整するには、以下のように書きます。

h2 {
  padding-top: 100px;
  margin-top: -100px;
}

このように書くことで、h2タグの要素に対して、padding-topで上に100pxの余白を作り、margin-topで上に-100pxのマージンを作ります。

これにより、ページ内リンクをクリックしたときに、h2タグの要素が固定ヘッダーの下に隠れないようになります。ただし、この方法は、固定ヘッダーの高さが100pxであることを前提としています。固定ヘッダーの高さが変わると、padding-topとmargin-topの値も変更する必要があります。

また、この方法は、h2タグの要素に対してのみ有効です。他の要素にもページ内リンクを設定したい場合は、それぞれに対して同じようにCSSを書く必要があります。

JavaScriptでスクロール位置を調整する

JavaScriptでスクロール位置を調整すると、ページ内リンクをクリックしたときに、ジャンプした先の位置を固定ヘッダーの高さ分だけ上にずらすことができます。

この方法は、ページのレイアウトに影響を与えないで、ページ内リンクの位置を調整できますが、JavaScriptの知識が必要です。JavaScriptでスクロール位置を調整するには、以下のように書きます。

$(document).ready(function(){
  $("a[href^='#']").click(function(e){
    e.preventDefault();
    var target = $(this).attr("href");
    var headerHeight = $("header").height();
    var offset = $(target).offset().top - headerHeight;
    $("html, body").animate({scrollTop: offset}, 500);
  });
});

このように書くことで、href属性の値が#で始まるaタグの要素をクリックしたときに、以下の処理を行います。

e.preventDefault()で、デフォルトのページ内リンクの動作をキャンセルします。
var target = $(this).attr(“href”)で、クリックしたリンクのhref属性の値を取得します。
var headerHeight = $(“header”).height()で、固定ヘッダーの高さを取得します。
var offset = $(target).offset().top – headerHeightで、ジャンプした先の要素の上端からページの上端までの距離から、固定ヘッダーの高さを引いた値を計算します。
$(“html, body”).animate({scrollTop: offset}, 500)で、ページをスクロールして、offsetの値に合わせた位置に移動します。500は、スクロールにかかる時間をミリ秒で指定したものです。

このように書くことで、JavaScriptでスクロール位置を調整することができます。

以上の方法の中から、自分のサイトの目的やデザインに合わせて、最適な方法を選択してください。固定ヘッダーがあるときに、ページ内リンクの位置がずれないようにすることで、ユーザビリティやSEOにも効果があります。