アンカーリンクとは？使い方やメリット・注意点をわかりやすく解説

href属性

href属性は、アンカーの到着点や基準となるURIのリンクを設定する属性です。
href属性としてアンカーリンクを使用する場合は、下記のような文字の入力が必要になります。

<a href="https://○○○.jp">ブログ

上記の「https://○○○.jp」部分にリンク先として使用したいドメインを入力し、「ブログ」の部分にリンクで表示する名称を入力します。

これらの一連の手順で「ブログ」という表示のアンカーリンクが完成します。

id属性

id属性は固有の識別ができるアンカーリンクです。識別を通して、特定のページを指定できるメリットがあります。

また、id属性を活用すると、CSSやJavaScriptなどから名前が付いた要素を特定して処理できるので利便性が高いです。

具体的なタグとして、下記の入力が必要です。

<a href="# test ">テキスト
<p id="test">テキスト</p>

上部のタグが出発点、下部のタグが到着点となります。

そして、「test」に指定したいアンカーリンクの名称、「テキスト」に表示されるテキストを入力すると完成です。

target属性

target属性は、新しいタブページを開くアンカーリンクです。href属性はページ間を移動するタグですが、target属性は別ウィンドウで新たにページが開くので、ユーザーが元ページを見返せるようになり利便性が高いと言えます。

具体的に入力するコードは、

<a href="リンク先のURL" target="_blank">新規タブ</a>

となります。

「リンク先のURL」部分にリンクしたいページのURLを、「新規タブ」部分にリンク名を入れると完成です。

リンクの色は青色にする

リンクの色は青色にしましょう。なぜなら青色は黒色より目立ち、ユーザーから見てもわかりやすいからです。

また、アンカーリンクを目立たせるために、青でも明るめの青にしておくのをおすすめします。暗めの青を使用すると黒と同じように見えてしまうため、アンカーリンクに気付かないユーザーも多いのです。

ユーザーにとってわかりやすいサイトを目指すためにも、アンカーリンクの色味にも気を遣うようにしましょう。

リンク評価を渡したくない場合はnofollow属性を使う

リンク評価を他サイトに渡したくない場合は、nofollow属性を使用すると効果的です。理由としては、nofollow属性を使用するとリンク先として検索エンジンのクローラーが認識しなくなるからです。

低品質なサイトや悪質なコンテンツを提供しているサイトに、自分のサイトへのリンクを設置されると、あわせて悪い評価を受ける場合があります。

上記のような影響を受けないためにも、nofollow属性を活用しましょう。

具体的に使用するタグとして、rel属性とcontent属性の2種類があります。rel属性は特定のリンクに対してnofollow属性を適用する方法、content属性はページ全体のリンクに関してnofollow属性を適用する方法です。

・rel属性のタグ

<a href="http://○○○.jp/" rel="nofollow">サンプルテキスト</a>

上記の「http://○○○.jp」の箇所にページのURL、「サンプルテキスト」にアンカーリンクの名称を入力しましょう。

・content属性のタグ

<meta name="robots" content="nofollow">

上記の記述を行うと、ページ全体のアンカーリンクがクロールの対象外という設定になります。

リンク評価を他サイトに渡したくない場合は、nofollow属性を使用しましょう。

position:fixed;で固定しているとずれが生じる

アンカーリンクをposition:fixed;で固定していると、ページ移動時にずれが生じるため、対処を行う必要があります。なぜなら、固定ヘッダーと位置が被るからです。

上記の状態を解決しないと、見出しや文字などの一部のコンテンツが見えない状態となり、大変不便です。

実際に様々な対処法がありますが、具体的な方法として、今回はCSSで調整可能なやり方を紹介します。

具体的に記述するコードは、下記の通りです。

.sample {
 padding-top: 100px;
}
   
#sample {
 padding-top:100px;
 margin-top:-100px;
}

最初にヘッダー部分の高さを入力します。サンプルとして、今回は「100px」と入力しました。入力後、padding-top・margin-topを入力し、高さを相殺する必要があります。

具体的に説明すると、padding-topは画面の外枠、margin-topは画面の内枠といったイメージです。外枠を縮小し内枠を引き上げると、適切な位置にアンカーリンクが設定できます。

アンカーリンクをposition:fixed;で固定してページ移動時にずれが生じた場合は、上記の方法で改善しましょう。