Wix Studio エディタ:新しいメニューを追加・管理する

読了時間:8分
メニューを追加すると、訪問者がクライアントのサイト内を移動し、必要な情報を見つけやすくすることができます。メニューの種類とアイテムを選択し、カスタムコンテンツを表示するためのドロップダウンを作成できます。
重要:
この記事では、現在一部のユーザー様のみご利用いただける Wix Studio エディタの新しいメニューコンポーネントについて説明します。以前のメニューの追加と管理方法についてはこちら
この記事では、以下の項目について説明します:

メニューを追加する

サイトにメニューを追加して始めましょう。サイトのヘッダーにメニューを追加することをおすすめしますが、クライアントやビジネスに必要な数だけメニューを追加することができます。
サイトにメニューを追加したら、そのメニューに表示するアイテムを選択します。

メニューを追加する方法:

  1. エディタ左側で「要素を追加 をクリックします。
  2. メニュー・検索」を選択します。
  3. メニューの種類(横型、縦型、ハンバーガー)を選択します。
  4. メニューをクリックして、ページ上の希望の位置にドラッグします。
  5. 新しいメニューにアイテムを追加します:
    1. 追加したメニューを選択します。
    2. メニューを管理」をクリックします。
    3. 下部にある「アイテムを追加」をクリックします。
    4. 追加するアイテムを選択します:
      • メインページ:メニューに通常のサイトページを追加します。
      • 動的ページとアプリページ:Wix ストアの商品ページなど、アプリからページを追加したり、CMS のコレクションに接続されたページを追加したりすることができます。
      • リンク:メニューには、さまざまな種類のリンクを追加することができます。クライアントの連絡先ページをはじめ、外部のウェブサイト、サイトページ内のアンカーなどへのリンクを追加することができます。
      • ドロップダウン:訪問者がアイテムにマウスオーバーした際に、メニュー下に表示されるコンテナを追加します。必要に応じてデザインし、メニューアイテムやコンテンツを表示するために使用できます。
「要素を追加」パネルが開いています。カーソルがサイトに横型メニューを追加しています。

サイトのメニューを管理する

既存のメニューとそこに表示されるアイテムはいつでも調整できます。コンテンツを最新の状態に保つために、アイテムを追加したり、無関係なアイテムを削除したり、順序を変更したりできます。

メニューを管理する方法:

  1. エディタで該当するメニューを選択します。
  2. メニューを管理」をクリックします。
  3. 実行する内容を選択します:
「メニューを管理」パネルが開いています。カーソルがアイテムの名前を変更するオプションをクリックしています。

ドロップダウンを作成する

メニューにドロップダウンを作成するには、設定するタイトルに応じて 2通りの方法があります:
  • 既存のメニューアイテム:メニューから既存のアイテム(ページまたはリンク)を選択すると、訪問者がマウスオーバーしたときにドロップダウンが表示されます。
  • クリックできないタイトル:どのページにも移動しないドロップダウンタイトルを追加します。訪問者がマウスオーバーすると、ドロップダウンコンテナが開きます。

ドロップダウンを追加・設定する方法:

  1. エディタで該当するメニューを選択します。
  2. メニューを管理」をクリックします。
  3. 実行する内容を選択します:
    • 既存のメニューアイテムを使用する:
      1. メニューアイテムをドラッグして、ドロップダウンタイトルにしたいアイテムの下に移動させます。
      2. 同じアイテムにマウスオーバーし、「その他のアクション」アイコン  をクリックします。
      3. (ページ名)の下に移動」を選択します。
      4. 他のアイテムについても、手順 a〜c を繰り返します。
    • 新しいドロップダウンを作成する:
      1. +アイテムを追加」をクリックします。
      2. ドロップダウン」を選択します。
      3. ドロップダウンのタイトルを入力します。
      4. キーボードの Enter キーを押して変更内容を保存します。
      5. ドロップダウン下のメニューアイテムをドラッグアンドドロップして追加します。
      6. 追加したい他のアイテムについても、手順 e を繰り返します。
「メニューを管理」パネルでドロップダウンが作成されています。メニューアイテムがその下にドラッグされています。

メニュータイプを変更する

「レイアウト」設定を使用して、希望のメニュータイプ(ナビゲーションバーまたはハンバーガーメニュー)を選択します。

レイアウトを設定する方法:

  1. エディタ内のメニューをクリックします。
  2. レイアウト」アイコン  をクリックします。
  3. メニューの種類を選択します:
    • ナビゲーションバー:メニューアイテムがバーに表示されます。
      • 表示方向:バーを横向きまたは縦向きに配置するかを選択します。
    • ハンバーガー:アイコンが表示されます。サイト訪問者がアイコンをクリックすると、メニューが表示されます。
「メニューのレイアウト」パネル。カーソルが「ナビゲーションバー」を選択しています。

同じサイトに複数のメニューを表示する

必要な数だけメニューを作成し、それぞれに完全に異なるアイテムを表示することができます。
新しいメニューパーツを追加したら、表示するメニューを選択できます:保存した既存のメニュー、またはその場で作成した新しいメニュー。つまり、メニューを保存し、サイト内のさまざまなメニューパーツで再利用できます。
新しいメニューパーツを追加したら、表示するメニューを選択できます:保存した既存のメニュー、またはその場で作成した新しいメニュー。つまり、メニューを保存し、サイト内のさまざまなメニューパーツで再利用できます。
複数のメニューに同じアイテムを表示する場合:
各メニューごとにアイテムに固有の名前を付けることで、常に特定の意図と一致させることができます。作成するすべてのメニューは、互いに完全に独立しています。

お役に立ちましたか?

|