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

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

6分
この記事内
  • ボタンを追加する
  • ボタンを設定する
  • ボタンをカスタマイズする
ボタンは、訪問者にサイトへの参加を促すのに最適です。Wix Studio エディタでは、テキスト、アイコン、またはその両方を表示するボタンを追加できます。デザインとレイアウトを完全に制御して、思い通りのデザインを作成できます。
Wix Studio エディタで作成できるボタンデザインの例
重要:
この記事では、Wix Studio エディタの新しいボタン要素について説明します。以前のボタン要素を追加・操作する方法は、こちらをご覧ください。

ボタンを追加する

アドバンスボタン(静的ボタン)、またはアニメーションボタンを追加するかを選択します。すべてに同じデザインオプションがあり、ボタンは「アドバンス」ボタンから「アニメーション」ボタン(またはその逆)に自由に切り替えることができます。

ボタンを追加する方法:

  1. エディタ左側で「要素を追加 をクリックします。
  2. ボタン」をクリックします。
  3. アドバンスボタン」または「アニメーションボタン」下にあるオプションをドラッグして、ページに追加します。
「要素を追加」パネルで「ボタン」タブが開き、カーソルがボタンを選択しています。
アイディアが必要な場合:
ボタンのチュートリアルをご覧ください:

ボタンを設定する

ボタンを追加したら、アクションを設定して、表示する内容(テキスト、アイコン、またはその両方)を選択します。ボタンに表示する内容に応じて、テキストとアイコンを設定することもできます。

ボタンを設定する方法:

  1. エディタでボタンを選択します。
  2. 設定」をクリックします。
  3. オプションを使用してボタンを設定します:
    • 表示する内容を選択:オプションを選択し、設定を変更します:
      • テキストとアイコン:「テキスト」下で表示する内容を変更し、「変更」アイコン  をクリックして別のアイコンを選択します。
      • テキストのみ:「テキスト」下でボタンテキストを編集します。
      • アイコンのみ:「変更」アイコン  をクリックし、ボタンに別のアイコンを選択します。
    • リンク先:項目をクリックし、パネルからリンクを設定します:
      1. 左側でリンクの種類を選択します。
      2. リンク情報を追加します。
      3. 完了」をクリックします。
    • アクセシブル名:支援技術を使用して、訪問者にボタンの機能を説明します。
ボタンの設定パネルに、オプションが表示されている様子を示したスクリーンショット。カーソルがリンクを設定する項目をクリックしています。
注意:
表示する内容を選択」下で「何も表示しない」を選択した場合、ボタンは空白で表示されます。代替テキストを追加して、リンク先を選択することは可能です。

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

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

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

  1. 該当するボタンを選択します。
  2. カスタマイズするものを選択します:
要素設定パネルでボタンを選択している様子を示したスクリーンショット。カーソルがボタンアイコンのサイズを調整しています。

Helpmate

こんにちは、さん

さらにヘルプが必要ですか?
この記事の概要
Unlock personalized helpLog in to get the most out of Helpmate.