Wix Studio エディタ:ボタンを追加・カスタマイズする
読了時間:7分
ボタンは、訪問者にサイトへの参加を促すのに最適です。Wix Studio エディタでは、テキスト、アイコン、またはその両方を表示するボタンを追加できます。デザインとレイアウトを自由にコントロールして、思い通りのデザインを作成できます。
![Wix Studio エディタで作成できるボタンデザインの例](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/11/09/7d1e104a-89cd-4f37-b37a-0b7097b06f75/465ffaa7-1af5-4ae9-bc89-3f1093a03d0e.png)
この記事では、以下の項目について説明します:
ボタンを追加する
新しいボタンを追加する際は、2つのカテゴリーからデザインを選択できます:
- ベーシックボタン:テキストのみを表示する、ミニマルな見た目のボタンです。
- アドバンスボタン:テキストとアイコンの両方を表示し、高度なカスタマイズオプション(例:画像の背景、色のグラデーションなど)を追加できるボタンです。
ベーシックボタンとアドバンスボタンの詳細は下記をご確認ください:
ボタンを追加する方法:
- エディタ左側で「要素を追加」
をクリックします。
- 「ボタン」をクリックします。
- デザインをスクロールし、「ベーシックボタン」または「アドバンスボタン」をページにドラッグします。
アイディアが必要な場合:
ボタンのチュートリアルをご覧ください:
ベーシックボタンをカスタマイズする
ベーシックボタンを追加したら、テキストを変更し、リンク先を選択します。設定が完了したら、別の塗りつぶし色を選択、影を追加、または間隔やテキストの書式などの他の設定を調整するなど、デザインのカスタマイズを開始できます。
ベーシックボタンをカスタマイズする方法:
- 該当するボタンを選択します。
- カスタマイズする内容を選択します:
テキストを変更する
ボタンをリンクする
ボタンをデザインする
![要素設定パネルのデザインオプションが表示されたベーシックボタンのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/15/3993e80b-6f31-42c4-ac50-1523d09db950/70ff0862-166c-41d4-9c82-c3a6b29a2f27.png)
アドバンスボタンをカスタマイズする
アドバンスボタンにはたくさんのカスタマイズオプションが用意されており、細部までデザインすることができます。希望するアクションに合わせてテキストとアイコンを変更したり、それらの配置方法を選択したり、背景にグラデーションや画像を設定したりできます。
アドバンスボタンをカスタマイズする方法:
- 該当するボタンを選択します。
- カスタマイズする内容を選択します:
テキストまたはアイコンを変更する
ボタンをリンクする
ボタンをデザインする
ボタンのレイアウトを調整する
![要素設定パネルのデザインオプションが表示されたボタンのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/15/20e6e309-14f2-46b6-af30-7b04f3217b40/9c371902-57b6-4387-ab32-b0d531d700b0.png)
お役に立ちましたか?
|