メニュー設定

メニュー全体に適用されるレイアウト、要素、アニメーション、余白などの設定を変更します。

リファレンスすべてのプラン 9 分で読めます

設定タブでは、メニューを表示する場所と、メニュー内のすべての項目の見た目と動作を制御します。1つの項目だけのスタイルを設定するには、その項目自体の設定を使います。メニュー項目を編集するをご覧ください。

設定を開く

設定タブを開く

メニューマネージャー でメニューを開き、エディターの左サイドバーにある歯車のアイコンをクリックします。編集するとプレビューが更新されます。

歯車アイコンでメニューの設定を開きます。
保存して公開する

保存をクリックし、公開をクリックします。

以下のデフォルト値は、新しいメニューが通常開始する値です。一部はテーマによって異なります。

設定

位置

自動で置き換える: アプリがテーマのメインメニューを見つけて置き換えます。
既存のメニューを置き換える: メインメニューを選択 と モバイルメニューを選択 で、置き換えるテーマのメニューを選びます。
このCSSセレクターにメニューを表示: メインメニューのCSSセレクター と モバイルメニューのCSSセレクター に、表示エリアのセレクターを入力します。上のオプションがテーマで機能しない場合にのみ使用してください。

各オプションの手順は、テーマにメニューを公開するで説明しています。

レイアウトと要素

設定タブの位置、レイアウト、要素セクション — 位置、レイアウト、要素セクション

向きデフォルト: 横: 横は、トップレベルの項目を1行に並べます。縦は、サイドバーメニューのように1列に積み重ねます。
配置デフォルト: 左: メニューバー内のトップレベル項目を左、右、中央に配置します。
メニューの最大幅デフォルト: 空: メニューの最大幅（px）。たとえば 1200。空の場合は、使用可能な幅をすべて使います。
検索ボックスを表示デフォルト: オン: メニューに商品検索フィールドを追加します。
デスクトップで区切り線を表示デフォルト: オン: デスクトップで、トップレベル項目の間に区切り線を表示します。色：カラー > Separator color（区切り線の色）。
モバイルで区切り線を表示デフォルト: オン: モバイルメニューの項目の間に区切り線を表示します。
インジケーター（下向き矢印）を表示デフォルト: オン: サブメニューがある項目の横に小さな矢印を表示します。

サブメニュー

枠線を表示デフォルト: オン: サブメニューの周りに枠線を表示します。色：カラー > サブメニュー > Border color（枠線の色）。
デスクトップでスクロールバーを有効にするデフォルト: オン: サブメニューが画面より高い場合、切り取られる代わりに、買い物客がサブメニュー内をスクロールできます。
モバイルでスクロールバーを有効にするデフォルト: オン: モバイルメニューでも同様です。
サブメニューの最大幅デフォルト: 空: サブメニューの最大幅（px）。空の場合は、デフォルトの幅になります。
モバイルでの開き方デフォルト: ドロップダウン: ドロップダウン は、親項目の下にサブメニューを展開します。スライド は、前の階層に戻る手段付きの新しいパネルとして開きます。

メニューアニメーション

トリガー – デスクトップデフォルト: ホバー: デスクトップでのサブメニューの開き方：ホバー、クリック、クリックで切り替え。
トリガー – モバイルデフォルト: クリックで切り替え: モバイルメニューでのサブメニューの開き方。同じ3つのオプションがあります。
エフェクトデフォルト: フェード: 開くときのアニメーション：フェード または 上に移動。
トランジションの速度デフォルト: 300: アニメーションの長さ（ms）。最大1500。
トランジションの遅延デフォルト: 150: サブメニューが開閉するまでの待ち時間（ms）。最大1500。ホバー では、マウスが通過しただけでサブメニューが一瞬開くのを防ぎます。

トリガーの種類は次のとおりです。

ホバー — 項目にマウスを重ねるとサブメニューが開きます。
クリック — 最初のクリックまたはタップでサブメニューが開き、もう一度項目をクリックするとリンク先に移動します。
クリックで切り替え — クリックするたびにサブメニューが開閉し、親項目はリンク先に移動しません。

アカウントリンク

買い物客のログイン状態に応じて切り替わる、顧客アカウントのショートカットです。すべてデフォルトではオフです。オンにすると、そのアイコンとタイトルのフィールドが表示されます（たとえば ログインアイコン と ログインのタイトル。「ログイン」を「サインイン」に変更できます）。

ログインリンクを表示デフォルト: オフ: 買い物客がログインしていないときに表示されます。
登録リンクを表示デフォルト: オフ: アカウントを作成するためのリンク。買い物客がログインしていないときに表示されます。
アカウントリンクを表示デフォルト: オフ: 顧客のアカウントページへのリンク。買い物客がログインしているときに表示されます。
ログアウトリンクを表示デフォルト: オフ: 買い物客がログインしているときに表示されます。

余白

スライダーをドラッグするか、px で値を入力します。

メインメニューの内側余白デフォルト: 20: 各トップレベル項目の左右の余白。
メインメニューの行の高さデフォルト: 50: トップレベルのメニューバーの高さ。
ドロップダウンの行の高さデフォルト: 50: ドロップダウンのサブメニューの各行の高さ。
タブの行の高さデフォルト: 50: タブメニューの各タブの高さ。
リンクリストの行の高さデフォルト: 30: リンクリストブロックの各リンクの高さ。

カルーセル

商品カルーセルや画像スライダーなど、スライドするブロックに適用されます。

自動再生デフォルト: オン: スライドが自動で動きます。
無限ループデフォルト: オン: 最後のスライドの後、カルーセルは最初のスライドからやり直します。

詳細設定

幅が次の値未満のときモバイルメニューを表示デフォルト: 768: モバイルメニューを使用する画面幅（px）の境界値。これより広い画面ではデスクトップメニューが使われます。
リンクリストブロックのサブメニューを非表示にするデフォルト: オフ: モバイルのみ。 各リンクリストの見出しの下にあるリンクを折りたたみます。買い物客は見出しの矢印をタップして展開します。
カートに追加ボタンを表示デフォルト: オフ: メニューの商品ブロックの商品に、カートに追加ボタンを表示します。色：カラー > カートに追加ボタン。
画像の遅延読み込みを有効にするデフォルト: オン: 必要なときにのみメニューの画像を読み込み、ページ速度の向上に役立ちます。オンのままにすることをおすすめします。

トラブルシューティング

モバイルで親項目をタップしてもそのページが開かない

トリガー – モバイル が クリックで切り替え の場合、親項目をタップするとサブメニューが開くだけです。クリック に変更するか、サブメニュー内の最初のリンクとして親ページを追加してください。モバイルでメニュー項目がリダイレクトされないをご覧ください。

タブレットや小さいノートパソコンでモバイルメニューが表示されない

幅が次の値未満のときモバイルメニューを表示 より広い画面では、デスクトップメニューが使われます。その値を大きくしてください。

このページは役に立ちましたか？

問題を報告