Wix ヘルプセンター
    ホーム
  1. サイトの作成
  2. Wix エディタ
  3. ページ・メニューを管理する
  4. メニュー
    5. Wix エディタ：ハンバーガーメニューを追加・設定する

Wix エディタ：ハンバーガーメニューを追加・設定する

読了時間：5分
ハンバーガーメニューは、ライブサイトでボタンを表示するメニューです。サイト訪問者がボタンをクリックすると、コンテナ内でメニューが開きます。間隔やレイアウトを損なうことなく、訪問者にサイトを閲覧してもらうために最適な方法です。
Wix ライブサイトの GIF。ハンバーガーメニューボタンがクリックされ、コンテナ内でメニューが開いています。
備考：
ハンバーガーメニューとモバイルサイトメニューは類似していますが、別々のメニューです。ハンバーガーメニューはモバイルエディタでは追加できません。デスクトップで追加したサイトはモバイル版サイトには移行されません。

ステップ 1 | サイトにハンバーガーメニューを追加する

サイトにハンバーガーメニューを追加して始めましょう。あらかじめデザインされたオプションがたくさんあるので、サイトのテーマやデザインに合ったものを選択できます。

ハンバーガーメニューを追加する方法：

  1. エディタ左側で「パーツを追加」 をクリックします。
  2. 「メニュー・アンカー」をクリックします。
  3. 「ハンバーガーメニュー」をクリックします。
  4. メニューアイコンをクリックして、ページにドラッグします。
「パーツを追加」パネル。「メニュー・アンカー」タブでハンバーガーメニューが開き、カーソルがメニューアイコンをクリックしています。

ステップ 2 | メニューボタンを設定する

サイトにメニューを追加したら、ボタンに表示する内容（テキスト、アイコン、またはその両方）を選択します。必要に応じて、新しいアイコンを選択したり、テキストを好みに合わせて更新したりできます。

ボタンを設定する方法：

  1. ページ上のハンバーガーメニューボタンをクリックします。
  2. 「設定」アイコン  をクリックします。
  3. 「表示する内容を選択」をクリックして、ライブサイトに表示する内容を設定します：
    • アイコンのみ：アイコンのみが表示されます。
      • アイコンを変更する：「アイコン画像を変更」アイコン  メニューボタンの新しいアイコンを選択します。Wix が提供するさまざまな無料オプションから選択するか、独自の素材をアップロードすることができます。
      • 代替テキスト：アイコンの代替テキストを入力します。
        注意：このテキストによって、スクリーンリーダーは名前を「読んで」ボタンの目的を理解することができます。ライブサイトには表示されません。
    • テキストのみ：ボタンにテキストのみが表示されます。
      • テキスト：入力欄にテキストを入力します。
    • テキスト・アイコン：テキストとアイコンの両方が表示されます。
      • アイコンを変更する：「アイコン画像を変更」アイコン  メニューボタンの新しいアイコンを選択します。Wix が提供するさまざまな無料オプションから選択するか、独自の素材をアップロードすることができます。
      • テキスト：入力欄にテキストを入力します。
ハンバーガーメニューボタンの設定パネル。カーソルが代替テキストにマウスオーバーしています。

ステップ 3 | メニューアイテムを管理する

メニューに表示するアイテムを選択します。メニューを高度なメニューとして設定した場合、「メニューを管理」パネルからアイテムを表示または非表示にすることができます。高度なメニューを有効にしない場合は、「サイトページ」パネルから必要な変更を加えることができます。

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

  1. ページ上のハンバーガーメニューボタンをクリックします。
  2. 「メニューを編集」をクリックして、メニューのコンテナを開きます。
  3. メニューアイテムを選択します。
  4. 「メニューを管理」をクリックします。
  5. オプションを使用してアイテムを管理します：
    • アイテムを追加する：
      1. 下部で「メニューアイテムを追加」をクリックします。
      2. 追加したいアイテムの種類を選択して設定します。
    • アイテムを表示 / 非表示にする：
      • 高度なメニュー：
        1. 該当するアイテム横の「その他のアクション」アイコン  をクリックします。
        2. 「メニューから非表示にする」 をクリックします。
          注意：高度なメニューに既存のアイテムを表示するには、前の手順（アイテムを追加する）を使用して追加する必要があります。
      • 通常のメニュー：
        1. 該当するアイテム横の「その他のアクション」アイコン  をクリックします。
        2. 「メニューから非表示」 または「メニューに表示」 をクリックします。
ハンバーガーメニューの「メニューを管理」パネル。カーソルが「＋メニューアイテムを追加」をクリックし、オプションが表示されています。

ステップ 4 | コンテナを設定する

コンテナ設定を使用して、サイト訪問者がメニューを開いたときのサイトページの見た目と動作を選択します。

コンテナを設定する方法：

  1. ページ上のハンバーガーメニューボタンをクリックします。
  2. 「メニューを編集」をクリックして、メニューを開きます。
  3. コンテナをクリックします。
  4. 「設定」をクリックします。
  5. 希望通りにコンテナを設定します：
    • 外側をタップして閉じる：トグルをクリックして、訪問者がコンテナの外側をクリックしてメニューを閉じることができるようにします。
    • 背景オーバーレイを表示：トグルをクリックして、訪問者がメニューを開いた際にサイトページに背景オーバーレイを表示します。
ハンバーガーメニューコンテナの設定。カーソルが「外側をタップして閉じる」トグルをクリックしています。
次のステップ：

お役に立ちましたか？

|
この記事では下記を説明します：
  • ステップ 1 | サイトにハンバーガーメニューを追加する
  • ステップ 2 | メニューボタンを設定する
  • ステップ 3 | メニューアイテムを管理する
  • ステップ 4 | コンテナを設定する