Lightning のハンバーガーメニュー(モバイルナビ)をパソコンでも表示するカスタマイズを行いました。

ハンバーガーメニューをパソコンでも表示するカスタマイズ【汎用版】
ハンバーガーメニューをパソコンでも表示するカスタマイズ【汎用版】

この投稿でカスタマイズしてあって実際の動作をご覧いただけますが、私のカスタマイズネタをご覧いただいている方からするといままでのカスタマイズと比べて目新しさを感じないと思います。むしろ、「これが新作なの?」ってもの足りなさを感じるのではないかと...😅

ご要望・デザインに合わせて作業漏れなしに即応できる汎用性を持たせた

私はいままでにもハンバーガーメニューをパソコンでも表示するカスタマイズを何回も行っていますが、いままでのカスタマイズとの大きな違いは、今回のカスタマイズの特徴は以下のスタイルを CSS 変数 に持たせることにより、お客様のご要望やサイトのデザインに合わせてミスなく即応できる汎用性を持たせたことです。

  • ハンバーガーボタンの位置とサイズ(ページの先頭を表示しているとき)
  • ハンバーガーボタンの位置とサイズ(スクロール時)
  • ハンバーガーボタンの色・画像・画像サイズ・ボーダー・角丸
  • ハンバーガーボタンの角丸(スクロール時)
  • 閉じるボタンの色・画像・ボーダー
  • モバイルナビの幅・背景色・リンクテキスト色・フォントサイズ
  • ハンバーガーボタンのサイズ(スマホ)

具体的には該当部分の CSS が以下のようになっています。

:root {

    /* ハンバーガーボタンの位置とサイズ(ページの先頭を表示しているとき) */
    --ujs-top-pos: 20px;
    --ujs-horizontal-pos: 15px; /* 左・右で共通設定 */
    --ujs-btn-width: 60px;
    --ujs-btn-height: 60px;

    /* ハンバーガーボタンの位置とサイズ(スクロール時) */
    --ujs-top-pos-scroll: 6px;
    --ujs-horizontal-pos-scroll: 15px; /* 左・右で共通設定 */
    --ujs-btn-width-scroll: 40px;
    --ujs-btn-height-scroll: 40px;

    /* ハンバーガーボタンの色・画像・画像サイズ・ボーダー・角丸 */
    --ujs-btn-bg-color: var(--vk-color-custom-1);
    --ujs-btn-bg-image: url(/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-btn-white.svg);
    --ujs-btn-bg-size: 100%;
    --ujs-btn-border-color: transparent;
    --ujs-btn-border-radius: 3px;

    /* ハンバーガーボタンの角丸(スクロール時) */
    --ujs-btn-border-radius-scroll: 0px;

    /* 閉じるボタンの色・画像・ボーダー */
    --ujs-btn-bg-color-menu-open: transparent;
    --ujs-btn-bg-image-menu-open: url(/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-close-white.svg);
    --ujs-btn-border-color-menu-open: transparent;

    /* モバイルナビの幅・背景色・リンクテキスト色・フォントサイズ */
    --ujs-nav-width: max( 400px, 25vw );
    --ujs-nav-bg-color: rgba(0,0,0,0.85);
    --ujs-nav-link-color: #ffffff;
    --ujs-nav-font-size: 1.25em;

    /* ハンバーガーボタンのサイズ(スマホ) */
    --ujs-btn-width-sp: 52px;
    --ujs-btn-height-sp: 52px;

}

いままでに行ったカスタマイズではこのようなプロパティの値がスタイルシートのあちこちに記述してあって、特にボタンの位置についてはログイン時のツールバーの高さを考慮して CSS を記述しているので、値を複数個所に指定してあったんです。そのため、変更したいときに探す手間がかかっていましたし、作業漏れの不安がいつもありました。

いままでのカスタマイズの経験を踏まえて、ほとんどのケースに対応できるように上記の CSS 変数を持たせてあります。CSS 変数だけでカスタマイズの 100% をカバーするのは現実的でないので、対応できないケースでは CSS を追加することになります。

今回のカスタマイズコードのように変更すべき値を1か所にまとめてあれば、かんたんにミスなく作業ができるようになります😊

例えば、このようなデザイン に変更するのもあっという間にできてしまいます。

カスタマイズに関する補足事項・備忘録

  • 汎用版として活用できるように、ハンバーガーボタンの位置が左でも右でも使えるカスタマイズコードになっています。
  • パソコンでの表示はログイン時のツールバーの高さを考慮してありますが、スマホでの表示はツールバーを考慮してありません。

自分でカスタマイズするメリット

探してみるとこのようなハンバーガーメニューを作ることができるプラグインはいくつもありますが、以下のようなデメリットがあると思います。

  • オーバースペックで(機能が多くて)操作がわかりづらいことがよくある。
  • そのわりにやりたいことがすべてできるとは限らない
  • 将来のアップデートが保証されているわけではない。突然開発終了してしまうリスクもある。

それなりにカスタマイズのスキルを身に着けていれば、自分ができる範囲でプラグインに頼らずにカスタマイズできるのが WordPress のいいところです。

私はその範囲を超えたときにだけプラグインを使うようにしています。

投稿者プロフィール

hp2-admin
hp2-admin魚沼情報サービス・ベクトル公式テクニカルパートナー
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

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

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

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

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

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

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

Lightning テーマ使用

中小企業様、個人事業主様向け

最適なホームページ

を制作いたします

制作費用クオリティを落とさずに



価格を抑えたサイトを制作します
必要十分お問い合わせフォーム、新着情報など



必要なものが最初から揃っています
サポート1年間のサポートがついて安心
初めてでもホームページを活用できます