- 公開日： 最終更新日：
ページ内リンクとは？htmlの書き方や飛ばない時の解決策
ページ内リンクは、訪問者にとって情報を探しやすくし、読みやすいページ構成をつくるうえで重要な要素です。基本的な仕組みや使い方を理解しておくことで、サイト全体の品質にも関わってきます。
このページでは、ページ内リンクについて知りたい方に向けて、基礎から丁寧に解説しています。
目次
ページ内リンクとは
ページ内リンクとは、同じページ内の特定の場所へジャンプするためのリンクのことです。一般的なリンクは別のページに移動しますが、ページ内リンクは現在表示されているページの中で、目的の位置にスクロール移動させる役割を持っています。
例えば、ブログの記事では目次から各セクションへ移動できるようにしているケースがあります。リンクをクリックするとページが上下に動き、指定された場所にスクロールするため、閲覧者の利便性が高まります。
記事の目次についての詳細は、記事の目次とは？のページをご覧ください。
ホームページ制作においては、情報量が多くなるほど、ページ内リンクの有無がユーザビリティに大きく影響するようになります。
HTMLやCSS、場合によってはJavaScriptを組み合わせることで、よりスムーズに移動させたり、デザインを調整したりできます。また、ページ内リンクには、URLに#を含めた形式が使われることが多く、英語表記のid属性を使ってリンク先を指定するのが一般的です。
ページ内リンクのメリット
ページ内リンクは、単なる装飾やナビゲーション機能ではなく、ユーザー体験や検索評価にも関わる重要な役割を担っています。ここではページ内リンクのメリットを紹介します。
ユーザビリティが向上する
ページ内リンクを設置することで、訪問者がページ内の必要な情報へスムーズにアクセスできるようになります。特に、FAQや長文のコンテンツなど、構成が複雑になりやすいページでは、目次やジャンプリンクの有無が使いやすさに直結します。
スクロールの手間を減らすことで、読みたい情報にすぐたどり着けるため、離脱率の低下や滞在時間の向上にもつながります。ユーザビリティの高い設計は、結果としてサイト全体の評価にも良い影響を与えます。
SEOに良い影響を与える可能性がある
ページ内リンクは、HTML構造を整理し、検索エンジンにとってもページの内容を把握しやすくする効果があります。見出しごとのジャンプリンクを設置することで、検索クローラーがコンテンツを階層的に理解しやすくなり、インデックス精度が向上することがあります。
また、Googleの検索結果にサイトリンクが表示される可能性もあり、クリック率の改善につながるケースもあります。内部構造を明確にするという意味でも、SEO対策の一環としてページ内リンクは有効です。
ページ内リンクの書き方
ページ内リンクは、使用する技術やサイトの運営環境によって設定方法が異なります。ここでは、HTMLやHTML5を使った書き方から、WordPressを使った設定方法までを紹介します。
HTMLを使った書き方
従来のHTMLでは、ページ内リンクを設定する際にname属性を使用していました。リンクの飛び先となる要素に<a name="anchor">のようにname属性を指定し、リンク元には<a href="#anchor">リンクテキスト</a>を記述します。
<a href="#title">タイトルへジャンプ</a>...<a name="title">タイトル</a>
この方法により、同一ページ内で指定した位置にスクロールして移動するリンクを実装できます。ただし、name属性はHTML5以降では非推奨となっているため、現在はid属性を使う方法が主流です。
HTML5を使った書き方
HTML5では、ページ内リンクの設定にid属性を使うのが一般的です。idはどのHTML要素にも指定できるため、見出しやセクションなど、任意の要素をリンク先にできます。
<a href="#section1">セクション1へ</a>...<h2 id="section1">セクション1</h2>
このように、idを使えば<h2>や<div>などの要素にも直接リンクでき、柔軟な構造を作ることができます。また、英語のIDを指定することで、URLとの相性も良くなります。
HTMLページ内でスムーズなスクロールを実現するには、CSSやJavaScriptを組み合わせる方法もあります。
WordPressを使った設定方法
WordPressを利用している場合、HTMLの編集に不慣れな方でも、プラグインを利用することでページ内リンクを簡単に設定できます。
代表的なプラグインとして、Easy Table of Contentsを使うと、自動的に目次とページ内リンクが生成されます。WordPressではテーマやプラグインによって仕様が異なるため、設定後には確認を行うことが大切です。
ページ内リンクのデザイン
ページ内リンクは、見た目のデザインによってユーザーの行動を左右することがあります。どのような形で表示するかを工夫することで、サイトの使いやすさや視認性も向上します。ここでは、ページ内リンクのデザインを紹介します。
テキスト
テキストリンクは、もっとも基本的なページ内リンクの形式です。見出しや目次などの箇所で、ユーザーが必要な情報にすぐアクセスできるように設置されます。
デザイン面では、リンクテキストに下線や色の変化をつけて、通常の文章と区別しやすくすることが重要です。また、CSSでホバー時のスタイルを調整することで、マウスを乗せたときの視認性も高まります。
テキストリンクは導線が自然で、情報量の多いページでも邪魔になりにくいため、ホームページ制作においても広く使われています。
ボタン
ボタン型のページ内リンクは、視覚的に目立たせたい場合や、ユーザーに強く行動を促したい場面に適しています。たとえば、詳細を見るやページ上部へ戻るといった用途で活用されることが多く、コンバージョンを意識した導線設計にも使われます。
CSSでサイズや背景色、角丸、影などを調整することで、ボタンの存在感やクリックのしやすさを高められます。ユーザーが迷わず行動できるように設計することがポイントです。
画像
画像にページ内リンクを設定することで、視覚的な訴求力を持たせたナビゲーションが可能になります。たとえば、製品画像やバナー画像をクリックすると、同一ページ内の詳細セクションにジャンプするといった使い方が一般的です。
デザインの自由度は高い一方で、画像リンクはテキストと違いリンクだと気づかれにくいケースもあるため、視覚的な工夫が必要です。CSSでホバー時に画像を暗くしたり、アイコンを重ねたりするなど、ユーザーがリンクと認識しやすい設計にすることが重要です。
ページ内リンクが飛ばない時の解決策
正しく設定したはずのページ内リンクがうまく動作しない場合、いくつかの技術的な原因が考えられます。ここでは、よくあるトラブルとその解決策を紹介します。
HTMLタグを確認する
ページ内リンクが飛ばない原因のひとつに、HTMLタグの記述ミスがあります。リンク先を示すidやnameの指定、リンク元のhref="#○○"の形式が正しくないと、ジャンプが正常に機能しません。
特によくあるのは、#を忘れてhref="title"と記述してしまったり、リンク先に#titleと記載してしまうケースです。また、スペルミスや半角・全角の混在にも注意が必要です。
まずは、リンク元とリンク先のタグを見直し、記述が正確であるかを確認しましょう。
着地点の識別コードが重複している
ページ内リンクは、リンク元とリンク先のid属性やname属性が一致することで動作します。しかし、同一ページ内で同じ識別子が複数存在すると、リンク先の場所が特定できず、正しく動作しないことがあります。
たとえば、テンプレートのコピペやセクションの複製時に、意図せず同じid="title"を複数箇所に設定してしまうケースです。このような場合は、識別コードをそれぞれ異なるものに変更することで、リンクの不具合を防ぐことができます。
jQuery mobileが影響している
スマートフォン向けのページ作成などでjQuery Mobileを使っている場合、仕様の影響でページ内リンクが正常に動作しないことがあります。jQuery Mobileは#を使ったアンカーリンクを制御しており、意図しない挙動を引き起こすことがあります。
この問題を回避するには、リンクにdata-ajax="false"を追加する方法があります。これにより、通常のHTMLとしてアンカーリンクが動作し、ページ内リンクのトラブルを回避できます。jQuery Mobileを導入している環境でリンクが飛ばないときは、まずこの設定を試してみるとよいでしょう。
ページ内リンクの位置がずれる原因と調整法
ページ内リンクをクリックした際に、リンク先の位置がずれてしまうことがあります。特に、リンク先の見出しや重要なコンテンツがヘッダーに隠れてしまうというケースは、ホームページ制作でよくある現象です。
このようなずれが発生する場合、多くはページ上部に固定されたヘッダーが原因となっています。CSSでposition: fixedを指定しているヘッダーは、常に画面上に表示されるため、ページ内リンクでスクロールされた位置と実際の表示位置に差が生じてしまうのです。
この問題を解決する方法として、主に2つのアプローチがあります。
CSSで着地点の位置を補正する方法
リンク先となる要素に対して、padding-topとmargin-topを使って調整する方法です。たとえば、ヘッダーの高さが80pxある場合、次のように指定します。
.target {
padding-top: 80px;
margin-top: -80px;
}
この指定により、実際の着地点がヘッダーに隠れることなく、自然な位置に表示されるようになります。CSSで制御できるため、HTMLの構造を変えずに対応できるのもメリットです。
jQueryでスクロール位置を制御する方法
もうひとつの方法は、ページ内リンクがクリックされた際に、スクロール位置をヘッダーの高さ分だけ調整する方法です。jQueryを使えば、以下のような処理で簡単に制御できます。
$('a[href^="#"]').click(function () {
const speed = 400;
const href = $(this).attr("href");
const target = $(href === "#" || href === "" ? 'html' : href);
const headerHeight = 80; // 固定ヘッダーの高さ
const position = target.offset().top - headerHeight;
$('html, body').animate({scrollTop: position}, speed, 'swing');
return false;
});
この方法を使うと、すべてのページ内リンクに対して一括でスクロール補正ができるため、規模の大きいホームページに適しています。
ページ内リンクのまとめ
ページ内リンクは、サイト訪問者が必要な情報にスムーズにたどり着くために欠かせない要素です。正しく設置することで、ユーザビリティの向上やSEO対策にもつながります。
ホームページ制作においては、HTMLやCSSの基本的な理解に加え、WordPressではプラグインを活用すれば、スムーズに設定することができます。
この機会に、自社サイトのページ内リンクを見直し、より使いやすい構成を意識してみてはいかがでしょうか。
