Wix Studio エディタ：カスタムクリックまたはホバー操作を作成する | サポートセンター

Wix の使用方法を学び、サイトとビジネスを構築する。

直感的な Wix 機能でサイトをデザインして管理する。

定期購入、プラン、請求を管理する。

ビジネスを運営し、サイト会員とつながる。

ドメインの購入、サイトへの接続と移管方法を学ぶ。

ビジネスとウェブプレゼンスを成長させるツールを入手する。

SEO とマーケティングツールで知名度を上げる。

より効率的な作業を支援する高度な機能を利用する。

解決策や既知の問題について確認し、問い合わせる。

コースとチュートリアルでスキルを習得する。

ウェブデザインやマーケティングなどのヒントを得る。

検索エンジンからのトラフィックを増やす方法について学ぶ。

フルスタックプラットフォームでカスタムサイトを構築する。

あなたの目標達成をサポートするエキスパートを見つけましょう。

ホーム

Wix Studio・パートナー・エンタープライズ

Wix Studio

Wix Studio エディタの使用

Wix Studio エディタでのエフェクトとアニメーション

Wix Studio エディタ：カスタムクリックまたはホバー操作を作成する

7分

「操作」を追加して、訪問者が要素をクリックまたはマウスオーバーした際のアニメーションを作成しましょう。操作はトリガーとなる同じ要素をアニメーション化することも、ページ上の別の要素をアニメーション化することもできます。

カスタム操作を使用すると、アニメーションをゼロからデザインすることができます。また、アニメーションのタイミングを制御して、より効果的にすることもできます。

Wix Studio アカデミーにアクセスして、その他の Wix Studio ウェビナー、チュートリアル、コースをご覧ください。

ステップ 1 | トリガー（クリックまたはホバー）を追加する

まず、操作をトリガーする要素を選択します。これは、訪問者がアニメーションを表示する前にマウスオーバーまたはクリックする要素です。次に、要素設定パネルに移動し、新しい操作を追加します。

ヒント：

要素に複数の操作を追加して、ホバーまたはクリックで異なるアニメーションをトリガーすることもできます。

トリガーを追加する方法：

操作をトリガーする要素を選択します。
エディタ右上の「要素設定パネルを開く」アイコンをクリックします。

Wix Studio エディタの「要素設定パネルを開く」アイコンのスクリーンショット。

「アニメーションとエフェクト」タブをクリックします。
「ホバー」または「クリック」を選択します。
「＋追加」をクリックします。

新しいホバーアニメーションを追加している、要素設定パネルの「アニメーションとエフェクト」タブ

ステップ 2 | 操作を設定する

アニメーション化する要素、表示するアニメーション、ホバーまたはクリック時のアクション（アニメーションの適用、オン / オフの切り替えなど）を選択できます。

操作を設定する方法：

（設定パネルで）「ホバー時」または「クリック時」下のドロップダウンからオプションを選択します：
- アニメーションを開始：要素をクリックまたはマウスオーバーすると、選択したアニメーションが開始されます。
- トグルのオン / オフ：トグルの有効と無効を切り替えるように、要素をクリックするとアニメーションが有効となり、もう一度クリックするとアニメーションが無効となります。
- アニメーションをリセット：要素をクリックまたはマウスオーバーすると、適用されていたアニメーションがリセットされます。
「アニメーション要素」下のドロップダウンからオプションを選択します：
- 選択した要素自体にアニメーションを適用する：要素名をクリックします（選択した要素名の横に「（同パーツ）」と表示されます）。
- ページ上の別の要素にアニメーションを適用する：ドロップダウンから要素を選択するか、「キャンバスで選択」をクリックしてページ上から選択します。
  ヒント：「Cmd」または「Ctrl」キーを押しながら子要素を選択します。
「カスタム」タブをクリックします。
「カスタムアニメーションを作成」をクリックします。