この記事では、HTMLを使用してページ内リンクを設定する方法を解説します。
ページ内リンク(アンカーリンク)は、同じページ内の特定の位置にジャンプするためのリンク。
ページ内リンク?普通のリンクとは違うの??
例えば下のボタンをクリックすると実際にジャンプします。(戻るボタンでここに戻ってこれるので押してみてね)
飛んで戻ってこれたでしょうか?
適切なページ内リンクが置いてあると、読者を目的の情報にスムーズに誘導することができ、親切な記事作りに役立ちます。覚えておくと便利ですよ。
HTMLを使用したページ内リンク(アンカーリンク)設定
アンカーポイント(目印)にはHTMLの「id」属性を使う方法でおこないます。
idは要素に対して固有の識別子を設定するための属性。つまり要素につける名前のようなものです。
名前なので、設定できるのはひとつだけです。
id属性に使える文字・記号
- 半角アルファベット(a-z)
- 数字(0-9)
- ハイフン(-)
- アンダースコア(_)
書き出しは半角アルファベットで始まり、大文字/小文字は区別されます。またclass属性に指定できた日本語の平仮名やカタカナ、様々な記号など使えないものがあります。すべて半角を使います。
a要素のname属性は廃止
従来は<a name=”goal”>goalにジャンプする</a>といったname属性を用いた方法もありましたが、a要素のname属性は2014年に発売されたHTML5で廃止されました。
(2024年現在、HTML5も廃止されHTML Living Standardになっています。知らなかった~)
ネットで検索するとa要素のname属性を使用したアンカーリンクの記事がありますが、情報が古い可能性が高いです。id属性を使う方法でおこないましょう。
ページ内リンク(アンカーリンク)の設定方法
- Step1リンク先のアンカーポイントを設定する
リンク先のHTMLに、目印となるid(アンカー)を設定します。
<h2 id="id名">ここに着地します</h2>
※ここでは例としてh2見出しにしていますが、idを追加する対象の要素はなんでもよいです。
- Step2リンク設定/指定した位置へジャンプする
指定したidへジャンプします。
<a href="#id名">ここからジャンプ</a>
- Step3完成
プレビュー画面で動作確認
リンク先にid名(アンカー)をつけて、それを目印にリンクさせるイメージですね!
リンク先のアンカーポイントを設定する
ここに飛びたい!という位置(リンク先)のHTML要素に、目印となるアンカーポイント(id
属性)を設定します。2つの方法があり、どちらでもOKです。
- ブロックエディタの高度な設定「HTMLアンカー」を使う 簡単
- カスタムHTMLにidを追加する
方法1)ブロックエディタの高度な設定「HTMLアンカー」を使う 簡単
ブロックエディタではこのアンカー指定がとても簡単です。
- 該当のブロックを選択(リンク先の要素)
- 右側サイドメニュー内「高度な設定」→「HTMLアンカー」の欄に任意のid名を入力するだけ!(先頭に#はつけず、id名だけを入力)
この方法で自動的にid属性が付与されたHTMLコードが作成されます。
直接HTMLコードを記述した場合と同じです。ブロックエディタが便利すぎる!
方法2)カスタムHTMLにidを追加する
もうひとつは、直接HTMLを記述する方法です。
<h2 id="id-name">ここに着地します</h2>
- <h2>のタグの中に半角スペースをあけてid=”○”を追加する
- id名を仮に「id-name」としていますが、分かりやすいように任意に決めてOK 半角英数字
- <h2>見出しタグの他に段落の<p>や<div>などでも良く、リンク先にタグの指定はありません
リンク元を設定する/指定した位置へジャンプする方法
続いて、Step1で指定したidへリンク(ジャンプ)します。
リンクするにも2つの方法があり、どちらでもOKです。
- ブロックエディタの「リンク機能」を使う 簡単
- カスタムHTMLで直接コードを記述
方法1)ブロックエディタの「リンク機能」を使う 簡単
ブロックエディタだとこのリンク作成がとても簡単です。
- リンクさせたいテキストを選択
- 上部ツールバーのリンクアイコンをクリック
- URLに#をつけてid名(アンカー)を入力
- internal をクリックして確定する
この方法で自動的にHTMLの<a>タグを使ったリンクコードが作成されます。
直接HTMLでリンクするコードを記述した場合と同じです。やはりブロックエディタが便利すぎる!
おー、意外と簡単なのだ
方法2)カスタムHTMLで直接コードを記述
もうひとつは直接HTMLを記述する方法です。HTMLでリンクさせるときには<a>タグを使います。
<a href="ここにURL">id-nameへジャンプする</a>
- <a>タグの中に href=”ここにURL”のように、URLを” “(半角ダブルクォーテーション)で囲んで記述します
- <a></a>タグで囲みます
- 同ページの特定の場所にする場合は、URLの部分を先頭に#(半角)をつけたid名にします。
ページ内リンク(アンカーリンク)の効果的な使い方
ユーザーが使いやすく
- 目次を作る
- 長いページでは、最初に目次を設けて各セクションへのリンクを追加します。ユーザーは見たい情報にすぐアクセスできます。
- ナビゲーションの一部として使用
- 「ここをクリック」ではなく、例えばリード文で「〇〇の設定方法を知りたい」のようにリンク先の内容が分かるテキストにします。特にモバイルでのユーザビリティ向上に役立ちます。スクロールが多いページでは、アンカーリンクを使うことでユーザーが目的の情報に迅速にアクセスでき親切です。
- 他のページの途中の要素へのリンク設定
- 違うページの途中にリンクすることで、より効果的な内部リンクとナビゲーションとして使うことができます。
- 他のページの途中の要素へのリンク設定
- 分かりやすいリンク表示
- アンカーリンクを設定する際に、リンク先に移動できることを分かるようにします。例えばテキストリンクを青字にする、太字にして強調する、ボタンにする等です。
- アンカーリンクの外観をカスタマイズする方法
- スムーズスクロールの実装
- デフォルトではアンカーリンクは瞬時に目的地にジャンプしますが、スムーズスクロールを導入することでより滑らかな移動が可能になります。これはJavaScriptやCSSで実装できます。
- CSSを使ったスムーススクロールの設定
SEO(検索エンジン最適化)の改善
- 内部リンクを増やす
- アンカーリンクを使うことで、ページ内の他の部分とリンクを結びつけます。これにより、検索エンジンがページの構造を理解しやすくなります。
ページ内リンク(アンカーリンク)応用/別ページの特定の場所へのリンク設定
応用編で違うページの途中にリンクすることもできます。
他のページの特定のセクションにリンクする場合もアンカーリンクを使用します。この際、リンク先のページにアンカーポイント(id属性)が設定されている必要があります。
- リンク先ページにアンカー(id属性)を設定する
- リンク元ページで、リンク先ページのURLとアンカーを組み合わせたリンクを設定する
リンク先ページの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;}
子テーマのスタイルシートを使用します。
- 管理画面の「外観」から「テーマファイルエディター」をクリック
- Cocoon Child: スタイルシート (style.css) のページが開きます
- 元から書いているコード(テーマ情報)は消さずにCSSを記述します
- /* 子テーマ用のスタイルを書く*/から下の行に追加しましょう
これだけでスムーズな動作が実現!
一瞬で切り替わると別のページに飛んでしまったかのような感覚になることがありますが、スクロールすると同一ページ内の移動であることが分かりやすいですね。
当サイトでもスムーススクロールを導入しています!
ページ内リンク(アンカーリンク)まとめ
以上についてご紹介しました。
意外と簡単だったのではないでしょうか?
アンカーリンクをうまく使うと、ユーザーが情報を簡単に見つけられ、ウェブページの使いやすさが向上します。また、SEOにもプラスの効果があります。
簡単な設定で大きな効果が得られるので、ぜひ活用しましょう。
↑このボタンをクリックすると記事の冒頭へ戻ります。
Comment コメントはこちらへ
はっちゃんさんはじめまして。
いつも分かりやすい記事をありがとうございます。沢山参考にさせていただいております。
実はアンカーリンクがどうしても上手くいかず、困っていまして…。
HTMLアンカーにidを入力するのですが、記事を保存すると消えてしまいます…。
そういったことは起きたことはありますか?
ネットで調べてもヒットせず、ここで質問させていただきました。
もし少しでもなにか分かることがあれば教えて頂けないでしょうか。
すみませんが、よろしくおねがいいたします。
> はっちゃんさんのファンさん
初めまして。
まず…ブログを見てくださりありがとうございます。
HTMLアンカーの件ですが、保存すると消えるという事例は聞いたことがなく下記を確認してみてください。
①idに使う文字は合っているか
・半角アルファベット(a-z)
・数字(0-9)
・ハイフン(-)
・アンダースコア(_)
また、書き出しは半角アルファベットで始まり大文字/小文字は区別されます。
②着地点(リンク先)
ブロックを選択→高度な設定→HTMLアンカー
に入力するときは「#」は不要。
id名だけを入力しているか。
カスタムHTMLで直接入力する場合、例えば<h2 id=”page-top”>ここに着地します</h2>のidの直前は半角スペースで区切っているか。
③リンクするとき
URLのところに②の「#id名」を指定する。
id名の先頭に「#」をつけているか。
使う文字はスペースを含めてすべて半角です。
リンクと着地点(リンク先)のidが一致し、適切に設定されていれば動作するかと思います。
はっちゃんさん、お返事いただきありがとうございます。
気づくのが遅くなってしまい申し訳ありません。
そしてお忙しい中細かく教えて頂きありがとうございます。
いただいたアドバイスを見ながら、もう一度やってみたいと思います。
本当にありがとうございます…!