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

2021年8月13日(金)2022年8月9日(火) 対馬俊彦

対馬俊彦

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 を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

また、制作業者様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。

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

» ご相談・お問い合わせはこちらからどうぞ

WordPress / Lightning オンラインサポートのご案内

サイトをご覧いただき、ありがとうございます。このサイトを運営している、魚沼情報サービスの対馬です。

WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを最も得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。

ご要望をうかがった上で費用見積り（無料）を提示させていただきます。

ご相談・お問い合わせはお気軽にどうぞ