無料イラストなら【イラストAC】
無料会員登録

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

アイキャッチ/アンカーリンク カスタマイズ
カスタマイズ
記事内に広告が含まれています
スポンサーリンク

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

ページ内リンク?普通のリンクとは違うの??

同じページ内の途中にジャンプするイメージ!例えば下のボタンをクリックすると実際にジャンプします。(戻るボタンでここに戻ってこれます)

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

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

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

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー35
  • ワードプレスで複数サイトを運営しています
はっちゃん
です
プロフィール

HTMLを使用したジャンプ設定

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

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

名前なので、設定できるのはひとつだけです。

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

  • 半角アルファベット(a-z)
  • 数字(0-9)
  • ハイフン(-)
  • アンダースコア(_)

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

a要素のname属性は廃止

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

(2024年現在、HTML5も廃止されHTML Living Standardになっています)

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

スポンサーリンク

ページ内リンク(アンカーリンク)の設定方法

\簡単3ステップ/
  • Step1
    リンク先のアンカーポイントを設定する

    リンク先のHTMLに、目印となるid(アンカー)を設定します。

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

    ※ここでは例としてh2見出しにしていますが、idを追加する対象の要素はなんでもよいです。

  • Step2
    リンク設定/指定した位置へジャンプする

    指定したidへジャンプします。

    <a href="#id名">ここからジャンプ</a>
  • Step3
    完成

    プレビュー画面で動作確認

リンク先にid名(アンカー)をつけて、それを目印にリンクさせるイメージですね!

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

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

  1. 方法1)カスタムHTMLにidタグを追加してのアンカーリンク
  2. 方法2)ブロックエディタの高度な設定HTMLアンカー」を使ったアンカーリンク 簡単

例えば特定のh2見出しにジャンプしたい場合はこのように記述します。

方法1)カスタムHTMLにidタグを追加してのアンカーリンク

<h2 id="fish">ここに着地します</h2>
Id(アンカー)の記述方法
  • <h2>のタグの中に半角スペースをあけてid=”○”を追加する
  • id名を仮に「fish」としていますが、分かりやすいように任意に決めてOK 半角英数字
  • <h2>見出しタグの他に段落の<p>や<div>などでも良く、リンク先にタグの指定はありません

方法2)ブロックエディタの高度な設定「HTMLアンカー」を使ったアンカーリンク 簡単

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

\覚えておくと便利/
  1. 該当のブロックを選択(リンク先の要素)
  2. 右側サイドメニュー内「高度な設定」→「HTMLアンカー」の欄に任意のid名を入力するだけ!(先頭に#はつけず、id名だけを入力)

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

直接HTMLコードを記述した場合と同じです。ブロックエディタが便利すぎる!

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

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

  1. 方法1)カスタムHTMLで直接コードを記述したリンク設定
  2. 方法2)ブロックエディタの「リンク機能」を使ったリンク設定 簡単

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

HTMLでリンクさせるときには<a>タグを使います。

<a href="ここにURL">fishへジャンプする</a>
リンクの記述方法
  • <a>タグの中に href=”ここにURL”のように、URLを” “(半角ダブルクォーテーション)で囲んで記述します
  • <a></a>タグで囲みます
  • 同ページの特定の場所にする場合は、URLの部分を先頭に#(半角)をつけたid名にします。

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

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

\覚えておくと便利/
  1. リンクさせたいテキストを選択
  2. 上部ツールバーのリンクアイコンをクリック
  3. URLに#をつけてid名(アンカー)を入力
  4. internal をクリックして確定する

id名の先頭に#(半角シャープ)をつけるのを忘れないようにしましょう。

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

直接HTMLでリンクするコードを記述した場合と同じです。やはりブロックエディタが便利すぎる!

おー、意外と簡単なのだ

スポンサーリンク

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

ユーザーが使いやすくする

  • 目次を作る
    • 長いページでは、最初に目次を設けて各セクションへのリンクを追加します。ユーザーは見たい情報にすぐアクセスできます。
  • ナビゲーションの一部として使用
      • 「ここをクリック」ではなく、「セクション1の詳細はこちら」のようにリンク先の内容が分かるテキストにします。特にモバイルでのユーザビリティ向上に役立ちます。スクロールが多いページでは、アンカーリンクを使うことでユーザーが目的の情報に迅速にアクセスでき親切です。
  • 他のページの途中の要素へのリンク設定
  • 分かりやすいリンク表示

SEO(検索エンジン最適化)の改善

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

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

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

  1. リンク先ページにアンカー(id属性)を設定する
  2. リンク元ページで、リンク先ページのURLとアンカーを組み合わせたリンクを設定する

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

a href=”〜”の中を“飛びたいページのURL/#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にもプラスの効果があります。

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

↑このボタンをクリックすると記事の冒頭へ戻ります。

Comment

  1. はっちゃんさんのファン より:

    はっちゃんさんはじめまして。
    いつも分かりやすい記事をありがとうございます。沢山参考にさせていただいております。
    実はアンカーリンクがどうしても上手くいかず、困っていまして…。
    HTMLアンカーにidを入力するのですが、記事を保存すると消えてしまいます…。
    そういったことは起きたことはありますか?
    ネットで調べてもヒットせず、ここで質問させていただきました。
    もし少しでもなにか分かることがあれば教えて頂けないでしょうか。
    すみませんが、よろしくおねがいいたします。

    • はっちゃん はっちゃん より:

      > はっちゃんさんのファンさん

      初めまして。
      まず…ブログを見てくださりありがとうございます。

      HTMLアンカーの件ですが、保存すると消えるという事例は聞いたことがなく下記を確認してみてください。

      ①idに使う文字は合っているか

      ・半角アルファベット(a-z)
      ・数字(0-9)
      ・ハイフン(-)
      ・アンダースコア(_)

      また、書き出しは半角アルファベットで始まり大文字/小文字は区別されます。

      ②着地点(リンク先)
      ブロックを選択→高度な設定→HTMLアンカー

      に入力するときは「#」は不要。
      id名だけを入力しているか。

      カスタムHTMLで直接入力する場合、例えば<h2 id=”page-top”>ここに着地します</h2>のidの直前は半角スペースで区切っているか。

      ③リンクするとき
      URLのところに②の「#id名」を指定する。

      id名の先頭に「#」をつけているか。
      使う文字はスペースを含めてすべて半角です。

      リンクと着地点(リンク先)のidが一致し、適切に設定されていれば動作するかと思います。

  2. はっちゃんさんのファン より:

    はっちゃんさん、お返事いただきありがとうございます。
    気づくのが遅くなってしまい申し訳ありません。

    そしてお忙しい中細かく教えて頂きありがとうございます。
    いただいたアドバイスを見ながら、もう一度やってみたいと思います。

    本当にありがとうございます…!

タイトルとURLをコピーしました