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

CMS:ボタンをデータセットに接続する

6分
ボタン要素をデータセットに接続し、ボタンがクリックされた際の動作を定義します。これにより、たとえば訪問者がボタンをクリックした際に、入力要素の内容がコレクションに「送信」されるようにしたり、動的アイテムページやコレクション内のドキュメントが表示されるようにすることができます。また、ボタンのラベルをコレクションのフィールドに接続して、ボタンに動的テキストを表示させることもできます。
データセットを使用してボタンをクリックした際に指定できる動作は、データセットモードの設定や、通常のデータセットに接続するか動的ページのデータセットに接続するかによって異なります。データセットを使用してボタンをクリックした際に指定できる動作についてはこちら

ボタンをデータセットに接続する

ボタンをデータセットに接続すると、「クリック時の動作を選択」ドロップダウンに利用可能なすべての接続タイプが表示されます。データセットは、ページ上の要素を CMS コレクションのコンテンツにバインドするものです。
Wix エディタ
Wix Studio エディタ
  1. エディタで該当するページにアクセスします
  2. CMS に接続したいボタンをクリックします。ボタンを追加する方法はこちら
  3. CMS に接続」アイコン  をクリックします。
  4. データセットを選択」ドロップダウンをクリックし、コレクションに接続する既存のデータセットを選択します。または、「新しいデータセットを作成」をクリックし、接続するコレクションを選択し、データセットに名前を付けて「作成」をクリックすることもできます。
  5. クリック時の動作を選択」ドロップダウンをクリックし、該当するオプションを選択します:
ボタンを動的アイテムページに接続しているスクリーンショット。
  1. (オプション)ボタンに、接続先のコレクションアイテムに応じて変化する動的テキストを表示します。「ラベルの接続先」ドロップダウンをクリックし、該当するコレクションのフィールドを選択します。
    ヒント:ボタンをクリックして「テキストを編集」をクリックし、静的テキストを使用することもできます。
ボタンラベルをコレクションのフィールドに接続しているスクリーンショット。
  1. (オプション)「色」フィールドをボタンに接続します:
    1. 右側の「ボタンを接続」パネルで、「」までスクロールダウンします。
    2. 通常時」、「ホバー時」、「無効」タブから、接続するボタンの状態をクリックして選択します。
    3. 該当するドロップダウンをクリックし、接続する「色」フィールドを選択します:
      • 文字色の接続先:「色」フィールドを、ボタンのテキストの色に接続します。
      • アイコン色の接続先:「色」フィールドを、ボタンのアイコンの色に接続します(ボタンにアイコンがある場合)。
      • 枠線の色の接続先:「色」フィールドを、ボタンの枠線の色に接続します。
      • 背景色の接続先:「色」フィールドを、ボタンの背景色に接続します。
    4. 「色」のコレクションフィールドに接続するボタンの状態ごとに、この手順を繰り返します。
Wix エディタで、ボタン要素のさまざまな部分に「色」フィールドを接続するオプションが表示されている様子を示したスクリーンショット。
  1. プレビュー」をクリックし、接続をテストします。
  2. 変更内容を公開する準備ができたら、「公開」をクリックします。

よくある質問

CMS でのボタンのリンクに関するよくある質問とその回答については、以下をクリックしてください。
ボタンを動的アイテムページに接続しているスクリーンショット。
ボタンラベルをコレクションのフィールドに接続しているスクリーンショット。
Wix エディタで、ボタン要素のさまざまな部分に「色」フィールドを接続するオプションが表示されている様子を示したスクリーンショット。