このサイトの上部にはグローバルメニューが固定で設置してあるのですが(PCサイズのみ)、一つ悩みが。
それは目次から見出しに飛ぶとき。
見出しがメニューバーに隠れて見えなくなってしまうのです。
しょうがなくh3タグのpaddingを多めに取ったりしていたのですが…
あっさりCSSのみで解決できたのでご紹介します。
参考サイト:
ページ内リンクが固定ヘッダと重なって隠れる問題を解決するCSSのテクニック | コリス
コピペするコード
はてなブログのカスタマイズから、デザインCSSにこれを貼り付けるだけ。
html {
scroll-padding: 50px;
}要素がどこまでスクロールされるかを指定できます。
「50px」のところはメニューバーの高さ+αくらいにするとちょうどいいです。
このサイトのメニューバーの高さは30pxなので、余裕をもって50pxにしました。
それぞれ様子を見ながらやってみてください。
これで目次から見出しに飛んだときもしっかり表示されるはず！
以上、記事内リンクがメニューバーで隠れてしまう時の調整方法でした。
