固定ヘッダー使用時にページ内リンクのための余白を空ける方法

position:fixed;を使用したスティッキーヘッダーを設置したとき、ヘッダー部分と内部リンクのジャンプ先の要素が重なってしまうことがあります。WordPressの管理画面にログインした状態でプレビューすると、ページに設置した固定ヘッダーと、管理画面が吐き出すアドミンバーが重なってしまう現象にでくわした方も多いのではないでしょうか。

今日はそんな、固定ヘッダー（スティッキー）とページ内リンクの要素が重ならないようにする方法を紹介いたします。

見出しの要素に、固定ヘッダーの高さの分だけ、padding-topを設定し、それを打ち消すように、margin-topを設定します。
具体的には

h1.local {
  padding-top:60px;
  margin-top:-60px;
}

のように書きます。60pxというのは固定ヘッダーの高さだと思ってください。
単純にpadding-top:60px;を設定するだけでも重ならないようにできるのですが、それだと余計なパディングが発生するため、それを打ち消すように、ネガティブマージンを設定するという発想です。

ページ内リンクはJavaScriptを使ってアニメーションさせるという人もいらっしゃると思います。JSでやる場合はJSのコードでスクロール量を調整できますが、その方法ですと、違うページから遷移されたページ内リンクの位置ずれは解消できません。

トリッキーな方法ですが、このようにCSSで解決させるのが一番シンプルではないかと思います。お試しください。

＝＝＝

コレカラウェブではWebライティングのお仕事を承っております。豊富な実務経験や国家資格を生かして、SEOに強い完全オリジナルな文章を作成いたします。公式noteにてポートフォリオを掲載していますので、こちらも併せてご覧ください。ご相談・ご依頼はお問い合わせページからお願いいたします！

「いいね！」と思ったら、クリックお願いいたします<m(__)m>

ABOUT ME

らぐち

コレカラブログ管理人のらぐちです。コレカラウェブという屋号でフリーランスとして、Webライティング・SEOコンサルティング・メディア運営・障害者支援のお仕事を一貫して承ってきました。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。

BLOG：https://corekara-web.net/blog/