Wix エディタ:ボタンのデザインをカスタマイズする
読了時間:9分
サイトに合った美しいボタンを作成し、訪問者に注目してもらいましょう。
ボタン上の「デザインを変更」アイコン
をクリックすると、カスタマイズを開始することができます。
![](https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/03/974c50b4-3472-4fd0-b0eb-bf70636220c6.png)
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/05/18/8e70e196-339e-4bb1-a77b-7cacaf1ee1de/9053455a-b443-4a9b-bc65-533234e42f51.png)
この記事では、次の項目について説明します:
ボタンの状態をカスタマイズする
サイトの各ボタンの状態は個別にカスタマイズできます。これにより、訪問者がサイトを閲覧した際に表示される特別なボタン効果を作成することができます。
たとえば、通常時に 1つの色を選択し、ホバー時に別の色を選択し、クリック時にまた別の色を選択します。こうすることで、訪問者はボタンで行っているアクションが区別しやすくなります。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2020/12/30/50787674-8802-4e2b-9775-f35ff3cccb77/620266e4-79d8-4ef3-a6fd-89e5bc9ef520.gif)
こちらをクリックして手順を確認しましょう
重要:
アイコンボタンのホバー(タップ)効果は、現在 iOS ではサポートされていません。そのため、iOS デバイスでサイトを閲覧している訪問者には、ボタンをタップしてもホバー状態は表示されません。
ボタンをデザインする
利用できるカスタマイズオプションはさまざまです。ボタンの種類に応じて、背景、テキスト、アイコンの調整が可能で、色、塗りつぶし、角、影などを選択することができます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2019/11/11/c519db0c-00b4-469f-bd3a-3516134613ec/be4320a1-2e29-473e-92fe-efce99076767.png)
実行する内容を選択します:
テキスト・アイコンボタンをカスタマイズする
アイコンボタンをカスタマイズする
画像ボタンをカスタマイズする
デザイン用語集
ボタンのデザインオプション
オプション | 説明 | 使用方法 |
---|---|---|
背景の塗りつぶし | 色、画像、パターン、グラデーションなどのさまざまな塗りつぶしを追加して、ボタンに魅力的でカラフルな効果を作ります。 |
|
枠線 | ボタンの枠線を際立たせるようにカスタマイズします。ロックとロック解除のアイコンをクリックして、ボタンのすべての側面を一緒に、または個別にカスタマイズします。 |
|
角 | ボタンの角を変更して、丸みを帯びたボタンにしたり四角いボタンにしたりできます。すべての角のサイズを一緒に変更するか、ロックとロック解除のアイコンをクリックして、各角を個別にカスタマイズします。 | 角のピクセル欄をクリックして、適用するピクセル数を入力します。 |
影 | ボタンに影のレイヤーを追加して、色やサイズなどをカスタマイズします。 |
アップロードボタンを使用する場合:
|
レイアウト | ボタンのレイアウトを変更します。 |
|
テキストの書式設定オプション
オプション | 説明 | 使用方法 |
---|---|---|
テキストを表示 | ボタンのテキストを表示または非表示にします。 | トグルをクリックして、ボタンのテキストを表示または非表示にします。 |
スタイル | ボタンテキストのスタイルを選択します。 | ドロップダウンメニューからテキストのスタイルを選択します。 |
フォント | ボタンテキストのフォントを選択します。 | ドロップダウンメニューをクリックして、フォントを選択します。 |
フォントサイズ | ボタンのテキストサイズを変更します。 | スライダーをドラッグしてフォントサイズを調整するか、値を入力します。 |
テキストの書式設定 | テキストに書式を適用します。 |
|
文字間隔 | 文字間隔を変更します。 | スライダーをドラッグして間隔を調整するか、値を入力します。 |
影 | テキストに影を作ります。影は複数設定することができます。 | 「影を追加する」をクリックして、新しい影を追加します。「影を編集する」アイコンをクリックしてデザインします。 |
アイコンのデザインオプション
オプション | 説明 | 使用方法 |
---|---|---|
アイコンを表示 | ボタンのアイコンを表示または非表示にします。 | トグルをクリックして、ボタンのアイコンを表示または非表示にします。 |
サイズ | アイコンのサイズを変更します。 | スライダーをドラッグしてアイコンのサイズを調整するか、値を入力します。 |
色 | アイコンの色を変更します。 | カラーボックスをクリックして、色を選択します。 |
回転 | アイコンの回転度合を調整します。 | ハンドルをドラッグしてアイコンの回転度合をカスタマイズするか、テキストボックスに角度を入力します。 |
お役に立ちましたか?
|