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

Wix エディタ:テキスト・アイコンボタンをカスタマイズする

3分
テキスト・アイコンボタンをパーソナライズして、希望通りの見た目にします。必要に応じてボタンテキストを更新し、ボタンの外観をデザインしてレイアウトを調整します(例:配置や間隔など)。

ボタンテキストを変更する

ボタンテキストを入力して、訪問者にサイトとのやりとりを促します。フレーズの例としては「お問い合わせ」、「続きを読む」、「今すぐ購入」などがあります。

ボタンテキストを変更する方法:

  1. エディタに移動します
  2. ページ上でボタンをクリックします。
  3. 設定」をクリックします。
  4. (オプション)「表示する内容を選択」ドロップダウンをクリックし、「テキストとアイコン」、「アイコンのみ」、「テキストのみ」、「何も表示しない」からオプションを選択します。
  5. テキスト」下でボタンに表示されるテキストを編集します。
Wix エディタのボタン設定パネル。
また、「レイアウト」パネルからボタンに表示する内容(テキスト、アイコン、またはその両方)を選択することもできます。

ボタンをデザインする

サイトの外観に合うように、ボタンデザインをカスタマイズします。各状態ごとにデザインを調整します:
  • 通常時:ボタンが操作される前のボタンの表示方法。
  • ホバー:マウスオーバーした際のボタンの表示方法。

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

  1. エディタに移動します
  2. ページ上でボタンをクリックします。
  3. デザイン」アイコン  をクリックします。
  4. デザインをカスタマイズ」をクリックします。
  5. ボタンの状態を選択します。
  6. ニーズに合わせてデザインを調整します:
    • 塗りつぶし:背景色を選択し、不透明度を調整します。
    • テキスト:テキストのスタイル、色、フォント、サイズ、および書式を調整します。
    • 枠線:枠線の色、不透明度、幅を調整します。
    • :ボックスを使用して、ボタンの角のピクセルサイズを調整します。
    • :ボタンに影を追加してカスタマイズします。
    • レイアウト:ボタンのレイアウトと配置を編集します。
    • アイコン:テキストにアイコンを表示し、設定を調整します。
Wix エディタのボタンデザインパネル

ボタンのレイアウトを調整する

ボタンのテキストやアイコンの位置、配置、間隔を変更します。ボタンに全文を表示するのに十分なスペースがない場合の動作を決定することもできます。

ボタンのレイアウトを調整する方法:

  1. エディタに移動します
  2. ページ上でボタンをクリックします。
  3. レイアウト」アイコン  をクリックします。
  4. 下記の設定を調整します:
    • 表示する内容を選択:ボタンに表示する内容を「テキスト・アイコン」、「テキストのみ」、「アイコンのみ」、「何も表示しない」から選択します。
    • テキスト・アイコンの位置:テキストとアイコンの両方を表示する場合、テキストとアイコンの両方を表示する方法(横に並べるか、上下に並べるか)を選択できます。
    • テキストボックスとアイコンの間隔:テキストとアイコンの両方を表示する場合、スライダーをドラッグして、それらの間の間隔(px 単位)を設定できます。
    • 配置:テキストとアイコンをボタンの左、中央、または右に配置します。「均等割付 をクリックして、ボタンの両方の余白に揃えることもできます。
また、「設定」パネルからボタンに表示する内容(テキスト、アイコン、またはその両方)を選択することもできます。
Wix エディタのボタンレイアウトパネル。