サイト型トップページの作り方を公開しています!Check

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

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

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

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

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

例えば下のボタンをクリックすると実際にジャンプします。(戻るボタンでここに戻ってこれるので押してみてね)

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

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

このテキストもページ内リンクを使っています!
スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー40
  • 2023年~有料記事公開
    • →累計250件(月間約20件)購入いただいています
はっちゃん
です
プロフィール

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属性を使う方法でおこないましょう。

スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

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

  1. ブロックエディタの高度な設定HTMLアンカー」を使う 簡単
  2. カスタムHTMLにidを追加する

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

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

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

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

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

方法2)カスタムHTMLにidを追加する

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

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

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

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

  1. ブロックエディタの「リンク機能」を使う 簡単
  2. カスタムHTMLで直接コードを記述

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

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

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

id名の先頭には#(半角シャープ)をつけます。(つけないと動作しません)

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

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

おー、意外と簡単なのだ

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

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

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

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

ユーザーが使いやすく

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

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

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

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

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

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

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

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

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

こちらも簡単ですね!

スポンサーリンク

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

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

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

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

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

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

html {scroll-behavior: smooth;}

子テーマのスタイルシートに記述します。

\Cocoonの場合はこちらを参考にしてください/

子テーマのスタイルシートを使用します。

  1. 管理画面の「外観」から「テーマファイルエディター」をクリック
    • Cocoon Child: スタイルシート (style.css) のページが開きます
  2. 元から書いているコード(テーマ情報)は消さずにCSSを記述します
    • /* 子テーマ用のスタイルを書く*/から下の行に追加しましょう

子テーマ(Cocoon child)が選択されていることを確認します

CSS編集/スタイルシート

参考記事 Cocoonカスタマイズ/HTML・CSSの編集とワードプレスをバックアップする方法

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

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

当サイトでもスムーススクロールを導入しています!

ページ内リンク(アンカーリンク)まとめ

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

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

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

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

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

シェアはこちらから
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/

お買い物の際にぽちっとお願いします

Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

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をコピーしました