Wix エディタ：アイコンボタンを追加・設定する
読了時間：6分
アイコンボタンは、訪問者がサイト内を移動するのに役立つ視覚的な方法です。アイコンボタンの動作が分かるように、マウスオーバー時に表示されるツールチップを追加できます。
アイコンボタンにリンクを設定し、通常時やマウスオーバーした際に表示させる各アイコンの状態をカスタマイズしてみましょう。
ボタンの状態について
ステップ 1 | アイコンボタンを追加する
まずは、「追加」パネルからアイコンボタンを選択し、ページにドラッグします。アクションや希望する外観に応じて、豊富なデザインから選択することができます。
サイトにアイコンボタンを追加する方法：
- エディタ左側で「追加」
をクリックします。 - 「ボタン」をクリックします。
- 「アイコンボタン」をクリックします。
- ボタンをクリックまたはドラッグして、ページに追加します。
ステップ 2 | アイコンボタンのテキストとアイコンを設定する
ボタンに表示させる内容を設定します。アイコン、テキスト、またはその両方を表示させることができます。
ボタンに表示させるテキストとアイコンには明確な CTA （行動喚起）を含めるようにし、そのボタンが訪問者に何を促しているのか分かりやすくしておくと良いでしょう。
ボタンのテキストとアイコンを設定する方法：
- アイコンボタンをクリックします。
- 「テキスト・アイコンの変更」をクリックします。
- 「ボタンは何を表示しますか？」をクリックして、ドロップダウンからオプションを選択します：
- テキストとアイコン：ボタンにテキストとアイコンの両方を表示させます。以下のオプションを設定します：
- 表示するテキスト：ボタンに表示させるテキストを入力します。
- アイコンを選択：「アイコン画像を変更」アイコン
をクリックして、ボタンの新しいアイコンを選択します。Wix が提供する無料の素材から選択するか、独自の素材をアップロードすることができます。
- アイコンのみ：ボタンにアイコンのみを表示させます。以下のオプションを設定します：
- アイコンを選択：「アイコン画像を変更」アイコン
- 代替テキスト：アイコンの代替テキストの詳細を入力します。
- アイコンを選択：「アイコン画像を変更」アイコン
- テキストのみ：ボタンにテキストのみを表示させます。「表示するテキスト」の下に、ボタンに表示させるテキストを入力します。
- 何も表示しない：テキストやアイコンを表示させないボタンを作成します。「代替テキスト」の下に、ボタンの代替テキストの詳細を入力します。
- テキストとアイコン：ボタンにテキストとアイコンの両方を表示させます。以下のオプションを設定します：
ステップ 3 | アイコンボタンにリンクを追加する
アイコンボタンにリンクを追加して、サイト訪問者を関連する場所に誘導します。サイトのページ、外部サイト、文書ファイル、メールアドレスなど、さまざまな場所にリンクできます。
ボタンにリンクを追加する方法：
- アイコンボタンを選択します。
- 「リンク」アイコン
をクリックします。 - 左側でリンクタイプを選択します。
- 選択したリンクタイプに応じて、関連する情報を追加します。
- 「完了」をクリックします。
ヒント：
追加できるリンクの種類についてはこちらをご覧ください。
ステップ 4 | アイコンボタンをカスタマイズする
アイコンボタンにリンクを追加したら、必要に応じてボタンをカスタマイズします。背景の塗りつぶしを選択したり、テキストをデザインしたりと、さまざまな変更を加えることができます。
アイコンボタンをカスタマイズする方法：
- ボタンを選択します。
- 「デザインを変更」アイコン
をクリックします。 - 別のプリセットデザインを選択するか、「デザインをカスタマイズ」をクリックして既存のデザインを調整します。
- 「デザインをカスタマイズ」下で、ドロップダウンメニューからボタンの状態を選択します。
- 通常時：ボタンが操作される前のボタンの表示方法。
- ホバー：マウスオーバーした際のボタンの表示方法。
5. いずれかのタブをクリックしてデザインをカスタマイズします：
- 背景の塗りつぶし
：ボタンの塗りつぶしをカスタマイズします。
- テキスト
：ボタンテキストのデザインを調整します。
- 枠線
：枠線の太さとデザインを編集します。
- 角
：ボタンの角の丸みを調整します。
- 影
：ボタンに影の効果を追加してカスタマイズします。
- レイアウト
：ボタンに表示する内容を選択し、配置を調整します。
- アイコン
：ボタン上のアイコンの外観を編集します。
