このサイトで Lightning のモバイルナビをパソコンでも使用するカスタマイズを行ってあります。
カテゴリーを選んで閲覧するユーザーが多いブログサイトを想定
カテゴリーを選んで閲覧されることが多いブログサイトを想定して、グローバルナビにブログのカテゴリーアーカイブへのリンクを配置して、カテゴリーアーカイブ以外へのリンクをモバイルナビに持たせる構成になっています。
この記事に書いてあるカスタマイズをお客様に見ていただくために新しく作ったサイトなので、現時点で、このサイトの記事はまだご覧になっているこの記事1件しかありません。なので、カテゴリーアーカイブへのリンクをクリックしてもほぼ空っぽです😓 今後、徐々に増やしていくつもりですので、よろしくお願いいたします。
通常の閲覧時
- グローバルナビの右にハンバーガーボタンを配置しました。
- ハンバーガーボタンに「メニュー」の文字を表示しました。
- グローバルナビのナビ項目（ボタン）にマウスホバー効果を設定しました。
モバイルナビを表示した状態
- スマホのように全画面にせず、後ろにコンテンツが見えるようなデザインにしました。
- ハンバーガーボタンに「閉じる」の文字を表示しました。
MENU ⇔ CLOSE と英語表記も可能ですし、文字なしも可能です。グローバルナビに合わせてボーダーで囲むことも可能です。
グローバルナビをかんたんに書き換えできます
グローバルナビおよび後述のスマホの画面下部のボタンは WordPress のメニューを使用していますので、お客様側でかんたんに変更していただけます。
このサイトではパソコンのグローバルナビとスマホの画面下部のボタンを同じにしていますが、上に示す通り、別々のメニューを設定することができるようにしてあります。
カスタマイズをプラグイン化
上記のカスタマイズコードをプラグイン化して、Lightning で制作するサイトで使い回せるようにプラグイン化しました。
プラグイン名は UJS Site Header Customize です。
このサイトでは、上記のプラグインをインストールしてメニューを設定するだけの作業で済みましたので、このサイトでのカスタマイズの作業工数はほとんどかかっていません。（プラグインとして作るまでの作業工数はかかりましたが...）
スマホでの表示
- 画面下部にカテゴリーアーカイブにリンクするボタンを配置しました。
UJS Fixed Buttons という弊社オリジナルのプラグインを使ってボタンを表示しています。こちらも、このサイトでのカスタマイズの作業工数はほとんどかかっていません。
業種に合わせて活用できます
このカスタマイズは、重要なボタンをクリックしやすい目立つ場所に表示しておき、それ以外はメニューを開いて選ぶようにしたい、というご要望にお応えできますので、以下の例のようにさまざまな業種のお客様に対応させていただくことが可能です。
投稿者プロフィール
- 魚沼情報サービス・ベクトル公式テクニカルパートナー
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
メールでのお問い合わせはこちら
