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

2021年8月13日(金)2023年8月25日(金) 対馬俊彦

対馬俊彦

【2023.8.24】この記事に書いた対策が不要になりました

Lightning 15.10.1 では以下の機能改善が行われましたので、この記事に書いた対策は不要になりました。

v15.10.1 / 2023.08.24
[ G3 ][ 機能改善 ] 他のページのページ内リンクURLをクリックした時に固定ヘッダーが表示されないように改善
https://www.vektor-inc.co.jp/product-update/lightning-update-change-log/

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 サイトにしたいなら Vektor Passport がおすすめ

ベクトルから発売されている有料プラグイン Lightning G3 Pro Unit / VK Blocks Pro を使えば、このサイトで紹介しているようなコードを書かずにかんたんにカスタマイズできることがたくさんあります。

名前に Pro がついているので「制作のプロ向け製品」という印象を受けるかもしれませんが、
*もっといいサイトにしたい
* 効率よく作成・運用・管理をしたい
と考えているコーポレートサイトの担当者にこそ使っていただく価値がある製品です。

Lightning G3 Pro Unit / VK Blocks Pro は Vektor Passport というライセンス製品で販売されています（個々の単体販売はされていません）。これらのプラグインを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひお使いになることをおすすめします。

ライセンス購入はこちら