Editor X：ボタンを追加・カスタマイズする | サポートセンター

Editor X：ボタンを追加・カスタマイズする

読了時間：9分

Editor X は、代理店とフリーランサー向けの新しいプラットフォームである Wix Studio に移行します。Wix Studio について

ボタンは、訪問者に必要なアクションを実行するよう促すために最適です。Editor X では、必要に応じてテキスト、アイコン、またはその両方を表示するボタンを追加することができます。デザインとレイアウトを自由にコントロールして、思い通りのデザインを作成できます。

この記事では、ボタンの機能を最大限に活用する方法について説明します：

ボタンを追加する

新しいボタンを追加する際は、2つのカテゴリーからデザインを選択できます：

ベーシックボタン：テキストのみを表示する、ミニマルな見た目のボタンです。
アドバンスボタン：テキストとアイコンの両方を表示し、高度なカスタマイズオプション（例：画像の背景、色のグラデーションなど）を追加できるボタンです。

ボタンを追加する方法：

Editor X 左上の「追加」をクリックします。
「ボタン」をクリックします。
デザインをスクロールし、ベーシックボタンまたはアドバンスボタンをページにドラッグします。

ベーシックボタンとアドバンスボタンの詳細は下記をご確認ください：

ご不明な点などありませんか？

ボタンのチュートリアルをご覧ください：

ベーシックボタンをカスタマイズする

ベーシックボタンをサイトに追加したら、必要に応じてテキストを変更し、リンク先を選択します。設定が完了したら、別の塗りつぶし色を選択、影を追加、または間隔やテキストの書式などの他の設定を調整するなど、デザインのカスタマイズを開始できます。

ベーシックボタンをカスタマイズする方法は、以下をクリックしてご覧ください：

テキストを変更する

ボタンをリンクする

デザインを調整する

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

アドバンスボタンにはたくさんのカスタマイズオプションが用意されており、細部までデザインすることができます。希望するアクションに合わせてテキストとアイコンを変更したり、それらの配置方法を選択したり、背景にグラデーションや画像を設定したりできます。

アドバンスボタンをカスタマイズする方法は、以下をクリックしてご覧ください：

テキストまたはアイコンを変更する

ボタンをリンクする

デザインを調整する

アドバンスボタンのデザインは、「通常」、「ホバー」、「無効」の 3つのステートにカスタマイズすることができます。背景色、枠線、ボタンの角の形などの設定を変更します。

ボタンをデザインする方法：

ボタンを選択します。
Editor X 右上で「要素設定パネル」アイコンをクリックします。
（要素設定パネルで）「デザイン」タブをクリックします。
該当する状態を選択します：「通常時」、「ホバー」、「無効」
利用可能なオプションを使用してボタンをカスタマイズします：
- 背景の塗りつぶし：ボタンの背景の色、グラデーション、または画像を選択します。
- テキスト：ボタンテキストのフォント、書式、間隔を調整します。「影」をクリックしてテキストに影を追加することもできます。
- 枠線：枠線の色 / グラデーションを選択し、幅をピクセルで設定します。すべての側面に同じデザインを適用するか、「ロックを解除」アイコンをクリックして個別にカスタマイズできます。
- 角：ピクセル単位で半径を変更して、角を丸くしたり、四角くします。すべての角に同じ半径を設定するか、「ロックを解除」アイコンをクリックして個別にカスタマイズできます。
- 影：色、角度、距離、サイズなどを設定しながら、内側 / 外側の影、または複数の影を追加します。
- レイアウト：ボタンに表示するもの（テキスト、アイコン、または両方）と、それらの配置方法を選択します。
- アイコン：ボタンに表示されるアイコンの色、サイズ、角度を調整します。

ヒント：

不透明度の異なる複数のレイヤーを適用して、ボタンの背景に奥行き感を加えることができます。

デザイン用語集

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

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

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

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

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

お役に立ちましたか？

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

ボタンを追加する
ベーシックボタンをカスタマイズする
アドバンスボタンをカスタマイズする
デザイン用語集
テキストの書式設定オプション
アイコンのデザインオプション