成功
ハンバーガーメニュー
モバイルメニューボタンを表示し、小さい画面でもヘッダーナビゲーションを見つけやすく保ちます。
このブロックを使用すると、モバイル端末でメインナビゲーションを開くハンバーガーボタンを表示できます。小さい画面でもお客様がメインメニューにアクセスできるようにしたい場合は、このブロックを含める必要があります。テーマブロックの仕組みの概要については、セクションとブロックに関するShopifyドキュメントを参照してください。
このブロックはモバイル専用で、モバイルでメインナビゲーションを機能させるために必要です。
これらの設定を使用して、与えられたスペース内でのブロックの位置を微調整します。レイアウトの選択によってブロックが本来の幅より広く引き伸ばされている場合に、特に役立ちます。
配置の変更がわずかにしか見えない場合は、通常、ブロックが使える余白があまりないことが原因です。まずレイアウトを設定し、その後で配置を使って最終位置を調整してください。
レイアウト設定
Section titled “レイアウト設定”モバイルレイアウト設定を使用して、小さい画面でメニューボタンを行内のどこに表示するかを選択します。左または右に配置すると最も見慣れた表示になりやすく、中央配置はよりシンプルなヘッザーデザインに適しています。
全幅レイアウトにすると、ブロックが行内でより広いスペースを使えるため、配置コントロールの違いがより分かりやすくなります。ヘッダーが他のモバイル要素とバランスよく見えるよう、慎重に使用してください。
fill-space オプションはデスクトップの行間隔にのみ影響します。このブロックが他のヘッダーブロックの横にある場合、行全体のスペース配分に役立ちますが、デスクトップでボタンが表示されるようにはなりません。
使用上の注意
Section titled “使用上の注意”- モバイルでのアクセスを残しておきます。 このブロックを削除するのは、メインナビゲーションへのモバイルアクセスを意図的になくしたい場合のみです。
- 見慣れた位置を選びます。 左または右への配置は、ヘッダー内でお客様がすばやく見つけやすいことが多いです。
- 幅は意図して使います。 全幅レイアウトは余白調整に役立ちますが、シンプルなヘッダーが大きすぎる印象になることもあります。
- 配置の調整は最後に行います。 レイアウトの選択が最も大きな影響を与え、配置は仕上げの調整として最も効果的です。
- 両方の表示領域を確認します。 レイアウトや余白を変更した後は、モバイルとデスクトップの両方でヘッダーを確認し、ボタンが表示される場所で見やすくなっているかを確かめてください。
- 近くのアクションが見やすい状態を保ちます。 他のヘッダー項目が同じ行にある場合は、メニューボタンがそれらと見分けにくくならないようにしてください。