Wix エディタ：ボタンのデザインをカスタマイズする | サポートセンター

Wix エディタ：ボタンのデザインをカスタマイズする

読了時間：9分

サイトに合った美しいボタンを作成し、訪問者に注目してもらいましょう。

ボタン上の「デザインを変更」アイコン

をクリックすると、カスタマイズを開始することができます。

この記事では、次の項目について説明します：

ボタンの状態をカスタマイズする

サイトの各ボタンの状態は個別にカスタマイズできます。これにより、訪問者がサイトを閲覧した際に表示される特別なボタン効果を作成することができます。

たとえば、通常時に 1つの色を選択し、ホバー時に別の色を選択し、クリック時にまた別の色を選択します。こうすることで、訪問者はボタンで行っているアクションが区別しやすくなります。

こちらをクリックして手順を確認しましょう

重要：

アイコンボタンのホバー（タップ）効果は、現在 iOS ではサポートされていません。そのため、iOS デバイスでサイトを閲覧している訪問者には、ボタンをタップしてもホバー状態は表示されません。

ボタンをデザインする

利用できるカスタマイズオプションはさまざまです。ボタンの種類に応じて、背景、テキスト、アイコンの調整が可能で、色、塗りつぶし、角、影などを選択することができます。

実行する内容を選択します：

テキスト・アイコンボタンをカスタマイズする

アイコンボタンをカスタマイズする

画像ボタンをカスタマイズする

その他の種類のボタンのカスタマイズについては以下をご覧ください：

デザイン用語集

ボタンのデザインオプション

オプション	説明	使用方法
背景の塗りつぶし	色、画像、パターン、グラデーションなどのさまざまな塗りつぶしを追加して、ボタンに魅力的でカラフルな効果を作ります。	各レイヤーのカラーボックスをクリックし、塗りつぶしタイプを選択し、スライダーをドラッグして塗りつぶしレイヤーの不透明度を変更します。塗りつぶしレイヤーをリストで上下にドラッグして並べ替えます。
枠線	ボタンの枠線を際立たせるようにカスタマイズします。ロックとロック解除のアイコンをクリックして、ボタンのすべての側面を一緒に、または個別にカスタマイズします。	「幅」をクリックしてピクセル幅を入力するか、スライダーを調整します。「スタイル」ドロップダウンをクリックして、枠線のスタイルを選択します。「塗りつぶし」のカラーボックスをクリックして枠線の色を選択し、スライダーを使用して不透明度を調整します。
角	ボタンの角を変更して、丸みを帯びたボタンにしたり四角いボタンにしたりできます。すべての角のサイズを一緒に変更するか、ロックとロック解除のアイコンをクリックして、各角を個別にカスタマイズします。	角のピクセル欄をクリックして、適用するピクセル数を入力します。
影	ボタンに影のレイヤーを追加して、色やサイズなどをカスタマイズします。	各影レイヤーのカラーボックスをクリックし、色、タイプ、角度、サイズ、距離、ぼかしをカスタマイズします。次に、スライダーをドラッグして影の不透明度を変更します。影レイヤーをリストで上下にドラッグして並べ替えます。アップロードボタンを使用する場合：トグルをクリックして影を有効にします。スライダーを使用して、角度、距離、サイズ、ぼかしを編集します。次に、スライダーとカラーボックスを使用して不透明度と色を編集します。
レイアウト	ボタンのレイアウトを変更します。	「表示スタイルを選択」ドロップダウンをクリックして、テキスト、アイコン、またはその両方を表示するか選択します。テキストやアイコンの配置、位置、間隔を選択します（該当する場合）。テキストやアイコンの周りの余白を設定します。

テキストの書式設定オプション

オプション	説明	使用方法
テキストを表示	ボタンのテキストを表示または非表示にします。	トグルをクリックして、ボタンのテキストを表示または非表示にします。
スタイル	ボタンテキストのスタイルを選択します。	ドロップダウンメニューからテキストのスタイルを選択します。
フォント	ボタンテキストのフォントを選択します。	ドロップダウンメニューをクリックして、フォントを選択します。
フォントサイズ	ボタンのテキストサイズを変更します。	スライダーをドラッグしてフォントサイズを調整するか、値を入力します。
テキストの書式設定	テキストに書式を適用します。	太字、斜体、下線、取り消し線、色、大文字、テキストの方向、配置など、オプションを使用してテキストの書式を設定します。
文字間隔	文字間隔を変更します。	スライダーをドラッグして間隔を調整するか、値を入力します。
影	テキストに影を作ります。影は複数設定することができます。	「影を追加する」をクリックして、新しい影を追加します。「影を編集する」アイコンをクリックしてデザインします。

アイコンのデザインオプション

オプション	説明	使用方法
アイコンを表示	ボタンのアイコンを表示または非表示にします。	トグルをクリックして、ボタンのアイコンを表示または非表示にします。
サイズ	アイコンのサイズを変更します。	スライダーをドラッグしてアイコンのサイズを調整するか、値を入力します。
色	アイコンの色を変更します。	カラーボックスをクリックして、色を選択します。
回転	アイコンの回転度合を調整します。	ハンドルをドラッグしてアイコンの回転度合をカスタマイズするか、テキストボックスに角度を入力します。

お役に立ちましたか？

この記事では下記を説明します：

ボタンの状態をカスタマイズする
ボタンをデザインする
デザイン用語集
ボタンのデザインオプション
テキストの書式設定オプション
アイコンのデザインオプション