ブログ備忘録 ページ内リンクのジャンプ先ずれ対応

こんにちはYoshiです。

今回は、Cocoonテーマで発生する「ページ内リンクのジャンプ先がずれる問題」の対処方法を紹介します。
Cocoon以外のテーマではテストしていませんが、おそらく同様の方法で対応できるはずです。

ページ内リンクや目次からのジャンプ先がずれる問題

目次やアンカーリンク（ページ内リンク）をクリックした際、ジャンプ先の表示がずれてしまうことがあります。
この記事では、実際に私が試して効果があった対処方法を紹介します。

Cocoonテーマでは、目次を設定すると自動でリンクが生成・表示されます。
しかし、このリンクをクリックすると

期待する動作では、クリックした内部リンクの見出し（hタグ）が適切な位置に表示されるはずです。

しかし、実際には見出しがヘッダーに隠れてしまったり、めり込んでしまう場合があります。

今回その表示ずれの問題を解決する方法を紹介します。

対応方法

以下のコードを「外観」→「テーマファイルエディター」→「style.css」に追加してください。

:target::before {
  content: "";
  display: block;
  height: 60px; /* ヘッダーの高さに合わせて変更 */
  margin: -60px 0 0; /* heightと同じ値に設定 */
}

コード内のheightの値は、使用しているヘッダーの高さに合わせて調整してください。

この記事を参考にしました。

ページ内リンクがずれる時の簡単対処 | いちりのテクの部屋

WordPressでは アンカーリンク （ページ内リンク）にジャンプ（移動）した時、表示位置がずれていて、見たい項目タイトル(h2やh3等)が画面の上に切れてしまっていました。 そんな場合でも確実に正しい場所にジャンプさせる簡単な解決方法を...

ichiri.biz

注意点

また、環境によってはこの方法がうまく機能しない場合もあるようですが、一度試してみる価値はあります。

以下のようなケースでは正しく動作しない可能性があります。

• display: table; が適用された要素には機能しない
• Flexbox 内にターゲット要素がある場合、期待どおり動作しないことがある

• Only FYI: If the targeted anchor element has style display: table; then it will not work. – Avatar CommentedMay 24, 2018 at 18:37
• This is not working when the target is within a flexbox for me. – Jordy CommentedMar 16, 2020 at 17:39

https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors