Lightning G3 でヘッダーロゴ画像が極小サイズにならないようにする

以前から気になっている Lightning G3 あるある

私が以前から気になっている Lightning G3 あるある があります。

例えば、このサイトはグローバルナビの項目が6つで個々の項目の文字数は多くないのですが、対策を行わない状態で画面幅1024ピクセルのタブレットで表示すると↓このようにヘッダーロゴ画像が極小サイズになってしまいます。

Lightning G3 を使って制作されていて、このような表示になってしまうサイトってわりとよく見かけるんですよね。

グローバルナビの項目数・文字数がもっと多いと、以下のように症状が進んでいってしまうサイトも見かけます。

• ヘッダーロゴ画像が消えてしまう
  ここまで症状が進むと、極小サイズよりはまだいいかなって思ってしまいます。
• グローバルナビの右側の項目が画面からはみ出して見えなくなってしまう
  ここまでになると、項目数・文字数を見直さないといけません。

たぶん、制作者自身・サイト運営者自身はこのことに気がついていないんだろうなぁ、と思います。同業者のサイトでも見たことがあります。「画面幅が大きい PC とスマホだけきちんと表示されれば、それでオッケー」という考え方なのかもしれませんが...。

ということで、タブレット端末でもかっこ悪くならないようにしたいという方のためにいくつか対策を紹介します。

対策その１ 軽い症状の場合

以下の CSS を追加します。

@media (min-width: 992px) and ( max-width: 1199.98px ) {
  body.device-pc .global-nav-list>li>a, 
  body.device-mobile .global-nav-list>li {
    padding-left: 0.5em;
  }
}

このサイトは上記のコードを採用しています。

画面幅が小さくなったときにナビ項目の左余白を小さくすることにより、ヘッダーロゴ画像に割り当てる幅を確保していますが、重い症状の場合にはこのやり方では不十分です。

対策その２ 重い症状の場合

上記の対策では解決しない場合は以下の CSS を追加します。

@media (min-width: 992px) and ( max-width: 1199.98px ) {
  body .site-header--layout--nav-float .site-header-container {
    flex-wrap: wrap;
  }
  body .site-header--layout--nav-float .site-header-logo {
    width: auto;
  }
}

この CSS を追加すると、画面幅が足りなくなったときにグローバルナビがヘッダーロゴ画像の下に移動します。

対策その３ Lightning G3 Pro Unit を使う

Lightning G3 Pro Unit のヘッダー設定機能を使えば、ヘッダーロゴ画像の下に幅が広いグローバルナビをノーコードでかんたんに設定することができます。

さらに、右上の空いたスペースに電話番号とお問い合わせボタンを置くことができますし、ウィジェットを置いて自由なコンテンツを置くこともできます。

• Lightning G3 Pro Unit ヘッダー設定

対策その４ G2 モードにする（非推奨）

Lightning を G2 モードにすると、上記の 対策その２ と同じような動きをします。第2世代の Lightning Pro もこの動きをします。

もしかしたら、Lightning Pro から Lightning G3 に移行したサイトでこのあるあるが起きているケースが多いのかも...と思って、これを書きましたが、強く非推奨です😊

まとめ

Lightning G3 無料版サイトのグローバルナビは、項目数5つを上限として、さらに文字数を抑えて設定するのが吉です。