【WP】ワードプレスのテーマ「Lightning」画面下に固定バーを付ける

いつもお世話になっておりますワードプレスのテーマ「Lightning」ですが、スマホ表示にすると画面下に固定できる便利なウジェットが既に用意されております。

「モバイル固定ナビ　ウィジェットエリア」

ここに何かしら（例えばお問い合わせや、キャンペーンなど）のバナーやボタンを設置しておけば、モバイル表示で画面下に表示されるのですが、PCとは共通になっておらず、PCはPCで設定する必要があります。

もちろん、ユーザーが幸せになれる「Lightning」にはすでにPCの場合も画面の下（以外にも右側など方向指定可能）に固定表示できるブロック「固定表示」というブロック（Pro版のみ）が用意されております。

PCとスマホで表示を切り替えたい場合は、固定表示ブロックを使い、高度な表示設定で表示ブロックPCとスマホで構築してもいいのですが、割と単純なバナー表示だけであれば、ウジェットエリアだけで管理した方が簡単な時もあります。

今回はこの「モバイル固定ナビ　ウィジェットエリア」に表示した内容もPCで表示したい場合のCSSメモ。

CSSのみで実装できますが、「Lightning」はちょいちょいCSSのクラスやIDを書き換え更新されますので、クラスは自分で都度確認が必要になるかと思います。（2026年現在）

追加CSSとして追加するコードはコレ

/* モバイル固定ナビをPCでも表示 */
@media (min-width: 992px){
  .mobile-fix-nav {
    display: block !important;
  }
}

上のCSSを追加CSSとして加えれば、PCでも表示できると思います。
ただし、画像の大きさが大きくなりすぎる場合があるので、画像サイズの調整は必要になると思います。

固定表示はキャンペーン、お問い合わせボタン、ショップへの誘導なに便利ですよね！