header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image
この記事では下記を説明します：
  • ステップ 1 | サイトにポップアップを追加する
  • ステップ 2 | ポップアップメニューを設定する
  • ステップ 3 | メニューを開くボタンを追加する
  • ステップ 4 | モバイルサイトでボタンを非表示にする
  1. ホーム
  2. サイトの作成
  3. Wix エディタ
  4. ページ・メニューを管理する
  5. メニュー
  6. Wix エディタ：全画面のポップアップメニューを作成する

Wix エディタ：全画面のポップアップメニューを作成する

4分
この記事内
  • ステップ 1 | サイトにポップアップを追加する
  • ステップ 2 | ポップアップメニューを設定する
  • ステップ 3 | メニューを開くボタンを追加する
  • ステップ 4 | モバイルサイトでボタンを非表示にする
ポップアップパーツを使用して、魅力的な全画面ポップアップメニューを作成しましょう。訪問者が「メニュー」ボタンをクリックすると、サイトのコンテンツの上に表示されます。
「メニュー」ボタンをクリックして、サイトで全画面ポップアップメニューが開いている GIF。

ステップ 1 | サイトにポップアップを追加する

まず、「パーツを追加」パネルからポップアップをサイトに追加し、後でデザインします。

ポップアップを追加する方法：

  1. エディタに移動します。
  2. エディタ左側で「パーツを追加」 をクリックします。
  3. 「インタラクティブ」をクリックします。
  4. サイトに追加するポップアップを選択します。
Wix エディタでポップアップオプションが表示された「パーツを追加」パネル

ステップ 2 | ポップアップメニューを設定する

ポップアップを追加したら、訪問者がサイトにアクセスするたびに自動的に表示されないように設定します。次に、ポップアップを好みに合わせてデザインし、縦型メニューを追加します。

ポップアップを設定する方法：

  1. エディタでポップアップをクリックします。
  2. 「設定」アイコン  をクリックします。
  3. ポップアップの名前を「メニュー」などのわかりやすい名前に変更します。
  4. 「ポップアップの自動表示」下で「オフ」を選択します。
ポップアップ設定パネル。「ポップアップの自動表示」下で「オフ」が選択されています。
  1. ポップアップ内のすべてのパーツを削除します。X アイコンは削除しないでください。
  2. ポップアップに縦型メニューを追加します。
  3. メニューをデザインします。メニューのフォントは大きく、中央揃えにすることをおすすめします。
  4. 準備ができたら、上部の「モードを終了」をクリックします。
Wix エディタでポップアップモードを終了しています。
ヒント：
サイトに合わせてポップアップの背景と背景オーバーレイをカスタマイズすることもできます。背景を半透明にして、クールなエフェクトを追加しましょう。

ステップ 3 | メニューを開くボタンを追加する

ポップアップとメニューの準備ができたら、訪問者がクリックしてメニューにアクセスするためのボタンを追加します。次に、ボタンをポップアップにリンクします。

ボタンを追加する方法：

  1. エディタ左側で「パーツを追加」 をクリックします。
  2. 「装飾」を選択します。
  3. 「ベーシック」を選択します。
  4. ベーシックシェイプ下で「もっと見る」をクリックします。
Wix エディタで「もっと見る」を選択しているスクリーンショット
  1. 検索バーに「メニュー」と入力し、Enter キーを押します。
  2. メニューボタンデザインを選択し、「ページに追加」をクリックします。
  3. エディタでメニューボタンをクリックします。
  4. （オプション）「デザインを変更」アイコン   をクリックし、メニューボタンをデザインします。
  5. 「リンクを追加」アイコン  をクリックします。
  6. 左側で「ポップアップ」を選択します。
  7. ドロップダウンメニューからポップアップを選択します。
  8. 「完了」をクリックします。
ヒント：
  • メニューボタンをサイトの目立つ場所に配置します。ヘッダーに配置するか、画面に固定機能を使用して、サイトの上部に固定してください。メニューボタンがヘッダーに配置されていない場合は、全ページに表示される設定にしてください。
  • 独自のメニューボタンをデザインすることもできます。テキストボタン、アイコンボタン、または別のシェイプにすることができます。以下の例をご覧ください：

ステップ 4 | モバイルサイトでボタンを非表示にする

すでに全画面メニューがプリセットされているモバイルサイトで、作成したばかりのボタンを非表示にします。

ボタンを非表示にする方法：

  1. モバイルエディタに移動します。
  2. ポップアップにリンクされているメニューボタンをクリックします。
  3. 「非表示」アイコン  をクリックします。
モバイルエディタでライトボックスの「非表示にする」オプションが表示されたスクリーンショット。

お役に立ちましたか？

|

Helpmate

こんにちは、さん

さらにヘルプが必要ですか？
この記事の概要
Unlock personalized helpLog in to get the most out of Helpmate.