この記事は Vektor WordPress Solutions Advent Calendar 2024 の12月5日の記事です。
こんにちは、魚沼情報サービスの対馬俊彦です。
ベクトルスタッフのトリさん（鳥山さん）の昨日の記事「VK パターンライブラリをコピペしてカスタマイズ – ベクトル製品リリースタイムラインの事例」、ご覧になりましたか。トリさんたちが作って提供してくれているブロックパターンは、ブロックの組み合わせ方やスタイルの使い方のアイディアをあちこちに見つけることができて、楽しくてためになりますよね🥰
それでは、トリさんからバトンを受け取って12月5日の記事を書きます。
はじめに
このサイトは私が初めて X-T9 を使って作ったサイトで、X-T9 (ブロックテーマ) について手探りの状態でカスタマイズを行いました。まだほとんど使いこなせてなくて、私はブロックテーマに関しては初心者です。
X-T9 を使い慣れている方がご覧になると、ここヘンだよ…と感じる内容が含まれているかもしれません。私自身、この記事の内容は完成度が低いんじゃないかと心配していて、今後もし問題点に気がいたらこの記事の内容に加筆・修正などの改善を行っていくかもしれません。
そのあたりをご了承の上でこの記事をご覧いただければ幸いです。
この記事で解説するカスタマイズ
東京ディズニーリゾートのサイト をスマホで見ると、グローバルナビのサブメニューが横スクロールする仕組みになっています（図の赤枠部分）。
このサブメニューの HTML は <ul>・<li> タグを使ったシンプルなもので、おそらくこのサイト専用に書かれた JavaScript で横スクロールを実装しているものと思われます。
このサブメニューのような動きをするグローバルナビを X-T9 のサイトに実装する手順をこの記事で解説します。東京ディズニーリゾートのサブメニューはかなり開発工数がかかっていると推測しますが、私がこの記事で解説するのはすごくお手軽な実装方法で、JavaScript を書きません😊
カスタマイズしたグローバルナビをいまご覧いただいているこのサイトに実装してありますので、完成見本としてご覧ください。
それでは、実装手順を解説していきます。
この記事を見てやってみようという方は、ヘッダーを元に戻せるようにバックアップしてからやってもらう方がよいと思います。
事前準備
手順① ヘッダーを空にする
手順をわかりやすくするために、ヘッダーを空にします。
デフォルト状態の X-T9 でヘッダーの編集画面を開くと、グループブロックが2つあると思いますので、2つとも削除します。
手順② グループブロックにサイトロゴを入れる
グループブロックを作って、その中にサイトロゴを入れます。
サイトロゴの画像の幅を設定して、お好みで上下に適当な余白を設定しておきましょう。余白の設定はグローバルナビが完成してからでもかまいません。
手順③ スライダーブロックを追加する
VK Blocks のスライダーブロックを追加して、追加 CSS クラス に header-nav-custom と入力します。
そして、スライダーブロックを以下のように設定します。
スライド設定
| エフェクト | スライド |
| 繰り返し | オフ |
| 自動再生 | オフ |
| ページネーションの種類 | 非表示 |
| ナビゲーションの位置 | 中央 |
アイテムの複数表示設定
| 一度に表示するスライドアイテムの数 PC | 8 |
| 一度に表示するスライドアイテムの数 タブレット | 6 |
| 一度に表示するスライドアイテムの数 モバイル | 5 |
| 一度に遷移するスライドアイテムの数 | 1つずつ |
| アクティブスライドを中央にする | オフ |
手順④ ボタンブロックを追加する
スライダーアイテムに VK Blocks のボタンブロックを入れて以下のように設定します。
| ボタンサイズ | 標準 |
| ボタンの位置 | ブロック |
| ボタンスタイル | テキストのみ |
そして、スライダーアイテムを複製して8個作ります。
【補足】メニュー項目の数について
グローバルナビのメニュー項目の数が8個の前提でこのカスタマイズを行っていますが、8個でなくても動作します。
8個より少ない場合はパソコンで表示したときに右側に空きが生じます。（見た目がちょっと悪いかも）
8個より多い場合はパソコンで表示したときにも横スクロールします。（これはこれでアリかも）
手順⑤ CSS を追加
以下の CSS を追加します。
/* スライドアイテムの上余白なし */
.header-nav-custom .vk_slider_item_container {
margin-block-start: 0;
}
/* 左右の矢印 */
.header-nav-custom.vk_slider :is(.swiper-button-next, .swiper-button-prev) {
background-color: transparent;
top: 50%;
transform: translateY(-50%);
margin-top: 0;
width: 1.5rem;
height: 1.5rem;
transition: opacity .5s;
}
.header-nav-custom .swiper-button-prev {
left: 3px;
}
.header-nav-custom .swiper-button-next {
right: 3px;
}
.header-nav-custom.vk_slider :is(.swiper-button-next, .swiper-button-prev)::after {
font-size: min( 2rem, 6.5vw );
}
.header-nav-custom.vk_slider :is(.swiper-button-next, .swiper-button-prev).swiper-button-disabled {
opacity: 0;
}
/* VK ボタン */
.header-nav-custom .vk_button {
margin-top: 5px;
}
.header-nav-custom .vk_button .vk_button_link {
padding: 1em 0 .25em;
font-size: min( 14px, 2.75vw );
}
.header-nav-custom .vk_button .vk_button_link.vk_button_link-type-text {
border-right: 1px solid #f1f1f1; /* 縦ボーダーを表示 */
}
.header-nav-custom .vk_slider_item:last-child .vk_button .vk_button_link.vk_button_link-type-text {
border-right: none;
}
.header-nav-custom .vk_button .vk_button_link {
min-width: unset;
}
.header-nav-custom .vk_button .vk_button_link_caption {
display: flex;
flex-direction: column;
gap: 3px;
}
.header-nav-custom .vk_button .vk_button_link_before {
margin-right: 0;
font-size: min( 1.75rem, 5.5vw );
}
/* パソコンではコンテナ幅が最大 */
@media (min-width: 992px) {
.header-nav-custom.vk_slider.alignfull {
margin-right: auto !important;
margin-left: auto !important;
max-width: var(--wp--style--global--content-size) !important;
}
}
/* スクロール時に影をつける */
.is-style-scrolled-header-fixed {
box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
/* 【2024.12.6 追加】ナビが遅れてフェードインする。こうしないと、最初に「ホーム」だけ見えてしまってかっこ悪い。 */
.header-nav-custom.vk_slider {
animation: navFade 0.5s ease both 0.75s;
}
@keyframes navFade {
0% {opacity: 0}
100% {opacity: 1}
}ここまでの手順でグローバルナビができました。
最後に、スクロール時にグローバルナビを画面上部に固定する作業を行います。
手順⑥ スクロール時のグローバルナビを設定
以下の (1)～(3) の操作により、スクロール時に画面上部にグローバルナビを固定表示するように設定します。
(1) グループブロック複製します。
(2) 複製したグループブロック内のサイトロゴを削除します。
(3) グループブロックに 追加 CSS クラス is-style-scrolled-header-fixed を指定します。
以上で完成です。お疲れさまでした。
おわりに
横スクロールするグローバルナビをプラグイン VK Blocks のスライダーブロックを使ってお手軽に作る方法を紹介しました。
私はここ何年か WordPress サイトの制作にいつも Lightning を使っていました。Lightning なら隅々まで把握していて、どんなサイトでも効率よく作れるという自信があって、そのために X-T9 などのブロックテーマに積極的に関わるのが遅れていました。
光栄なことに、11月にベクトルさんの公式テクニカルパートナーをさせていただくことになって、今後は X-T9 のサポート依頼にも対応できるようにしないといけないなぁ…と思っています。
Lightning G3 Pro Unit のヘッダー用ブロックテンプレートパーツを使えば、Lightning でもこの記事で紹介した横スクロールするグローバルナビを同じくらいの手間で実装できますが、今回はあえて X-T9 を選びました。
うまく実装でき、記事が完成してホッとしています。
明日のアドベントカレンダーは、yori3 さん がお気に入りの VK Blocks の機能について書いてくれます。お楽しみに!!