アンカーリンクはどんな機能?

アンカーリンクは、一つのWebページ内でリンクを貼る方法です。
例えば、Webページ内にいくつか見出しを設定し、目次の項目をクリックすると、
その目次の項目まで飛べるようにする方法です。
このWebページでも「<目次>」の中にある各項目に「見出し」を付けて、
記事に区切りをつけています。
興味のある記事を読みたいとき直ぐに表示できるように、
この各項目の「見出し」まで飛べるようにしています。

Webページ自体が大きくなると、
マウスや「PageDown」のキー操作をして興味のあるところまで操作するのに手間がかかります。
そういう場合、目次の項目に一気に飛べて、興味のある記事を読んでもらえるのは、
閲覧している相手の立場に立ったWebページになるので必須です。
面倒なWebページだと、興味があっても目的の記事にたどり着く前に、
他のWebページに移動してしまいます。
せっかく訪問してもらったのですから、目的の記事にたどり着く手間を減らすためにも、
アンカーリンクの貼り方を習得してください。

アンカーリンクの設定

下の画像のように<目次>の枠の中に、「見出し①(リンク元)」があり、
この部分をクリックすると「見出し①(リンク先)」にまで飛べるようにリンクを貼ります。

画像:アンカーリンクを貼り付ける場所の位置関係

まず、最初にリンク元の設定をします。
<目次>部分の「見出し①(リンク元)」を範囲指定します(青色に反転している部分)。
次に、リンクを貼るためのボタン「(-)」を探しクリックします。

画像:リンク元の設定画面①

リンクを貼るボタン「(-)」をクリックすると、リンクを貼る画面が表示されます。
次に、「検索またはURLを入力」の部分に英数半角で「#link1」と入力します。
これは、このWebページ内で移動するための「リンク①番」という意味で、
重要なのは必ず「#」(シャープ)を最初に入力するというコトです。
この「#」を使って、通常のWebページのアドレス(URL)を区分しています。

ここでは、私のやり方(「#link1」を使う)を説明いたしますが、
仕組みをご理解し、やり易い方法がある場合は違う方法でも構いません。
例えば、「#1」、「#2」、「#3」などもっと入力が簡単にする方法もあります。

また、ここまでの操作方法は、「リンクの貼り方」の内容と同じ手順となります。
基本的なリンクの貼り方をこの記事で解説しておりますので参考にしてください。

画像:リンク元の設定画面②

リンク元の「#link1」と入力し、
同じ部分に右側にある矢印をクリックしてリンク元を設定します。
ここでは、同じWebページを移動するためにリンクを貼るので、
「新しいタブで開く」に設定はしない方が良いと考えます。
しかし、Webページに絶対的な「正解」は無いので、
Webページの見せ方で良い方法があり、
別ページで見せたい場合は「新しいタブで開く」をクリックして設定してください。
ここでは「新しいタブで開く」を設定せずに続けます。

画像:リンク元の設定画面③

次に、リンク先の設定になります。
<目次>「見出し①(リンク元)」のリンク先は、
「見出し①(リンク先)」という見出しです。
この「見出し①(リンク先)」のブロックを設定します。


まず、「見出し①(リンク先)」をクリックし、「見出し」ブロックが編集できるようにします。
右の編集画面で上部に「見出し」と表示されているか確認します。
編集画面で「高度な設定」の項目があり、下矢印部分をクリックし、設定画面を開きます。

画像:リンク先の設定①

「高度な設定」の設定画面が開き、
その中に「HTMLアンカー」を入力する部分があるので、
こちらをクリックして英数半角で「link1」と入力します。
ここで気を付けて頂きたいのが、「#」(シャープ)を先頭に付けないということです。
リンク先の設定では「#」を付けないリンク名となります。


つまり
リンク元(クリックする場所)「#link1」
リンク先(クリック後に表示)「link1」
です。
「#」シャープを付けるコトで、リンク元とリンク先を区分しています。

画像:リンク先の設定②

これで、リンク元の設定とリンク先の設定が完了しました。
一つのWebページ内で「見出し」ブロックが増えていくと、アンカーリンクを複数設定します。
その場合は、「#link1」「#link2」「#link3」・・・と
「#link」+「数字」の組み合わせで増やしていくことができます。
この方法は、「新しいタブで開く」を設定していないので、
別のWebページ内のアンカーリンクでも同じリンク名(#link1)を使えます。

訪問者の興味ある記事に直ぐにたどり着けるように、アンカーリンクは有効な設定です。
ぜひ操作できるようにしておいてください。

最後まで、ご覧いただき、ありがとうございました。