Wix Studio エディタ:アドバンスボタンを追加・カスタマイズする
6分
この記事内
- ボタンを追加する
- ボタンを設定する
- ボタンをカスタマイズする
ボタンは、訪問者にサイトへの参加を促すのに最適です。Wix Studio エディタでは、テキスト、アイコン、またはその両方を表示するボタンを追加できます。デザインとレイアウトを完全に制御して、思い通りのデザインを作成できます。

重要:
この記事では、Wix Studio エディタの新しいボタン要素について説明します。以前のボタン要素を追加・操作する方法は、こちらをご覧ください。
どのボタンを使用しているか確認するにはどうすればよいですか?
ボタンを追加する
アドバンスボタン(静的ボタン)、またはアニメーションボタンを追加するかを選択します。すべてに同じデザインオプションがあり、ボタンは「アドバンス」ボタンから「アニメーション」ボタン(またはその逆)に自由に切り替えることができます。
ボタンを追加する方法:
- エディタ左側で「要素を追加」
をクリックします。 - 「ボタン」をクリックします。
- 「アドバンスボタン」または「アニメーションボタン」下にあるオプションをドラッグして、ページに追加します。

アイディアが必要な場合:
ボタンのチュートリアルをご覧ください:
ボタンを設定する
ボタンを追加したら、アクションを設定して、表示する内容(テキスト、アイコン、またはその両方)を選択します。ボタンに表示する内容に応じて、テキストとアイコンを設定することもできます。
ボタンを設定する方法:
- エディタでボタンを選択します。
- 「設定」をクリックします。
- オプションを使用してボタンを設定します:
- 表示する内容を選択:オプションを選択し、設定を変更します:
- テキストとアイコン:「テキスト」下で表示する内容を変更し、「変更」アイコン
をクリックして別のアイコンを選択します。 - テキストのみ:「テキスト」下でボタンテキストを編集します。
- アイコンのみ:「変更」アイコン
をクリックし、ボタンに別のアイコンを選択します。
- テキストとアイコン:「テキスト」下で表示する内容を変更し、「変更」アイコン
- リンク先:項目をクリックし、パネルからリンクを設定します:
- 左側でリンクの種類を選択します。
- リンク情報を追加します。
- 「完了」をクリックします。
- アクセシブル名:支援技術を使用して、訪問者にボタンの機能を説明します。
- 表示する内容を選択:オプションを選択し、設定を変更します:

注意:
「表示する内容を選択」下で「何も表示しない」を選択した場合、ボタンは空白で表示されます。代替テキストを追加して、リンク先を選択することは可能です。
ボタンをカスタマイズする
アドバンスボタンにはたくさんのカスタマイズオプションが用意されており、細部までデザインすることができます。希望するアクションに合わせてテキストとアイコンを変更したり、それらの配置方法を選択したり、背景にグラデーションや画像を設定したりできます。
アドバンスボタンをカスタマイズする方法:
- 該当するボタンを選択します。
- カスタマイズするものを選択します:
アイコンにアニメーションを追加する
ボタンをデザインする
ボタンのレイアウトを調整する





をクリックします。
をクリックします。
を選択して、ボタンの両方の余白に揃えることもできます。