今回は、サイト内にジャンプポイントを作成して、どこからでもでも指定の場所にジャンプできるアンカーリンクを作成する方法を紹介いたします。基本的な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://kt-life.net/ankerlink#ankertest
ヘッダー固定とスムーススクロール
アンカーリンクでページ内をジャンプさせる動きと良くセットで行われるのが「スムーススクロール」という動きです。またそれとセットでヘッダーの固定も対応する事が多いです。
それらのやり方はHTMLでは無くJavaScriptを使用します。以下の記事では具体的に方法を紹介していますので合わせてどうぞ。
以上が「HTMLで特定の場所にジャンプさせる方法【アンカーリンク】」でした。
アンカーリンクの作成して、最適な場所に誘導するのはサイトのUX向上に繋がり結果SEO的にも評価が上がっていくと思います。アンカーリンクを使いこなしてユーザーに優しいサイト作りを心がけましょう。
アンカーリンクの着地地点がズレてしまう場合の対象法は以下。
全てのWordPressの投稿に目次を入れたい場合は以下の記事を参照下さい。
