header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

Wix Studio エディタ:ボタンを追加・カスタマイズする

8分
ボタンは、訪問者にサイトへの参加を促すのに最適です。Wix Studio エディタでは、テキスト、アイコン、またはその両方を表示するボタンを追加できます。デザインとレイアウトを自由にコントロールして、思い通りのデザインを作成できます。
Wix Studio エディタで作成できるボタンデザインの例

ボタンを追加する

新しいボタンを追加する際は、2つのカテゴリーからデザインを選択できます:
  • ベーシックボタン:テキストのみを表示する、ミニマルな見た目のボタンです。
  • アドバンスボタン:テキストとアイコンの両方を表示し、高度なカスタマイズオプション(例:画像の背景、色のグラデーションなど)を追加できるボタンです。

ボタンを追加する方法:

  1. エディタ左側で「要素を追加 をクリックします。
  2. ボタン」をクリックします。
  3. デザインをスクロールし、「ベーシックボタン」または「アドバンスボタン」をページにドラッグします。
アイディアが必要な場合:
ボタンのチュートリアルをご覧ください:

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

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

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

  1. エディタでボタンを選択します。
  2. カスタマイズする内容を選択します:
要素設定パネルのデザインオプションが表示されたエディタのベーシックボタン

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

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

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

  1. 該当するボタンを選択します。
  2. カスタマイズする内容を選択します:
Wix Studio エディタで作成できるボタンデザインの例
要素設定パネルのデザインオプションが表示されたエディタのベーシックボタン