ナビゲーションのレイアウト設定

デスクトップとモバイルのヘッダーレイアウト全体で、ナビゲーションの配置と余白を管理します。

注目のリンク

役立つ動画

Shopify Academy動画：ストアのカスタマイズ

この設定グループを使用して、デスクトップとモバイルのヘッダー内でナビゲーションをどこに表示するかを管理します。ナビゲーションをメインの行内に表示したままにすることも、メニューにより多くのスペースが必要な場合に別のフル幅の行に表示することもできます。

インターフェースのより広い概要については、テーマエディターに関するShopifyドキュメントを参照してください。

レイアウト設定

デスクトップとモバイルのレイアウトは個別に制御されるため、一方の画面サイズではコンパクトな配置にし、もう一方ではゆとりのある配置にできます。左、中央、右はナビゲーションをメインのヘッダー行内に配置します。フル幅は、それをその行の下の独立した行に移動します。

この選択は、視認性とバランスの両方に影響します。ナビゲーションをメインの行に置くと、より引き締まったヘッダーを作れます。一方、フル幅の行にするとメニュー項目により多くのスペースを与え、ナビゲーションをより目立たせることができます。

配置とグループ化の動作についてさらに詳しくは、ナビゲーションのレイアウト設定を参照してください。

フル幅は配置を変えるだけではありません。ナビゲーションをメインのヘッダー行の下にある別の行に配置します。

デスクトップでは、ナビゲーションをブランディング、検索、またはアクションアイコンの横に配置する必要がある場合、左と右が適しています。ナビゲーションをヘッダーの視覚的な中心にしたい場合は、中央がよく選ばれます。

モバイルでは、対称性よりも分かりやすさを優先してください。ヘッダーが窮屈に感じる場合は、ナビゲーションをフル幅の行に移動すると、レイアウトを見やすくし、ほかのヘッダー要素との競合を減らせます。

利用可能なスペースを埋めると、ナビゲーション領域が広がり、デスクトップの行内の残りのスペースを使うようになります。これにより、ナビゲーションが小さい項目の横にあるときに、ヘッダーのバランスをより整えやすくなり、余白が空いたままになるのを防げます。

これは、ナビゲーションがメインの行にある場合に最も効果的です。メニューラベルが長い場合や、すでにヘッダーが密集して見える場合は、追加の幅によってバランスが改善される一方で、余白が不自然にならないか慎重に確認してください。

レイアウトをメニューの長さに合わせる。 トップレベルのナビゲーションにより多くの横スペースが必要な場合は、フル幅を使用します。
各画面サイズを個別に調整する。 両方で同じ配置を強制するのではなく、デスクトップとモバイルそれぞれで最も分かりやすいレイアウトを選択します。
フル幅を使って窮屈さを減らす。 ナビゲーション、ブランディング、ユーティリティ項目が1つの行で競合する場合は、ナビゲーションを下に移動すると、通常、ヘッダーがすっきりします。
意図を持ってスペースを広げる。 デスクトップの行に余りがあり、ナビゲーションがレイアウトの支点として役立つ場合は、利用可能なスペースを埋めるをオンにします。
ヘッダー全体のバランスを確認する。 配置を変更した後は、ナビゲーションがほかのヘッダー要素の横でも意図どおりに見えるか確認してください。
両方のビューポートを確認する。 デスクトップではバランスよく見えるレイアウトでも、モバイルではヘッダーが窮屈になることがあるため、公開前に両方のサイズを確認してください。