ページ内リンクがズレるときの対処法

はじめに

この記事の概要

こんにちは、たくまです！
みなさんはページ内リンクを設置したことはありますか？
このブログの目次にも使用されていますが、ページ内リンクを設置することで、読者が読みたい箇所まで一気にスクロールでき、知りたい情報にいち早くたどり着きやすくなります。そのため、ユーザビリティが高いにつながります。

しかし、ある条件下においてはページ内リンクがうまく設定できない場合があります。

この記事では、ページ内リンクの実装方法や不具合が生じた際の対処法について紹介しますので、ぜひ参考にしてみてください！

対象読者

ページ内リンクについて

ページ内リンクは、「アンカーリンク」とも呼ばれており、ページ内の好きな場所までクリックすることでスクロールして遷移することができるものです。
当ブログのように、目次のような形式で使用されることが多いです。見出しにページ内リンクを設定し、詳細が書かれている該当箇所へ遷移する形式でよく使用されています。

ページ内リンクをうまく設置することで、読者が知りたい情報に即座にたどり着くことができるようになります。
例えば当記事の目次で、「ページ内リンクについて」をクリックすると、このセクションにスクロールされます。

このようにページ内リンクは、素早く・正確に知りたい情報を取得することができるので、読者の利便性につながるのです。

ページ内リンクの設置方法

ぺーじ内リンクの設置方法は主に3つあります。

順に紹介していきます。

id属性を使用する

この方法が最も手軽で推奨される方法になります。
理由として、id属性を使用した方法は、divタグ・h1タグ・aタグなど様々なタグで使用することができるためです。

設置方法についてご紹介します。
まず、リンクで遷移先に設定したいタイトルにid属性を指定します。idを「link」とした場合は以下のようになります。

<h1 id="link">
  リンク
</h1>

そして、リンク先へ遷移する際にタグは、aタグを使用して以下のように記述します。

<a href="#link">
  リンクへとばす
</a>

ポイントは、id名の前に#をつけることです。
#をつけ忘れると遷移しないので、注意しましょう。

name属性を使用する

2つ目の方法はname属性を使用する方法です。
こちらは基本的にid属性を使用した場合と同じように実装できますが、遷移先もaタグを使用しないといけない点に注意してください。

遷移先のタグは以下のように記述します。

<a name="link">
  リンク
</h1>

遷移元のタグはid属性の記述方法と同じです。

<a href="#link">
  リンクへとばす
</a>

WordPressでプラグインを使用する

WordPressを使用してサイトを制作している場合は、プラグインを使用することも有効です。

代表的なプラグインは「Advanced Editor Tools」​​です。
使用方法については下記のサイトが参考になります。

リンク先やリンク元のページ内リンクを入れたい箇所にカーソルを合わせて、idを設定するだけで、テキスト編集せずにページ内リンクを簡単に設定できます。
その他にも便利な機能が多いので、ぜひ調べてご使用ください。

ページ内リンクがずれる際の原因と対処法

ここからは、ページ内リンクがずれる際の原因と対処法についてご紹介します。

原因

まず、原因ですが固定ヘッダーによるものが多いです。
固定ヘッダーは、ヘッダー位置をposition: fixedによって画面上部に固定しています。

.header {
  position: fixed;
  width: 100%;
  height: 100px;
}

position: fixedによってヘッダーを固定することで、ヘッダーが浮いた状態になり、遷移先のタイトルなどの要素の上に固定ヘッダーが重なって表示されてしまうため、表示がずれているように見えてしまいます。

対処法

今回はCSSで簡単に対処できる方法をご紹介します。
CSSで対処する場合は、遷移先の要素にヘッダーの高さ分のpddingとmarginを設定することで、ズレを解消できます。

先述したヘッダーと遷移先・遷移元のタグを使用して説明します。

id=”link”と設定したタグにanchorというclassを付与しておきます。

<h1 id="link" class="anchor">
  リンク
</h1>

そして、anchorクラスにheaderクラスのheight: 100px;をpadding-topとmargin-topで相殺します。

.header {
  position: fixed;
  width: 100%;
  height: 100px;
}

.anchor {
  padding-top: 100px;
  margin-top: 100px;
}

100pxはヘッダーの高さによって変更してください。

上記のように設定することで、ページ内リンクがずれることを防ぐことが出来ます。

ページ内リンクが複数ある場合の対処法

同一ページ内にページ内リンクが複数ある場合、上記の対処法を行うとページ内リンク関係なくズレが生じてしまいます。
その際の対処法を紹介します。

ページ内でズレが生じた際は、遷移先の各要素にそれぞれ高さを明示的に与えることによって解消します。
ここでいう高さはheaderの高さではなく、遷移先の要素の高さなので注意してください。
各要素の高さはデザインなどで確認して、正確な高さを付与しましょう。

.header {
  position: fixed;
  width: 100%;
  height: 100px;
}

.anchor-1 {
  padding-top: 100px;
  margin-top: 100px;
  height: 120px:
}

.anchor-2 {
  padding-top: 100px;
  margin-top: 100px;
  height: 160px:
}

.anchor-3 {
  padding-top: 100px;
  margin-top: 100px;
  height: 180px:
}

上記のように設定しましょう。
これで、ページ内でのズレも解消することが出来ます。

おわりに

今回はページ内リンクについて、設置方法と遷移時にズレる原因・対処法について紹介しました。
設置に関しては、最初に紹介したid属性が手軽で様々なタグに使用もできるので、個人的にはおすすめです。

ページ内リンクは使用する頻度も高いと思うので、ぜひ参考にしてください！

最後に、HTMLやCSSについてもっと詳しく知りたいという方は以下の書籍がおすすめです。
初学者の方にもわかり易い言葉で丁寧に説明がされているので、とても参考になります！

スポンサーリンク