CMS:スライダー入力要素を追加・設定する

読了時間:6分
サイトページにスライダー入力要素を追加して、訪問者が選択した数値の範囲をコレクションに送信できるようにします。
エディタに表示されたスライダーのスクリーンショット
始める前に:

ステップ 1 | スライダーを追加・設定する

ページにスライダー入力要素を追加して、設定、レイアウト、デザインをカスタマイズします。
Wix エディタ
Wix Studio エディタ
  1. エディタ左側で「パーツを追加 をクリックします。
  2. 入力欄」をクリックします。
  3. スライダー」をクリックします。
  4. 選択したスライダーパーツをクリックしてページにドラッグします。
  5. スライダーパーツ上で「設定」をクリックします。
  6. 上部の「項目タイトル」を入力します。
  7. スライダータイプ」を選択します:
    • 目盛りなし:サイト訪問者は定義された範囲内で任意の値を選択できます。
    • 目盛あり:サイト訪問者は定義された範囲内で特定の値を選択できます。「目盛りに使用する数値」下でオプションを選択します:
      • :スライダーに表示する目盛りの間隔を入力します。ここに入力した数は、以下で設定する「値の範囲」の最大値を割る間隔数として使用されます。
      • 数値:スライダーに表示する目盛りの数を入力します。
  8. 値の範囲」下で、スライダーの最小値、最大値、およびデフォルト値を入力します。
  9. (オプション)訪問者が選択した数値の範囲がコレクションのコンテンツに書き込まれないようにするには、「読み取り専用」チェックボックスを選択します。これは、スライダー入力要素をデータを送信する目的ではなく、コンテンツを表示する目的で使用する場合に便利です。
  10. レイアウト」アイコン をクリックし、「ハンドルの形」、「ハンドルのサイズ(px)」、「トラックの幅(ハンドルに対して~%)」、「ハンドルの配置」、および「目盛り」と「値のラベル」セクションを設定します。
  11. デザイン」アイコン をクリックし、別のプリセットデザインを選択します。「デザインをカスタマイズ」をクリックすると、デザインをさらに細かくカスタマイズすることができます。

ステップ 2 | スライダーを CMS に接続する

スライダー入力要素を、データセットを介して入力内容が保存されるコレクションに接続します。スライダー入力要素は、コレクションの既存の数値フィールドに接続することも、新しく数値フィールドを作成してそちらに接続することもできます。
Wix エディタ
Wix Studio エディタ
  1. エディタでスライダーをクリックします。
  2. CMS に接続」アイコン  をクリックします。
  3. データセットを選択」ドロップダウンをクリックし、コレクションに接続する既存のデータセットを選択します。または、「新しいデータセットを作成」をクリックし、接続するコレクションを選択し、データセットに名前を付けて「作成」をクリックすることもできます。
  4. 選択した Value を接続」ドロップダウンをクリックし、入力内容を保存する数値フィールドを選択します。
    ヒント:「新しいフィールドを追加」を選択し、入力内容を保存する新しいコレクションフィールドを追加することもできます。
  5. データセットモードとコレクションの権限を設定します:
    1. データセット設定」をクリックします。
    2. データセットモード」ドロップダウンをクリックし、「書き込み」または「読み取り&書き込み」を選択します。
    3. (必要に応じて)「コレクションの権限」横の権限タイプをクリックし、最初のドロップダウンで「フォームの回答」を選択します。その他のドロップダウンをクリックして、権限を絞り込むことができます。権限の設定が完了したら、「保存する」をクリックします。
  6. 訪問者がクリックして入力した内容を送信できるよう、「送信」ボタンを作成・設定します。

お役に立ちましたか?

|