Lightning のモバイル固定ナビをカスタマイズするやり方

この記事では Lightning Pro のモバイル固定ナビをカスタマイズするやり方を説明していますが、掲載してある手順と CSS のコードは Lightning G3 Pro Unit および Katawara のモバイル固定ナビでもそのまま使えます。

Lightning Pro のモバイル固定ナビ

MENU ボタンを右端に配置

【参考】すべてのボタンの順番を入れ替えたい場合

カスタマイズ画面で個々の設定を書き換えればボタンの順番を入れ替えできるのですが、位置を移動したいことがときどきあって、その都度書き換える作業がめんどくさい、ってときには以下の CSS が役に立ちます。

# の部分に数値を入力すれば順番をコントロールできます。

ul.mobile-fix-nav-menu li:nth-child(1) {
    order: #;
}
ul.mobile-fix-nav-menu li:nth-child(2) {
    order: #;
}
ul.mobile-fix-nav-menu li:nth-child(3) {
    order: #;
}
ul.mobile-fix-nav-menu li:nth-child(4) {
    order: #;
}
ul.mobile-fix-nav-menu li:nth-child(5) {
    order: #;
}

【参考】特定のボタンを一時的に非表示にしたいとき

イベントやキャンペーンなどのページにリンクするボタンの場合、期間が過ぎたらそのボタンを一時的に非表示にして、後日また復活させたいってことがありますよね。

# の部分に 1 ～ 5 の数値を入力すれば、そのボタンを非表示にできます。

ul.mobile-fix-nav-menu li:nth-child(#) {
    display: none;
}

モバイルナビを表示したときに閉じるボタンを表示

特定のボタンを目立たせるやり方

特定のボタンを目立たせる手順①

特定のボタンを目立たせる手順②

子テーマの style.css などに以下の CSS を追加します。

@media (max-width: 991.98px) {

  body .mobile-fix-nav .mobile-fix-nav-menu {
    padding: 0;
  }

  body .mobile-fix-nav .mobile-fix-nav-menu li {
    flex-grow: 1;
  }

  ul.mobile-fix-nav-menu li:has(.btn-eye-catch) {
    height: 100%;
    background-color: var(--vk-color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .mobile-fix-nav .mobile-fix-nav-menu li:has(.btn-eye-catch) .vk-mobile-nav-menu-btn,
  .mobile-fix-nav .mobile-fix-nav-menu li:has(.btn-eye-catch) a {
    color: #fff !important;
  }

}

弊社サイトのモバイル固定ナビ

ボタンの数を増やす

ベクトルさんの カスタマイズと設定TIPS にやり方が載っていました。
子テーマの functions.php などに以下のフィルターフックを追加するとボタンの数を増やすことができます。

add_filter( 'vk_mobil_fix_nav_menu_number', 'my_vk_mobil_fix_nav_menu_number_custom' );
function my_vk_mobil_fix_nav_menu_number_custom() {
	//変更したいメニュー数に設定する。
	$num = 5;
	return $num;
};

このコードは Lightning G3 Pro Unit および Katawara でも使えます。

フィルターフックでモバイル固定ナビを書き換える

フィルターフック vk_mobil_fix_nav_options を使ってモバイル固定ナビを書き換えることができます。
コードの例は以下の通りです。このコードはカスタマイズ画面で行ってあるモバイル固定ナビの設定をまるごと置き換えるものです。

add_filter( 'vk_mobil_fix_nav_options','my_vk_mobil_fix_nav_options' );

function my_vk_mobil_fix_nav_options( $options ){

  $new_options = array(

    'hidden'   => false, // モバイル固定ナビを表示しない
    'widget_padding' => false, // ウィジェットエリアに余白を追加する
    'add_menu_btn'   => true, // 最初にメニューの開閉ボタンを追加する
    'nav_bg_color' => '#ffffff', // 背景色
    'color' => '#2e6da4', // 文字の色
    'current_color' => '#16354f', // Current Color

    'link_text_0' => 'メニュー', // メニューの開閉ボタンのテキスト

    'link_text_1' => 'HOME',
    'link_url_1' => 'https://lightning-pale.hp1.work',
    'link_icon_1' => 'fas fa-home',
    'link_blank_1' => false, // リンク先を別ウィンドウで開く

    'link_text_2' => 'サイト案内',
    'link_url_2' => 'https://lightning-pale.hp1.work/about_this_site/',
    'link_icon_2' => 'fa-solid fa-sitemap',
    'link_blank_2' => false,

    'link_text_3' => 'ブログ',
    'link_url_3' => 'https://lightning-pale.hp1.work/blog/',
    'link_icon_3' => 'fas fa-edit',
    'link_blank_3' => false,

    'link_text_4' => 'お問合せ',
    'link_url_4' => 'https://lightning-pale.hp1.work/contact/',
    'link_icon_4' => 'fas fa-envelope',
    'link_blank_4' => false,

  );

  $option = wp_parse_args( $new_options, $options );

  return $option;

}

VK All in One Expansion Unit (ExUnit) の設定

ExUnit のページトップへ戻るボタンを使っている場合、タッチデバイスの端末では表示しない を有効にします。

この設定が有効になっていないと、ページトップへ戻るボタンがモバイル固定ナビに被ってしまいます。

ページトップへ戻るボタンを使いたいなら

関連記事

オリジナルのモバイル固定ナビを Lightning サイトに実装しました

サイト運営者プロフィール

対馬 俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

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

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

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

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

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

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

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

最新の投稿

この著者の記事一覧

• Lightning Pro2025年9月17日Lightning のモバイル固定ナビをカスタマイズするやり方
• Lightning Pro2024年10月8日Lightning Pro のアーカイブページに最終更新日を表示するには
• Lightning Pro2023年2月14日Font Awesome 6 / 5 Free のアイコンをメニュー項目に表示する
• Lightning Pro2022年12月18日ヘッダーの連絡先をスクロール時にも表示するカスタマイズ