[ 解決済 ] SPメニュの際に表示がされない
[ 解決済 ] SPメニュの際に表示がされない
- このトピックには6件の返信、2人の参加者があり、最後に
により4ヶ月、 2週前に更新されました。
-
投稿
-
■ WordPress のバージョン
6.5.5■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
15.25.1■ Pro Unit のバージョン
不明■ スキンの種類
Evergreen■ スキンのバージョン
不明■ 期待する動作
VK Pattern Libraryで紹介されている保育園・幼稚園02_トップページのハンバーガーメニュを設置したい■ 自分で試した事
ブロックテンプレートパーツでメニューを作成し設定した。■ 症状が発生するブラウザ
全て■ 実際の症状
ＰＣでは問題ないが、ＳＰの際に表示されない。該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
前嶋美佐子さま
お世話になっております、VK Pattern Libraryのご利用ありがとうございます。
「保育園・幼稚園02_トップページ」のパターンの、PCとタブレットサイズ用のヘッダーナビ部分は、カラムブロックとVK Blocks のボタンブロックを組み合わせて作っています。モバイルのサイズではコアのナビゲーションブロックを使用しています。
※理由としましては、コアのナビゲーションブロックは現時点（2024年5月現在）では、ラベルにHTMLが入力できないため、ラベルにFontAwesomeのタグが挿入できませんでしたので、このような作りにしています。上記の作りのため、モバイルサイズでのナビゲーションブロックは、添付画像のように「新しいメニューを作成しますか」をクリックして新規で新しいメニューを作成する必要があります。
右のナビゲーションブロック設定画面の「新しいメニューを作成しますか」をクリックしますと、添付画像2枚目のように、「＋」ボタンがでてきますので、ここからメニューを設定していきます。
一度、上記のマニュアルを見ながら、設定をしてみてください。
もしわからない箇所がございましたらお知らせください。
よろしくお願いいたします。
うなこ様
迅速なご対応ありがとうございます。
Block Template Partsにてモバイル用メニューを追加しましたが、PCで表示されてしまうのとSPのメニューバーは表示されるようになりましたが、位置・動作が正しいのか不安がございます。
お手数おかけしますが、再度チェックいただけますでしょうか。
設定画面のキャプチャ送付させていただきます。よろしくお願いいたします。
前嶋美佐子さま
Block Template Partsにてモバイル用メニューを追加しましたが、PCで表示されてしまうのとSPのメニューバーは表示されるようになりましたが、位置・動作が正しいのか不安がございます。
「保育園・幼稚園02_トップページ」のパターンの、モバイル用のヘッダーの設置方法です。
- ［添付画像1枚目参照］ モバイル用のナビゲーションメニューが設置し終わりましたら、編集画面の「ナビゲーション」ブロックを選択して、右側のブロックの設定画面の「オーバーレイメニュー」を「常時」に変更します。
- ［添付画像2枚目参照］ 次に、モバイル用のヘッダーの一番親のブロック（添付画像では“ヘッダー_モバイル用”という名前のグループブロック）を選択して、右側のグループブロックの設定画面の下の方にある「非表示設定」をクリックで展開して、「画面サイズ : md 、 画面サイズ : lg、画面サイズ : xl、画面サイズ : xxl 」をONにします。そうしますと画面サイズがsm と xsサイズのみで表示されるようになります。
添付いただきました該当URLを確認しましたところ、モバイル用のヘッダーがうまく設置できていないようですので、
ブロックの構成などは、添付画像の2枚目を参考にしながら、設置してみてください。もしくは、適当に固定ページを新規で作って、「保育園・幼稚園02_トップページ」をコピペして、“ヘッダー_モバイル用”のグループブロックを参考にしてください。
いかがでしょうか？
不明な点などございましたらご連絡ください。うなこ様
お世話になります。
ご返答並びにご説明をありがとうございます。モバイルでの表示は分かりました。
ありがとうございます。ロゴ左側の余白等はCSSなどで調整するということになりますでしょうか（SP用ロゴは画像で配置しました）。
また、ロゴを中心に配置する場合もCSSで調整することになりますでしょうか。よろしくお願いいたします。
前嶋美佐子さま
お世話になっております。
ロゴ左側の余白等はCSSなどで調整するということになりますでしょうか（SP用ロゴは画像で配置しました）。
また、ロゴを中心に配置する場合もCSSで調整することになりますでしょうか。【余白の件】
余白の件ですが、モバイル用のヘッダーの内側の余白は、一番外側の親のブロックを選択して（添付画像参照：添付画像の場合は“ヘッダー_モバイル用”という名前のグループブロック）右側のブロックの設定画面から、サイズの「パディング」から設定可能です。【モバイルでのロゴ中央の件】
ロゴを中心にする件ですが、ロゴを中央でナビゲーションを右寄せというイメージであっておりますか？
もしそうでしたら、こちらのパターン「ヘッダー サイトロゴメニュー中央 / ナビゲーション」がイメージに近いと思います。現状ですと横並びブロックでロゴとナビゲーションを横並びにしています。横並びブロックですと、ロゴだけ中央寄せにはできないため（配置からロゴとナビゲーションを中央寄せにはできます）、“ヘッダー_モバイル用”のグループブロック部分を、上記のパターン「ヘッダー サイトロゴメニュー中央 / ナビゲーション」の“ヘッダー_モバイル用”のグループブロックと差し替えるか、該当箇所を参考にして調整してみてください。
- このトピックに返信するにはログインが必要です。
