以前の記事で、ページ内リンクで表示箇所をスクロールさせる方法を紹介しました。
この方法でリンクの設定を行った際、下図のような感じでスクロールした後に見出しや文章が隠れてしまうことはありませんか？
これを、ちょうどよくタイトルがヘッダーにかぶらない位置で止まってほしいので、その対応方法を紹介します。
実装方法
リンク先のdivタグに、マージンとパディングを追加する
ページ内リンクをするために、スクロール先にしたい箇所に以下のようなdivタグを追加していると思います。（違うタグなどで設定している場合は読み替えてください。）
このタグに対して、以下のように追加でCSSを適用します。
#ivents {
margin: -100px;
padding: 100px;
}
これを追加すると、なんとスクロール位置がずれます。
解説
なぜこれでスクロール位置がずれるかというと、paddingの設定によってdivタグの高さが変わるためです。paddingを適用すると、その数値の分だけdivの上端が見出しから離れます。スクロールは、この上端の位置に合わせてされます。
ただ、paddingを追加しただけだと、その分空白が大きく空いてしまいます。そのずれた分をマイナスのmarginを追加することにより、見た目の位置をもとに戻しています。
まとめ
ヘッダーをスクロールに合わせて追従する設定などにしていると、このような現象に遭遇することがあります。リンク先に設定しているdivタグにCSSを少し追加するだけでヘッダーと重ならないようにすることができるので、参考にしてください！
WordPressサイトのカスタマイズでお困りではありませんか？
上記のように、ちょっとした動きの変更などのカスタマイズでお困りではありませんか？
・専門知識がなくどうしたらよいかわからない・・・。
・身近に詳しい人がいない・・・。
・自分で実施してサイトの表示を崩したくない・・・。
そんな方は一度Saitoまでご相談ください。公式LINEから無料でご相談いただけます。皆様のお悩みを解決できるかもしれませんので、お気軽にご相談ください。
