モバイル固定ナビを X-T9 のサイトに実装する手順

こんにちは、魚沼情報サービスの対馬俊彦です。

ベクトルスタッフ・松田さんの昨日の記事「WordPressにGoogleマップ埋め込むなら、ビジュアル埋め込みブロックがとても便利で楽です」、ご覧になりましたか。ビジュアル埋め込みブロック、恥ずかしながら私は知りませんでした。編集画面で地図が見えて、他のブロックを使わなくても全幅にできるのがいいですね。まだ使ったことがないブロックが他にもあるので、時間があるときにひと通り試してみようと思います。なにか発掘できるかもしれません。

それでは、松田さんからバトンを受け取って12月5日の記事を書きます。

歴代ベクトル製品でおなじみのモバイル固定ナビ

モバイル固定ナビの完成見本

この記事で解説しているやり方で X-T9 のサイトに実装したモバイル固定ナビの実物を以下のデモサイトに用意してあります。完成見本としてご覧ください。

モバイル固定ナビの仕様・特長

• WordPress コアのナビゲーションブロックを右端の MENU に使用しています。
• ナビゲーションが開いたとき、メニューボタンのアイコンが × に、文字表記が CLOSE に変わります。
• MENU 以外は VK Blocks のボタンブロックを使っていて、サイト編集画面でボタンの並び順、アイコン、色をかんたんに変更できます。
• ボタンの数の増減が可能ですが、今回の実装では6個を上限としています。（MENU を含む）

モバイル固定ナビの実装に必要なもの

この記事で紹介する手順でモバイル固定ナビを実装するためにベクトル製プラグイン VK Blocks Pro が必要です。
VK Blocks Pro の入手方法についてこの記事の最後に書いてあります。

それでは、X-T9 のサイトにモバイル固定ナビを実装していきましょう。

手順についてのここからの説明は、WordPress のサイトに X-T9 と VK Blocks Pro をインストールしてある状態で実装作業を行うことを前提にして書いてあります。

X-T9 ＋ VK Blocks Pro のサイトを用意して試すことが可能な方は、下記の手順に沿ってモバイル固定ナビを実装してみてください。

手順① 固定表示ブロックを追加

手順② 固定表示ブロックの設定

手順③ 横並びブロックを追加

固定表示ブロックの中に横並びブロックを追加して、横並びブロックの背景色を #233a73 に設定します。

ここで選んだ背景色がモバイル固定ナビの背景色になります。

今回の例ではモバイル固定ナビを実装したサイトのプライマリーカラーに設定していますが、背景色はお好みでどうぞ。

本家モバイル固定ナビのデフォルトのようなデザインにしたい場合は背景色を 白 にしてください。

手順④ VK ボタンブロックを追加

手順⑤ VK ボタンブロックを複製

VK ボタンブロックを複製して、あと3つ作ります。

手順⑥ ナビゲーションブロックを追加

ボタンブロックの後ろに WordPress コアのナビゲーションブロックを追加してメニューを設定します。

手順⑦ ナビゲーションブロックの設定 (1)

手順⑧ ナビゲーションブロックの設定 (2)

この時点でリストビューの見え方は ↓ こんなかんじです。

サイト編集画面の見え方は ↓ こんなかんじです。

ブラウザでサイトを表示すると、PC とスマホのどちらでもこの固定ナビが表示されます。

これから、この「固定ナビ」を「モバイル固定ナビ」にする作業を行っていきます。

手順⑨ 横並びブロックの HTML アンカーを指定

手順⑩ CSS を追加 (1)

以下の CSS を追加します。コードの意味についてはコメントをご参照ください。

@media (min-width: 992px) {
  /* PC では非表示 */
  #ujs-mobile-fix-nav {
    display: none;
  }
}

@media (max-width: 991.98px) {
  /* UJS モバイル固定ナビ */
  #ujs-mobile-fix-nav {
    /* 均等に隙間なくボタンを最大6個まで配置できるように */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15vw, 1fr));
    gap: 0;
    position: relative;
    z-index: 9999;
  }
  #ujs-mobile-fix-nav .vk_button .vk_button_link {
    min-width: unset;
    padding: 0.75em 0 0.5em 0;
  }
  #ujs-mobile-fix-nav .vk_button .vk_button_link_caption {
    /* アイコンを上に配置する */
    display: flex;
    flex-direction: column;
    gap: 0.2em;
  }
  #ujs-mobile-fix-nav .vk_button .vk_button_link_before {
    margin-right: 0; /* 余白をなくしてアイコンをぴったり中央に配置する */
    font-size: 1.5rem; /* アイコンを大きく */
  }
  #ujs-mobile-fix-nav .vk_button .vk_button_link_txt {
    font-size: 0.75rem;
  }
  footer {
    padding-bottom: 60px; /* フッターのコピーライトが隠れないように */
  }
}

この時点でスマホでの見え方は ↓ こんなかんじです。

次に、ナビゲーションブロックのスタイルを調整していきます。

手順⑪ CSS を追加 (2)

以下の CSS を追加します。コードの意味についてはコメントをご参照ください。

