アンカーリンク（ページ内／別ページ）

タイトルが複数ある記事等、クリックで目的の場所まで移動させたいとき、アンカータグ<aタグ>を使用する。

ページ内のアンカーリンク

移動先（アンカー）にアンカーポイントを挿入

<a id=○○>移動先にある文章</a>

＜○○の部分の注意点＞

• 1つのIDは同じ文書内で1ヵ所にだけ（重複させてはならない）
• 使用できる文字は下記のみ（記号はハイフン以外使わない方が無難）
  • 半角英数字
  • ハイフン（ - ）
  • アンダーバー（ _ ）
  • コロン（ : ）
  • ピリオド（ . ）
• アルファベットで始める（数字や記号で始めてはダメ）
• 大文字と小文字の区別あり

私は"anchor1" etc.にしている。

移動元にリンク作成

<a href="#○○">クリックで移動させる</a>

その際、○○の前に"#"を置くのを忘れずに。

別ページへのアンカーリンク

移動先（アンカー）に下アンカーポイントを挿入

<a id=○○>移動先にある文章</a>

＜○○の部分の注意点＞

• 1つのIDは同じ文書内で1ヵ所にだけ（重複させてはならない）
• 使用できる文字は下記のみ（記号はハイフン以外使わない方が無難）
  • 半角英数字
  • ハイフン（ - ）
  • アンダーバー（ _ ）
  • コロン（ : ）
  • ピリオド（ . ）
• アルファベットで始める（数字や記号で始めてはダメ）
• 大文字と小文字の区別あり

私は"anchor1" etc.にしている。

タグの中に何か文章が入っていたらよいけれど、なければ半角スペースで代用。

移動元にリンク作成（アンカー先）

#○○の前にサイトのアドレス（https://△△/）を挿入する。

私の場合は、target属性を入れるようにしている。

<a href="https://△△/#○○" target="blank">クリックで移動させる</a>

○○の前に"#"を置くのを忘れずに。

※ target属性:

リンク先の開き方を指定する属性。

外部サイトを別タブで表示したい場合は「target="blank"」を指定。

※ rel属性:

リンク先のコンテンツが自身の管理下にない場合や、リンク先の情報を信頼出来ない場合に使用。

「rel="nofollow"」

リンク先を信用できる場合、オススメしたい場合には指定しない。

アンカーリンクの位置がずれる場合

アンカーリンク＜aタグ>のid属性で指定ｓちあアンカーポイントへリンクしても、目的の位置よりもちょっと下に飛んでしまうことがある。

この場合、最も多い原因は、「ヘッダーをposion:fixed;で固定している」場合。

（私の使用しているテーマもコレ。）

ズレを改善し、適切なアンカーポイントの位置に調整するには、CSSかJavaScriptで調整する。

私の場合は、CSSで調整。

CSS調整方法

Class属性をつけて、CSSで調整。

アンカーポイントの頭の位置をpadding-topで固定ヘッダーの文だけ上に上げつつ、margin-topのマイナス指定で相殺。

こうすることで、見た目を変えずに、実際のアンカーポイントの頭をpaddingの分だけ上にずらすことができる。

例: <a>タグに "sample" という名前のクラス属性をつけ、CSS で位置を調節する場合 ▼

HTML

<a id="test" class="sample">○○</a>

CSS

a.sample{
display: block;
margin-top:-100px;
padding-top:100px;
}

References