[ 解決済 ] スマホでもPCと同じようようにナビゲーション表示
[ 解決済 ] スマホでもPCと同じようようにナビゲーション表示
- このトピックには6件の返信、4人の参加者があり、最後に
により1ヶ月、 1週前に更新されました。
-
投稿
-
■ WordPress のバージョン
6.4.3■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
15.20.2■ Pro Unit のバージョン
0.26.5■ スキンの種類
Origin III■ 期待する動作
スマホで見たときもPCで表示されるナビゲーションメニューが表示される■ 自分で試した事
(1) カスタマイズ項目 Lightning モバイル固定ナビで設定値をいろいろ変更(2) ウイジェットモバイルナビ上部にメニューを追加
(3) Chat GPT-3.5に尋ねてCSSに追加
質問
wordpress lightningでスマホ版のメニューボタンをハンバーガーメニュー（スマホ版の左上の三本線表示）ではなくメニューバーをそのまま表示にするにはどうすればいいですか回答
WordPressのLightningテーマで、モバイル版においてデフォルトで表示されるハンバーガーメニュー（三本線のアイコン）を、デスクトップ版と同様のメニューバー形式に変更するには、いくつかの方法がありますが、主にCSSをカスタマイズする方法が考えられます。ただし、この変更を行うことで、スマートフォンなどの画面が小さいデバイスでの表示が乱れる可能性があるため、変更後は必ず複数のデバイスで表示を確認しましょう。CSSをカスタマイズする方法
WordPress管理画面にログインします。
左側のメニューから 「外観」>「カスタマイズ」 を選択します。
カスタマイズ画面が開いたら、「追加のCSS」 を選択します。
ここに、モバイル版のメニューを常時表示するためのCSSを追加します。例えば、以下のようなCSSを入力してみてください（このCSSは一例です。実際のサイトやLightningテーマのバージョンによって、適切なセレクタは異なる場合があります）:
@media (max-width: 768px) {
.navbar-toggle {
display: none !important;
}.nav-menu {
display: block !important;
}
}このCSSの目的は、ビューポートの幅が768ピクセル以下の場合（つまり、一般的なスマートフォンの画面サイズ）、ハンバーガーメニューの代わりにナビゲーションメニューを常に表示させることです。.navbar-toggleはハンバーガーメニューのボタンに関連付けられたクラスであり、.nav-menuはナビゲーションメニュー自体に関連付けられたクラスです。これらのクラス名は、使用しているテーマのバージョンやカスタマイズによって異なる場合があるので、適宜確認が必要です。
CSSを追加したら、**「公開」**をクリックして変更を保存します。
注意点
この変更によりメニューが画面幅を超えてしまう場合、ユーザー体験が損なわれる可能性があります。特に、アイテム数が多いメニューでは、スマートフォンの画面上でメニューが適切に収まるようデザインを工夫する必要があります。
カスタマイズ後は、異なる画面サイズでサイトが正しく表示されるかを必ず確認してください。特に、小さなスクリーンでの表示を念入りにチェックしましょう。
もし具体的なクラス名や、より詳細なカスタマイズが必要な場合は、テーマのドキュメントを参照するか、開発者に相談することをお勧めします。■ 症状が発生するブラウザ
Chrome■ 実際の症状
メニューが表示されない■ その他特記事項
現状はハンバーガーメニューとモバイル固定ナビによる表示中該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
あまりおすすめしませんが…
@media (max-width: 991.98px){ .global-nav { display: block; } } .vk-mobile-nav-menu-btn { display:none; }あともう一工夫する方法を教えてください
記載の方法によりPC同様にナビゲーションメニューが表示されますが、画面幅を超えてしまいました。
画面幅で折り返すにはどのように修正すればよいですか？御解答の冒頭に「あまりおすすめしませんが…」とあったで、このことかと思い
display: block;
を
display: flex;
flex-wrap: wrap;
にしましたが、変化がありません。
なお、グローバルナビスクロール時のレイアウトは「固定ナビ中央揃え」です。お世話になっております。ベクトルスタッフの松田です。
これまでのスレッドを元に、CSSを調整してみました。お試しくださいませ。@media (max-width: 991.98px){ .site-header-container { overflow: visible; } .global-nav { display: block; } .global-nav--layout--penetration .global-nav-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(100px,1fr)); } .global-nav-list>li .global-nav-name { width: 100%; white-space: wrap; } .global-nav-list>li>a, .device-mobile .global-nav-list>li { padding: 1em; } .device-pc .vk-menu-acc li.menu-item-has-children>a { padding-right: 1em; } .device-mobile .global-nav-list .acc-btn { top: 9px; } } .vk-mobile-nav-menu-btn { display:none; }CSS調整まことにありがとうございます。スマホで見たときもPCで表示されるナビゲーションメニューが表示されるようになりました。サブメニューに着目しますと、PCの場合でもその左側開始位置が左に寄っています。スマホで見るとサブメニューの文字列の先頭が画面から切れていることに気が付きました。添付の画面ショット比較をご覧ください。サブメニューの左側開始位置をメニューの左側開始位置にあわせる方法はありますか？
画面サイズが大きく違うので、メニューの数やサブメニューを含めてユーザー毎に設定の異なる汎用テーマの機能として対応するのは無理なので標準で実装はできていない部分で、そういった内容は個別のカスタマイズの領域になりますが、実感された通り、Aを調整しても結局Bがうまくいかない。対策をとるとCがうまくいかないなど、かなり調整に時間がかかります。
最初におすすめしないと書いたのは、そういった事を踏まえた上でメニュー数や好みも関係するので、個別にプロに依頼しないと実現は難しいと感じたためです。
特定のユーザー様専用のカスタマイズ対応に時間をかけてしまうと、その分本来はユーザー全員に恩恵があるはずの機能改善がされなくなってしまいます。他の全ユーザーにメリットがなく、弊社としても個別の案件に人員を割いても、受託のようにかかった工数を請求できるわけではなく、弊社製品としての機能改善もされずに他製品との競争力が低下してしまうだけの状態に陥ってしまい、結果として売上が低下し運営が成り立たなってしまうという理由から、公式なサポートとしては、あくまで搭載されている機能で出来る範囲の設定方法のサポートまでとさせていただいております。
CSSでのカスタマイズにつきまして公式に提供するサポート外の範囲となりますので、要望通りに最後まで実現するようサポートする事を保証するものではない点だけあらかじめご理解いただけますと幸いです。
その上で今後要望を実現するには、
A. 他の一般参加者様の回答を待つ
B. 弊社スタッフが業務時間外に個人の趣味として回答するのを待つ
C. 自身でCSSを勉強して挑戦する
D. 他の制作者にカスタマイズを依頼する
E. 他の実現方法を模索するという選択肢が考えられます。
A と B は他人を頼る方法になりますので、確実性はありません。
C について、CSSについては簡単なカスタマイズ方法については下記で紹介しておりますが、内容的にプロの制作者に依頼するレベルなので難易度はかなり高いと思います。
D については、 https://showcase.vektor-inc.co.jp/ に登録されている制作者様や、「WordPress カスタマイズ依頼」などで検索して、発注先を検討いただくかたちになります。
E については、現状のヘッダーをCSSでなんとかするのではなく、PC用のヘッダーとスマホ用のヘッダーをブロックエディタで自分で作成して、ブロックの非表示設定機能をつかって画面サイズによって出し分けるなどの方法があります。
ブロックテンプレートパーツ機能につきましては下記参照ください。ただ…こちらもブロックの操作になれていないと難しいのと、サブメニューを展開する事を考えると、よほどCSSの知識がないと対応が難しいので、結局モバイルはハンバーガーメニューが一番無難という結論に達する可能性が高いです。
おそらく “ハンバーガーメニューではモバイルで見たときにメニュー項目が隠れてしまうから嫌” という事ではないかと思うので、その場合、既存のメニューをモバイルでも見えるようにカスタマイズするのではなく、発想を変えて、”モバイルのときにはハンバーガーメニューとは別で、表示したいメニュー項目だけ別途表示させておく” 方が現実的だと思います。
それなら、とりあえずブロックテンプレートパーツでヘッダーを作った上で、
そのヘッダーの中に、モバイルのときだけ表示するメニュー項目を作成（サブメニューの展開まで自動で対応は難易度が上がりすぎるので、あくまで1階層にとどめ、表示する項目も厳選する）し、そのメニューをブロックの非表示設定で画面が狭いときだけ表示するように指定するのが実現できそうなラインではないかと思います。たぶん、スマホでもメニューがすぐに見えるようにしてほしい、という要望があったのだろうと推察します。
代替案として、ハンバーガーボタンを目立つようにするのはいかがでしょうか？
以下の CSS を追加すれば、ボタンが大きくなって、MENU と表示されます。
.vk-mobile-nav-menu-btn { text-indent: 6px; font-size: 12px; padding-top: 32px; width: 50px; height: 50px; background-size: 90%; background-position: top; } .vk-mobile-nav { padding-top: 70px; }
- このトピックに返信するにはログインが必要です。
