同じページ内にジャンプ！HTMLを利用したアンカーリンクの設定方法

この記事では、HTMLを使用してページ内リンクを設定する方法を解説します。

ページ内リンク（アンカーリンク）は、同じページ内の特定の位置にジャンプするためのリンク。

飛んで戻ってこれたでしょうか？

適切なページ内リンクが置いてあると、読者を目的の情報にスムーズに誘導することができ、親切な記事作りに役立ちます。覚えておくと便利ですよ。

HTMLを使用したページ内リンク（アンカーリンク）設定

アンカーポイント（目印）にはHTMLの「id」属性を使う方法でおこないます。

idは要素に対して固有の識別子を設定するための属性。つまり要素につける名前のようなものです。

id属性に使える文字・記号

書き出しは半角アルファベットで始まり、大文字/小文字は区別されます。またclass属性に指定できた日本語の平仮名やカタカナ、様々な記号など使えないものがあります。すべて半角を使います。

a要素のname属性は廃止

従来は<a name=”goal”>goalにジャンプする</a>といったname属性を用いた方法もありましたが、a要素のname属性は2014年に発売されたHTML5で廃止されました。

（2024年現在、HTML5も廃止されHTML Living Standardになっています。知らなかった～）

ネットで検索するとa要素のname属性を使用したアンカーリンクの記事がありますが、情報が古い可能性が高いです。id属性を使う方法でおこないましょう。

ページ内リンク（アンカーリンク）の設定方法

リンク先のアンカーポイントを設定する

ここに飛びたい！という位置（リンク先）のHTML要素に、目印となるアンカーポイント（id 属性）を設定します。２つの方法があり、どちらでもOKです。

方法１）ブロックエディタの高度な設定「HTMLアンカー」を使う 簡単

ブロックエディタではこのアンカー指定がとても簡単です。

この方法で自動的にid属性が付与されたHTMLコードが作成されます。

方法２）カスタムHTMLにidを追加する

もうひとつは、直接HTMLを記述する方法です。

<h2 id="id-name">ここに着地します</h2>

リンク元を設定する／指定した位置へジャンプする方法

続いて、Step1で指定したidへリンク（ジャンプ）します。

リンクするにも２つの方法があり、どちらでもOKです。

方法１）ブロックエディタの「リンク機能」を使う 簡単

ブロックエディタだとこのリンク作成がとても簡単です。

この方法で自動的にHTMLの<a>タグを使ったリンクコードが作成されます。

方法２）カスタムHTMLで直接コードを記述

もうひとつは直接HTMLを記述する方法です。HTMLでリンクさせるときには<a>タグを使います。

<a href="ここにURL">id-nameへジャンプする</a>

ページ内リンク（アンカーリンク）の効果的な使い方

ユーザーが使いやすく

• 目次を作る
  • 長いページでは、最初に目次を設けて各セクションへのリンクを追加します。ユーザーは見たい情報にすぐアクセスできます。
• ナビゲーションの一部として使用
  • 「ここをクリック」ではなく、例えばリード文で「〇〇の設定方法を知りたい」のようにリンク先の内容が分かるテキストにします。特にモバイルでのユーザビリティ向上に役立ちます。スクロールが多いページでは、アンカーリンクを使うことでユーザーが目的の情報に迅速にアクセスでき親切です。
• 他のページの途中の要素へのリンク設定
  • 違うページの途中にリンクすることで、より効果的な内部リンクとナビゲーションとして使うことができます。
  • 他のページの途中の要素へのリンク設定
• 分かりやすいリンク表示
  • アンカーリンクを設定する際に、リンク先に移動できることを分かるようにします。例えばテキストリンクを青字にする、太字にして強調する、ボタンにする等です。
  • アンカーリンクの外観をカスタマイズする方法
• スムーズスクロールの実装
  • デフォルトではアンカーリンクは瞬時に目的地にジャンプしますが、スムーズスクロールを導入することでより滑らかな移動が可能になります。これはJavaScriptやCSSで実装できます。
  • CSSを使ったスムーススクロールの設定

SEO（検索エンジン最適化）の改善

• 内部リンクを増やす
  • アンカーリンクを使うことで、ページ内の他の部分とリンクを結びつけます。これにより、検索エンジンがページの構造を理解しやすくなります。

ページ内リンク（アンカーリンク）応用／別ページの特定の場所へのリンク設定

応用編で違うページの途中にリンクすることもできます。

他のページの特定のセクションにリンクする場合もアンカーリンクを使用します。この際、リンク先のページにアンカーポイント（id属性）が設定されている必要があります。

リンク先ページのURLとアンカーを組み合わせたリンク作成の仕方がポイント。

a href=”〜”の中を“飛びたいページのURL#id名”とします。スペースを入れずに#id名を続けて入れます。

<a href="https://turicco.com#page-top">ここからジャンプ</a>

ページ内リンク（アンカーリンク）の外観をカスタマイズする方法

<a >タグだけでは通常のテキストリンクになりますが、CSSを使ってボタンのように見せる装飾をつけることもできます。

また、お使いのテーマ独自のボタン機能を使うのもOK！

ボタンのURL設定で、リンク先URLに#id名を設定します。

CSSを使ってスムーズにスクロールする設定

例えばジャンプ先にパッと一瞬で飛ぶのではなく、スムーズにスクロールさせることもできます。（スムーススクロール設定）

ルート要素（html）にscroll-behavior: smooth;というCSSを加えればOK。

html {scroll-behavior: smooth;}

これだけでスムーズな動作が実現！

一瞬で切り替わると別のページに飛んでしまったかのような感覚になることがありますが、スクロールすると同一ページ内の移動であることが分かりやすいですね。

ページ内リンク（アンカーリンク）まとめ

以上についてご紹介しました。

意外と簡単だったのではないでしょうか？

アンカーリンクをうまく使うと、ユーザーが情報を簡単に見つけられ、ウェブページの使いやすさが向上します。また、SEOにもプラスの効果があります。

簡単な設定で大きな効果が得られるので、ぜひ活用しましょう。