同一ページにリンクを張り、ジャンプさせた時のメモ

同一ページにリンクを張り、アンカーを記入した箇所にジャンプして、すぐに行けるようにした時のメモ(基本的なことなのですが、すぐ忘れてしまうので)

  1. 同一ページ内にジャンプのやり方
  2. アンカーを記入する
  3. 張ったアンカーにリンクを張る

この目次がまさにページ内ジャンプになっています。同じページ内のジャンプではなく、絶対パスで指定すると、他ページの特定の場所へ飛ばすこともできます。

1同一ページ内ジャンプのやり方

ページ内ジャンプのやり方は、飛ばす先の目印となるアンカーを記入し、リンクにそのアンカー名を追加するだけです。

 

2アンカーを記入する

<h4><a name=”a01″>同一ページ内にジャンプのやり方</a></h4>
<h4 id=”a01″>同一ページ内にジャンプのやり方</h3>

<h4><a name=”a02″>アンカーを記入する</a></h4>
<h4 id=”a02″>アンカーを記入する</h4>

今回はidを指定する方法を使いました。

アンカー名は「a01」や「a02」といったように半角英数字を使っている人が多いようですが、ページ内に同じアンカー名が無ければ何でもOKです。

3貼ったアンカーへリンクを張る

ジャンプ先のアンカーができたら、次にそのアンカーへ飛ばすリンクを張ります。
<a href=”#アンカー名”>文字</a>
<a href=”#アンカー名”>画像</a>

リンク先として「#アンカー名」を指定します。イメージリンクのaタグにアンカーを指定して画像にリンクを張ったりします。

<a href=”#a01″>同一ページにリンクを張る</a>

<a href=”#a02″>アンカーを記入する</a>

<a href=”https://homemate21.net/create-hp/pagelink/#a03″>張ったアンカーにリンクを貼る</a>

リンクの貼り方は、絶対パスでも構いません。違うページの指定箇所にジャンプすることも可能です。

1ページが長く、目的の箇所にすぐジャンプさせる事が出来るので便利です。

使っているテーマ等でメニューでリンク先が隠れていますが、適宜アンカーを記入する位置を調整してください。