サイトの指定した場所にジャンプするアンカーリンクの設定方法

HTML/CSS

今回は、サイト内にジャンプポイントを作成して、どこからでもでも指定の場所にジャンプできるアンカーリンクを作成する方法を紹介いたします。基本的なHTMLの記述の仕方とWordPressでの設定の仕方を紹介いたします。

アンカーリンクの作成の仕方

アンカーリンクを作成するには、リンククリックの際に実際にジャンプするジャンプポイントの作成とそのリンク先のURLを記述していきます。

ジャンプポイントの作成

ジャンプポイントの作成は、HTML記述の際に下記の様に要素に任意のid名を付けます。

<div id="JUMP1">
  <h2>見出し</h2>
</div>

div要素の他、下記のタグなどにもジャンプポイントを付ける事ができます。

  • <a id="JUMP1″>
  • <h1 id="JUMP1″>
  • <table id="JUMP1″>
  • <ul id="JUMP1″>
  • <ol id="JUMP1″>
  • など

ジャンプポイントを作成したら、そのidがあるページのURLの語尾に「#」と先程の「id名」を付けてその位置を示すURLを作成します。(この時「 / 」は要りません。)

<a href="https://www.exsample/page1.html#JUMP1">
アンカーリンク
</a>

これで完成です。実際に下記のアンカーリンクでは「WordPressの使い方や設定方法一覧:導入〜応用まで一から全て解説」の記事の「ステップ4:Gutenberg」の見出し部分にジャンプします。

アンカーリンクの見本

また、同一ページにアンカーリンクを設置すれば同じページ内でジャンプするリンクを作成できます。よく目次で使えあれるのがこれです。

WordPressの場合

WordPressの場合は、ブロックエディタの右側にある設定高度な設定HTMLアンカーid名を記入します。

ワードプレスの場合は、下記の様に「id=""」の記述は要りません。

あとは先程と同様にURLの語尾に「#id名」を付ければアンカーリンクの完成です。

下記のURL(アンカーリンク)はこのページの1番目の見出しにジャンプします。

https://ka-holidayrefresh.com/ankerlink#ankertest


以上が「サイトの指定した場所にジャンプするアンカーリンクの設定方法」でした。

アンカーリンクの作成して、最適な場所に誘導するのはサイトのUX向上に繋がり結果SEO的にも評価が上がっていくと思います。アンカーリンクを使いこなしてユーザーに優しいサイト作りを心がけましょう。

HTML/CSShtml, UI/UX, URL, リンク

Posted by KT