今回はページ内リンクについて。
（アンカーリンクとも呼ばれます）
ページ内リンク？普通のリンクとは違うの？？
同じページ内の途中にジャンプするイメージです！例えば下のボタンをクリックしてみてね。（戻るボタンでここに戻ってこれます）
飛んで戻ってこれたでしょうか？
このように同じページ内の途中へリンク（ジャンプ）する方法をご紹介します。
適切なページ内リンクが置いてあると、読者を目的の情報にスムーズに誘導することができ親切な記事作りに役立ちます。覚えておくと便利ですよ。
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- JavaScriptを勉強中
- ドメインパワー35
- ワードプレスで複数サイトを運営しています
です
ページ内にリンクする手順／アンカーリンク
- Step1目印をつける／リンク先のHTMLにid（アンカー）を設定
<h2 id="id名">ここに着地します</h2>※ここでは例としてh2見出しにしていますが、idをつける対象の要素はなんでもよいです。
- Step2リンクする／指定したidへジャンプさせる（idには先頭に#をつけます）
<a href="#id名">ここからジャンプ</a> - Step3完成
プレビュー画面で動作確認
リンク先にid名（アンカー）をつけて、それを目印にリンクさせるイメージですね！
アンカー（目印）にはHTMLの「id」属性を使います
当記事ではHTMLの「id」属性を使う方法でおこないます。
要素に対して固有の識別子を設定するための属性。
つまり要素に名前をつけるものですね。
idに使える文字・記号
- 半角アルファベット（a-z）
- 数字（0-9）
- ハイフン（-）
- アンダースコア（_）
書き出しは半角アルファベットで始まり、大文字/小文字は区別されます。またclass属性に指定できた日本語の平仮名やカタカナ、様々な記号など使えないものがあります。すべて半角を使います。
a要素のname属性は廃止されました
従来は<a name=”fish”>fishにジャンプする</a>といったname属性を用いた方法もありましたが、a要素のname属性は2014年に発売されたHTML5で廃止されました。
（2024年現在、HTML5も廃止されHTML Living Standardになっています）
では具体的に設定していきます。
目印をつける／リンク先のHTMLにid（アンカー）を設定
ここに飛びたい！という位置（着地点）のHTMLタグ（要素）に目印となるid（アンカー）を指定します。
２つの方法があり、どちらでもOKです。
- 方法１）カスタムHTMLで直接コードを記述する
- 方法２）ブロックエディタの「HTMLアンカー」を使う
例えば特定のh2見出しにジャンプしたい場合はこのように記述します。
方法１）カスタムHTMLで直接コードを記述
<h2 id="fish">ここに着地します</h2>- <h2>のタグの中に半角スペースをあけてid=”○”を追加する
- id名を仮に「fish」としていますが、分かりやすいように任意に決めてOK 半角英数字
- <h2>見出しタグの他に段落の<p>や<div>などでも良く、移動先にタグの指定はありません
方法２）ブロックエディタの「HTMLアンカー」を使う 簡単
ブロックエディタだとこのアンカー指定がとても簡単です。
- 該当のブロックを選択（目印をつけたい要素）
- 右側サイドメニュー内「高度な設定」→「HTMLアンカー」の欄に任意のid名を入力するだけ！
この方法で自動的にid属性が付与されたHTMLコードが作成されます。
直接HTMLコードを記述した場合と同じです。ブロックエディタが便利すぎる！
リンクする／指定したidへジャンプさせる
リンクするにも２つの方法があり、どちらでもOKです。
- 方法１）カスタムHTMLで直接コードを記述する
- 方法２）ブロックエディタの「リンク機能」を使う
方法１）カスタムHTMLで直接コードを記述
HTMLでリンクさせるときには<a>タグを使います。
他のページにリンクする場合
通常、例えば当サイトの「ホームページに戻る」といった通常のリンクをつけたい場合、HTMLはこのように記述します。
<a href="ここにURL">ホームページに戻る</a>- <a>タグの中に href=”ここにURL”のように、URLを” “（半角ダブルクォーテーション）で囲んで記述します
- <a></a>タグで囲みます
同じページ内にジャンプする場合
これを他のページではなく同ページの特定の場所にする場合は、URLの部分を先頭に#（半角）をつけたid名にします。
<a href="#fish">fishへジャンプする</a>方法２）ブロックエディタの「リンク機能」を使う 簡単
ブロックエディタだとこのリンク作成がとても簡単です。
- リンクさせたいテキストを選択
- 上部ツールバーのリンクアイコンをクリック
- URLに#をつけてid名（アンカー）を入力
- internal をクリックして確定する
id名の先頭に#（半角シャープ）をつけるのを忘れないようにしましょう。
この方法で自動的にHTMLの<a>タグを使ったリンクコードが作成されます。
直接HTMLでリンクするコードを記述した場合と同じです。やはりブロックエディタが便利すぎる！
おー、意外と簡単なのだ
応用編／他のページの途中にリンクしたいとき
応用編で違うページの途中にリンクすることもできます。
応用と言っても他ページにアンカーをつけてリンク設定する基本は同じ！
- 飛びたいページのタグにidを指定する（同様）
- リンクボタンを作成する
リンク作成の仕方がポイントで、a href=”〜”の中を“飛びたいページのURL/#id名”とします。
例<a href="https://turicco.com/#page-top">ここからジャンプ</a>リンクボタンに装飾をつけることもできます
<a >タグだけでは通常のテキストリンクになりますが、CSSを使ってボタンのように見せる装飾をつけることもできます。
また、お使いのテーマ独自のボタン機能を使うのもOK！
ボタンのURL設定で同様に#id名を設定します。
ページ内にリンク／スムーズにスクロール動作させたいとき
例えばジャンプ先にパッと一瞬で飛ぶのではなく、スムーズにスクロールさせることもできます。
ルート要素（html）にscroll-behavior: smooth;というCSSを加えればOK。
html {scroll-behavior: smooth;}これだけでスムーズな動作が実現！
一瞬で切り替わると別のページに飛んでしまったかのような感覚になることがありますが、スクロールすると同一ページ内の移動であることが分かりやすいですね。
ページ内リンクは当ページカスタマイズでも使用しています
先日、公開したアピールエリアを用いたカスタマイズについて。
ワードプレス有料テーマ「SWELL」 風に仕上げたトップページのscroll部分でも今回ご紹介するページ内リンクを使用しています。
まとめ／ページ内リンクはユーザビリティが上がる
以上についてご紹介しました。
意外と簡単だったのではないでしょうか？
素早く、的確に目的の場所へ飛べる操作性はユーザビリティが上がり、SEOにも期待が持てます。
ぜひマスターしましょう！
↑このボタンをクリックすると記事の冒頭へ戻ります。
Comment
はっちゃんさんはじめまして。
いつも分かりやすい記事をありがとうございます。沢山参考にさせていただいております。
実はアンカーリンクがどうしても上手くいかず、困っていまして…。
HTMLアンカーにidを入力するのですが、記事を保存すると消えてしまいます…。
そういったことは起きたことはありますか？
ネットで調べてもヒットせず、ここで質問させていただきました。
もし少しでもなにか分かることがあれば教えて頂けないでしょうか。
すみませんが、よろしくおねがいいたします。
> はっちゃんさんのファンさん
初めまして。
まず…ブログを見てくださりありがとうございます。
HTMLアンカーの件ですが、保存すると消えるという事例は聞いたことがなく下記を確認してみてください。
①idに使う文字は合っているか
・半角アルファベット(a-z)
・数字(0-9)
・ハイフン(-)
・アンダースコア(_)
また、書き出しは半角アルファベットで始まり大文字/小文字は区別されます。
②着地点（リンク先）
ブロックを選択→高度な設定→HTMLアンカー
に入力するときは「#」は不要。
id名だけを入力しているか。
カスタムHTMLで直接入力する場合、例えば＜h2 id=”page-top”＞ここに着地します＜/h2＞のidの直前は半角スペースで区切っているか。
③リンクするとき
URLのところに②の「#id名」を指定する。
id名の先頭に「#」をつけているか。
使う文字はスペースを含めてすべて半角です。
リンクと着地点（リンク先）のidが一致し、適切に設定されていれば動作するかと思います。
はっちゃんさん、お返事いただきありがとうございます。
気づくのが遅くなってしまい申し訳ありません。
そしてお忙しい中細かく教えて頂きありがとうございます。
いただいたアドバイスを見ながら、もう一度やってみたいと思います。
本当にありがとうございます…！