アンカー付き URL でコンテンツの見出し部分がグローバルメニュー（固定ヘッダー）の後ろに隠れてしまう問題の対策

Lightning G3 で制作したサイトをパソコンで閲覧するとき、多くの場合はこのサイトのようにスクロール時にグローバルメニューがページ上部に固定されるしくみになっています。

これにより、以下の例のようなアンカー付きの URL でアクセスしたときにコンテンツの上の部分がグローバルメニューの後ろに隠れてしまう、という問題が起きてしまいます。

例 https://lightning-free.hp1.work/unlike-lightning-sns-buttons/#step1

上記の URL の場合だと、以下の図に示すような状況になってしまいます。

この問題が起きないように、以下の手順で対策を行いました。

手順① JavaScript

子テーマに以下の JavaScript プログラムを追加します。
このプログラムは、アンカー付き URL でアクセスしたときに body にクラス header_scrolled_disabled を追加しています。

window.onload = function() {
  if(document.location.hash){
    $('body').addClass('header_scrolled_disabled');
  }
}

手順② CSS

以下の CSS を追加します。
クラス header_scrolled_disabled があるときはグローバルメニューの固定 (position: fixed;) を解除しています。

@media (min-width: 992px) {

.header_scrolled.header_scrolled_disabled .site-header {
position: relative;
}

}

補足 removeClass でよさそうなんだけど...

ふつうに考えると、$('body').removeClass('header_scrolled'); を使えばよさそうなんだけど、これがうまくいきませんでした。

テーマ側で行っているこのクラスの処理とバッティングするかもしれないので、無理をせずにクラスを追加するやり方にしました。

気に入らない部分があるなぁ...

上記の CSS を使うやり方だとまだ気に入らない部分があります。

ということで...

追記【完結版】 スクロールするやり方にしました

上記のやり方を廃止して、以下の JavaScript で見やすい位置にスクロールするやり方にしました。30px は画面上端と見出しの間を空けるためのものです。

// アンカー付き URL でアクセスした場合はグローバルメニューの後ろに隠れないようにスクロールする
window.onload = function() {
  if (document.location.hash) {
    if (screen.width >= 992) {
      // 固定ヘッダーが表示されている場合はヘッダーの高さを取得してそれに 30px を追加した値を headerHeight に代入
      var headerHeight = ($('#site-header').outerHeight() + 30) * -1;
      scrollBy(0,headerHeight);
    }else{
      // 固定ヘッダーが表示されていない場合は見出しが見やすいように 30px スクロール
      scrollBy(0,-30);
    }
  }
}

このコード、Lightning G3 でヘッダー固定で制作するサイトにはデフォルトで入れておくのがいいかもしれない...

投稿者プロフィール

対馬 俊彦魚沼情報サービス (新潟県南魚沼市)

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、お手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最新の投稿

この著者の記事一覧

• WordPress2024年10月10日画面下部に固定するレスポンシブ対応バナーの制作例
• WordPress2024年10月7日グリッドレイアウトで作った料理レシピのブロックパターン②（CSS で調整）
• WordPress2024年10月4日先頭の文字の背景を白い円にしたカスタマイズ例
• WordPress2024年10月1日WordPress のギャラリーブロックのカスタマイズ例