[ 解決済 ] SPメニュの際に表示がされない

前嶋美佐子さま

お世話になっております、VK Pattern Libraryのご利用ありがとうございます。

「保育園・幼稚園02_トップページ」のパターンの、PCとタブレットサイズ用のヘッダーナビ部分は、カラムブロックとVK Blocks のボタンブロックを組み合わせて作っています。モバイルのサイズではコアのナビゲーションブロックを使用しています。
※理由としましては、コアのナビゲーションブロックは現時点（2024年5月現在）では、ラベルにHTMLが入力できないため、ラベルにFontAwesomeのタグが挿入できませんでしたので、このような作りにしています。

よろしくお願いいたします。

前嶋美佐子さま

Block Template Partsにてモバイル用メニューを追加しましたが、PCで表示されてしまうのとSPのメニューバーは表示されるようになりましたが、位置・動作が正しいのか不安がございます。

「保育園・幼稚園02_トップページ」のパターンの、モバイル用のヘッダーの設置方法です。

1. ［添付画像1枚目参照］ モバイル用のナビゲーションメニューが設置し終わりましたら、編集画面の「ナビゲーション」ブロックを選択して、右側のブロックの設定画面の「オーバーレイメニュー」を「常時」に変更します。
2. ［添付画像2枚目参照］ 次に、モバイル用のヘッダーの一番親のブロック（添付画像では“ヘッダー_モバイル用”という名前のグループブロック）を選択して、右側のグループブロックの設定画面の下の方にある「非表示設定」をクリックで展開して、「画面サイズ : md 、　画面サイズ : lg、画面サイズ : xl、画面サイズ : xxl 」をONにします。そうしますと画面サイズがsm と xsサイズのみで表示されるようになります。

添付いただきました該当URLを確認しましたところ、モバイル用のヘッダーがうまく設置できていないようですので、
ブロックの構成などは、添付画像の2枚目を参考にしながら、設置してみてください。

もしくは、適当に固定ページを新規で作って、「保育園・幼稚園02_トップページ」をコピペして、“ヘッダー_モバイル用”のグループブロックを参考にしてください。

いかがでしょうか？
不明な点などございましたらご連絡ください。

前嶋美佐子さま

お世話になっております。

ロゴ左側の余白等はCSSなどで調整するということになりますでしょうか（SP用ロゴは画像で配置しました）。
また、ロゴを中心に配置する場合もCSSで調整することになりますでしょうか。

【余白の件】
余白の件ですが、モバイル用のヘッダーの内側の余白は、一番外側の親のブロックを選択して（添付画像参照：添付画像の場合は“ヘッダー_モバイル用”という名前のグループブロック）右側のブロックの設定画面から、サイズの「パディング」から設定可能です。

【モバイルでのロゴ中央の件】
ロゴを中心にする件ですが、ロゴを中央でナビゲーションを右寄せというイメージであっておりますか？
もしそうでしたら、こちらのパターン「ヘッダー サイトロゴメニュー中央 / ナビゲーション」がイメージに近いと思います。

現状ですと横並びブロックでロゴとナビゲーションを横並びにしています。横並びブロックですと、ロゴだけ中央寄せにはできないため（配置からロゴとナビゲーションを中央寄せにはできます）、“ヘッダー_モバイル用”のグループブロック部分を、上記のパターン「ヘッダー サイトロゴメニュー中央 / ナビゲーション」の“ヘッダー_モバイル用”のグループブロックと差し替えるか、該当箇所を参考にして調整してみてください。