Wix ヘルプセンター
    ホーム
  1. サイトの作成
  2. Wix エディタ
  3. パーツを追加・カスタマイズする
  4. ボックス
    5. Wix エディタ：ホバーボックスを追加・設定する

Wix エディタ：ホバーボックスを追加・設定する

読了時間：4分
サイトにホバーボックスを追加して、サイト訪問者にクールでインタラクティブな効果を作成しましょう。
ホバーボックスは、訪問者がマウスオーバーすると変化し、さまざまなパーツやコンテンツが表示されます。パーツにアニメーションを追加して、訪問者をさらに驚かせ、サイトを探索し続けるように促すこともできます。

ステップ 1 | サイトにホバーボックスを追加する

ホバーボックスを追加して、目を引くページの作成を始めましょう。楽しくカラフルなテンプレートがたくさんあるので、サイトの見た目やスタイルに合わせて選択できます。

ホバーボックスを追加する方法：

  1. エディタ左側で「追加」パネルをクリックします。
  2. 「ボックス」をクリックします。
  3. 「ホバーボックス」をクリックします。
  4. ボックスをクリックまたはドラッグして、ページに追加します。

ステップ 2 | ホバーボックスにパーツを追加する

ボックスにパーツを追加して、訪問者に関連情報とコンテンツを表示します。通常モードとホバーモード、またはその両方に異なるパーツを追加できます。
両方のビューにパーツを追加するには、通常モードで追加します。通常モードでのみパーツを表示するには、パーツを追加し、ホバーモードで非表示にします。
ホバーモードでのみパーツを表示するには、ホバーモードで追加します。

ホバーボックスにパーツを追加する方法：

  1. ホバーボックスをクリックします。
  2. パーツを追加するモードに応じて、「通常」タブまたは「ホバー」タブをクリックします：
    • 通常：
      • エディタ左側で「追加」をクリックします。
      • パーツをクリックまたはドラッグして、ボックスに追加します。
    • ホバー：
      • エディタ左側で「ホバーに追加」をクリックします。
      • パーツをクリックまたはドラッグして、ボックスに追加します。
注意：
通常ビューでボタンを追加した場合、ホバーモードでデザインを編集することはできません。回避策として、ホバービューでボタンを非表示にし、再度追加して必要に応じてデザインすることができます。

ステップ 3 | ボックスデザインをカスタマイズする

ホバーボックスをカスタマイズして、希望どおりの見た目にすることができます。選択したボックスデザインに応じて、塗りつぶし、枠線、角などの設定をサイトのニーズに合わせて調整できます。

ボックスデザインをカスタマイズする方法：

  1. 「デザインを変更」アイコン  をクリックします。
  2. 「デザインをカスタマイズ」をクリックします。
  3. （オプション）上部にある別のプリセットデザインを選択します。
  4. 下記のタブから選択して、各設定を調整します：
    • 不透明度・色：背景色を選択し、スライダーをドラッグして不透明度を調整します。
    • 枠線：枠線の色、不透明度、太さを調整します。
    • 角：ボックスを使用して、ボックスの角のピクセルサイズを調整します。
    • 影：影を有効または無効にし、角度、位置、サイズ、ぼかし、色と不透明度を調整します。

ステップ 4 | ホバーボックスにエフェクトを追加する

エフェクトはホバーボックスに命を吹き込みます。幅広い選択肢が用意されており、人目を引く楽しいエフェクトを作成できます。
サイトやホバーボックスに合わせてエフェクトをカスタマイズすることもできます。

エフェクトを追加・カスタマイズする方法：

  1. ホバーボックスをクリックします。
  2. 「ホバー」タブをクリックします。
  3. 「エフェクトを選択」をクリックします。
  4. 「編集」をクリックし、エフェクトの設定を調整します。
各エフェクトをカスタマイズする方法については、以下のオプションをクリックしてください。

お役に立ちましたか？

|
この記事では下記を説明します：
  • ステップ 1 | サイトにホバーボックスを追加する
  • ステップ 2 | ホバーボックスにパーツを追加する
  • ステップ 3 | ボックスデザインをカスタマイズする
  • ステップ 4 | ホバーボックスにエフェクトを追加する