CSSセレクターにメニューを表示する

CSSセレクターを入力して、テーマの特定の要素にメニューを配置します。

ハウツーガイドすべてのプラン 4 分で読めます

アプリは、一致するすべての要素の内部にメニューを配置し、その内容を置き換えます。自動で置き換えるや既存のメニューを置き換えるが機能しないカスタムテーマや大幅に編集したテーマ、特定の場所への配置、デスクトップ専用またはモバイル専用のメニューに使用します。

CSSセレクターを設定する

「このCSSセレクターにメニューを表示」を選ぶ

メニューエディターの左側のバーで、設定タブをクリックします。位置で、このCSSセレクターにメニューを表示 を選択します。

このCSSセレクターにメニューを表示と、2つのセレクターのフィールド
セレクターを入力する

設定で説明する2つのフィールドに入力します。グレーの #SiteNav と #AccessibleNav はプレースホルダーで、保存される値ではありません。
保存して公開する

保存をクリックし、メニューを公開します。デスクトップとモバイルでストアフロントを確認してください。

メインメニューのCSSセレクター: デスクトップ のメニューを含む要素です（例: #SiteNav、.header__inline-menu、nav.main-menu）。空欄にすると、モバイルのみにメニューが表示されます。
モバイルメニューのCSSセレクター: モバイル のメニューを含む要素です（例: #AccessibleNav、.menu-drawer）。空欄にすると、テーマのモバイルメニューがそのまま使われます（デスクトップのみ）。

複数の要素 — セレクターをカンマで区切ります（例: .header__inline-menu, .sticky-header nav）。一致するすべての要素にメニューが配置されます。
1つの要素を両方のレイアウトで使う — 両方のフィールドに同じセレクターを入力します。アプリが画面サイズに応じて、デスクトップとモバイルのレイアウトを切り替えます。
単一のリンクではなく、コンテナーを選ぶ — メニュー全体を囲む要素（通常は <nav> または <ul>）に一致させます。そうしないと、メニューが1つの項目の内部に入ってしまいます。
安定したセレクターを使う — IDや .header__inline-menu のようなテーマのクラスを使用します。body > div:nth-child(3) > … のような自動生成されたセレクターは、テーマが変わると機能しなくなります。

フィールドの下にある メニューのCSSセレクターを見つけるには？ をクリックしても確認できます。

メニューを検証する

Chromeでストアを開き、メニューを右クリックして検証を選びます。
メニューのコンテナーを見つける

要素パネルで、タグにカーソルを合わせます。ハイライトがメニュー全体を覆っている、最も近い <nav> または <ul> を見つけます。
セレクターをコピーする

# と id（#SiteNav）、または . とわかりやすいクラス（.header__inline-menu）を使います。そうでない場合は、タグを右クリックして コピー > セレクターをコピー を選び、アプリに貼り付けます。
モバイルでも繰り返す

DevToolsのデバイスアイコンをクリックしてスマートフォンを選び、モバイルメニュー（ハンバーガーアイコン）を開きます。同じ手順を繰り返して、モバイル用のセレクターを取得します。

テーマにメニューがまったくない場所にメニューを表示したい場合は、カスタムメニュー位置を追加するをご覧ください。

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