@media (max-width: 991.98px) {

  /* ナビゲーションブロックのスタイル */
  #ujs-mobile-fix-nav button::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
  }
  #ujs-mobile-fix-nav .wp-block-navigation__responsive-container-open,
  #ujs-mobile-fix-nav .wp-block-navigation__responsive-container-close {
    padding-bottom: 1rem;
    border: none;
  }

  /* MENU ⇔ CLOSE の文字を表示 */
  #ujs-mobile-fix-nav button.wp-block-navigation__responsive-container-open::after {
    content: "MENU";
  }
  #ujs-mobile-fix-nav button.wp-block-navigation__responsive-container-close::after {
    content: "CLOSE";
  }

  /* 3本線と閉じるボタンを VK ボタンのアイコンの大きさに合わせる */
  #ujs-mobile-fix-nav .wp-block-navigation__responsive-container-close svg,
  #ujs-mobile-fix-nav .wp-block-navigation__responsive-container-open svg {
    height: 2rem;
    width: 2rem;
  }

  /* 閉じるボタンを3本線と同じ位置にする */
  #ujs-mobile-fix-nav .wp-block-navigation__responsive-container-close {
    position: fixed;
    top: unset;
    bottom: 10px;
    right: calc(100vw / 5 / 2 ); /* MENU を含むボタンの数が5個の場合 ※ボタンを6個にする場合は 5 → 6 と書き換える。 */
    transform: translateX(50%);
  }

  .has-modal-open #ujs-mobile-fix-nav :where(.wp-block-navigation__container,.wp-block-page-list) li .wp-block-navigation-item__content {
    border-bottom: 1px solid rgba(255,255,255,0.25); /* ナビゲーションのメニュー項目のボーダー色 */
  }

}

これでモバイル固定ナビが完成しました。

こんなこともできます

ボタンのどれかを、ボタンスタイルをベタ塗りにして背景色を設定すると、↓このようにかんたんに特定のボタンを目立たせることができます。

VK All in One Expansion Unit (ExUnit) をお使いの場合は

この記事に興味をお持ちの方の中には ExUnit をインストールして使っている方がいらっしゃると思います。

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

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

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

自分のサイトではスマホでもページトップへ戻るボタンを表示したいって方は、CSS で ExUnit のボタンの位置を調整して上に移動するやり方もありますが、今回作成したモバイル固定ナビにボタンをもうひとつ追加して ↓ このようにするのがスッキリしていいでしょう。追加したボタンに設定するリンク先は #top です。

【おまけ】本家モバイル固定ナビのカスタマイズ記事

Lightning Pro / Katawara / Lightning G3 Pro Unit のモバイル固定ナビで、この記事で紹介したモバイル固定ナビのように以下のカスタマイズを行うことができます。

• MENU ボタンを右端に配置
• モバイルナビを表示したときに閉じるボタンを表示
• 特定のボタンを目立たせる
• ボタンの数を増やす

下記の記事でカスタマイズ手順を書いています。
猛者と呼ばれて喜んで今年9月に投稿して、その後ちょくちょく書き足してきた記事です。

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

まとめ

「モバイル固定ナビを X-T9 のサイトに実装…」というタイトルを見て、もしかしたら本家モバイルナビのようなカスタマイズ画面も実装されるのかな？と期待された方、すみません。実装方法はまったく違いますが、完成したものは本家版と同じように使えますので「モバイル固定ナビ」と呼んで差し支えないかと…

私が昨年のアドベントカレンダーに書いた記事「横スクロールするグローバルナビを X-T9 のサイトに実装する手順」も同様ですが、使えそうなブロックを組み合わせて、高度な実装、大きな作業工数をかけずに「そっくりさん」を作るのが、私は大好きです。そして、WordPress やベクトル製品が年々進化していて、「そっくりさん」を作るのが楽になっていると感じています。

実装したいデザイン・仕様があって、見積りをとったら高過ぎて悩んでいる方、もしかしたら私がお手伝いできるかもしれません。

明日は石川さんが「ひみつの新機能」を紹介してくれるようです。どんな機能なんだろう…？楽しみですね。

アドベントカレンダーへのご参加をお待ちしております！

アドベントカレンダーの枠がまだ空いてます。
「書いてみたいかも…」「これなら話せるかも？」って思ったら、ほんとに気軽に参加してOKです。
いっしょにカレンダー盛り上げてくれる人、待ってます〜！

VK Blocks Pro の入手方法

VK Blocks Pro は有料の WordPress プラグインですが、単体では販売されていなくて、Vektor Passport というライセンス製品に含まれて販売されています。

Vektor Passport は、コピペで使える豊富なプロ品質プレミアムパターンをはじめ、Lightning G3 Pro Unit、VK Blocks Pro などのベクトル主要製品・サービスを好きなだけ使える大変お得なライセンス製品です。ライセンス1つで自分が制作・管理する複数のサイトに使うことができます。ライセンス期間は 1年 / 3年 / 5年 から選べます。

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

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

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

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

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

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

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

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

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

最新の投稿

この著者の記事一覧

• WordPress2026年1月20日スターターパックのテーブルに流れ（フロー）②のスタイルを追加しました
• WordPress2026年1月19日スターターパックのテーブルに流れ（フロー）のスタイルを追加しました
• WordPress2026年1月13日スターターパックのアコーディオンのデザインを追加しました
• WordPress2025年12月26日スターターパックのトップページの新着表示のデザインが増えました