Wix エディタ:テキスト・アイコンボタンをカスタマイズする
読了時間:3分
テキストボタンにはサイト訪問者への行動喚起(CTA)が含まれるため、サイトとのやりとりや行動を促します。
この記事では、下記の項目について説明します:
テキストボタンを使用している場合:
Wix サイトに既にあるテキストボタンはカスタマイズできますが、旧テキストボタンをサイトに追加することはできません。追加パネルのテキスト・アイコンボタン下にある新しいテキストボタンを使用されることをおすすめします。
ボタンテキストを変更する
ボタンテキストを入力して、訪問者にサイトとのやりとりを促します。フレーズの例としては「お問い合わせ」、「続きを読む」、「今すぐ購入」などがあります。
ボタンテキストを変更する方法:
- エディタ内でボタンをクリックします。
- 「テキスト・アイコンの変更」をクリックします。
- 「表示するテキスト」下にテキストを入力します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/02/01/cacef7f7-25e5-4846-b96d-d615a394ef3a/84b757ca-5915-4ad7-af69-7287922381cd.png)
ボタンをデザインする
サイトの外観に合うように、ボタンデザインをカスタマイズします。各状態ごとにデザインを調整します:
- 通常時:ボタンが操作される前のボタンの表示方法。
- ホバー:マウスオーバーした際のボタンの表示方法。
ボタンをデザインする方法:
- エディタ内でボタンをクリックします。
- 「デザインを変更」アイコン をクリックします。
- 「デザインをカスタマイズ」をクリックします。
- ボタンの状態を選択します。
- 下記のデザインオプションを使用してボタンをカスタマイズします:
- 塗りつぶし:背景色を選択し、不透明度を調整します。
- 枠線:枠線の色、不透明度、幅を調整します。
- 角:ボックスを使用して、ボタンの角のピクセルサイズを調整します。
- 影:ボタンに影を追加してカスタマイズします。
- レイアウト:ボタンのレイアウトと配置を編集します。
- テキスト:テキストのスタイル、色、フォント、サイズ、および書式を調整します。
- アイコン:テキストにアイコンを表示し、設定を調整します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/02/01/5dab9949-8c6a-48a6-b124-29d273425a34/fdb5a795-3d99-48d6-943b-fd838d082ca3.png)
ボタンのレイアウトを調整する
ボタンのテキストやアイコンの位置、配置、間隔を変更します。ボタンに全文を表示するのに十分なスペースがない場合の動作を決定することもできます。
ボタンのレイアウトを調整する方法:
- エディタ内でボタンをクリックします。
- 「レイアウト」アイコン をクリックします。
- 下記の設定を調整します:
- ボタンは何を表示しますか?:ボタンに表示する内容を選択します:テキスト・アイコン、テキストのみ、アイコンのみ、何も表示しない。
- テキスト・アイコンの位置:テキストとアイコンの両方を表示する場合、テキストとアイコンの両方を表示する方法(横に並べるか、上下に並べるか)を選択できます。
- テキストボックスとアイコンの間隔:テキストとアイコンの両方を表示する場合、スライダーをドラッグして、それらの間の間隔(px 単位)を設定できます。
- 配置:テキストとアイコンをボタンの左、中央、または右に配置します。均等割付 をクリックして、ボタンの両方の余白に揃えることもできます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/02/01/0197c4c8-e4ce-4bd4-a87b-38f97efec458/2eb90bb3-6b5b-4ff5-8610-0bc02d98793c.png)