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

CMS：レンジスライダーを追加・設定する

4分
訪問者がスライダーをドラッグして値の範囲を選択し、サイトに表示されるアイテムをフィルターできるようにします。たとえば、ネットショップを運営している場合、レンジスライダーを使用して顧客が価格で商品をフィルターし、予算内で商品を見つけやすくすることができます。

レンジスライダーを追加したら、訪問者がフィルターに使用できるリピーターまたはギャラリーに接続するデータセットに接続します。次に、フィルターと条件に使用する数値フィールドタイプを選択します。条件は、フィールド値が選択した範囲内または範囲外であるアイテムを表示するかを決定します。最後に、項目タイトルとスライダー要素のレイアウトとデザインをカスタマイズします。
 
データセットに適用するフィルターまたは並び替えは、接続されている要素にも適用されます。つまり、データセットにフィルターを追加してアイテムが表示されないようにしたり、並び替えを追加してアイテムの表示順序を制御することができます。
「価格帯は？」というタイトルのレンジスライダー要素を示すスクリーンショット。
重要：
Wix Studio エディタではレンジスライダーはご利用いただけません。
始める前に：

レンジスライダーを追加・設定する方法：

  1. エディタにアクセスします。
  2. レンジスライダー入力要素を追加します：
    1. 訪問者が数値でコンテンツをフィルターできるようにしたいページまたはセクションに移動します。
    2. エディタ左側で「パーツを追加」 をクリックします。
    3. 「入力欄」をクリックします。
    4. 「スライダー」をクリックします。
    5. 「レンジスライダー」までスクロールダウンし、該当するレンジスライダーをクリックしてページにドラッグします。
Wix エディタでレンジスライダーを追加しているスクリーンショット。
  1. レンジスライダーを CMS に接続します：
    1. レンジスライダー上の「CMS に接続」アイコン  をクリックします。
    2. 右側の「レンジスライダーを接続」パネルで「コンテンツをフィルター」を選択します。
    3. 「データセットを選択」ドロップダウンをクリックし、訪問者がフィルターできるようにしたい要素（例：リピーター、ギャラリー、テーブル）に接続されているものと同じデータセットを選択します。
    4. 「コンテンツのフィルター」ドロップダウンをクリックし、訪問者がコンテンツをフィルターするために使用する番号（数値）フィールドを選択します。
      ヒント：コレクションに新しいフィールドを追加してコンテンツのフィルターに使用するには、ドロップダウン下部の「新しいフィールドを追加」をクリックし、フィールド名を入力して「追加」をクリックします。なお、CMS コレクションのフィールドには、後でコンテンツを追加することができます。
    5. 「条件」ドロップダウンをクリックし、該当する条件を選択します：
      • 範囲：レンジライダーハンドルの範囲内に、接続された数値フィールド値を持つアイテムを表示します。
      • 範囲外：レンジスライダーハンドルの範囲外に、接続された数値フィールド値を持つアイテムを表示します。
レンジスライダーをデータセットおよびコレクションフィールドに接続しているスクリーンショット。
  1. レンジスライダー要素をカスタマイズします：
    • 「設定」をクリックして、以下をカスタマイズします：
      • 項目タイトル：レンジスライダーに表示して、訪問者に内容を知らせる名前を編集します。
      • スライダータイプ：スライダータイプを「目盛りなし」または「目盛りあり」から選択します：
        • 目盛りなし：訪問者は設定された範囲内で任意の値を選択できます。
        • 目盛あり：訪問者は設定された範囲内で特定の増分値を選択できます。以下のオプションを設定します：
          • 目盛りに使用する数値：ドロップダウンをクリックし、目盛りの設定方法を選択します：
            • 目盛りの数：レンジスライダーに表示する目盛りの数を選択します。「目盛りの数」の項目に目盛りの数を入力します。
            • 目盛りの間隔：各目盛りの値の増分を、最大 100で設定します。「目盛りの間隔」の項目に増分の値を入力します。
          • 値のラベル：（オプション）「接頭辞」欄に接頭辞を入力して、値の前に表示されるようにします（例：￥）。「接尾辞」欄に接尾辞を入力して、値の後に表示されるようにすることもできます。
    • 「レイアウト」アイコン  をクリックして、以下を調整します：
      • レンジスライダーハンドルのサイズと形。
      • ハンドルがスライドするトラックの高さ（太さ）。
      • レンジの表示順を「左から右」または「右から左」から選択します。
      • 項目タイトルの配置、オフセット、スペースを調整します。
      • （目盛りのみ）レイアウトを「ライン」または「ドット」から選択します。
    • 「デザイン」アイコン をクリックし、その他のプリセットのデザインを選択するか、デザインをさらにカスタマイズします。
レンジスライダー設定を調整しているスクリーンショット。
  1. 「プレビュー」をクリックし、レンジスライダーの動作をテストします。
  2. 変更内容を公開する準備ができたら、「公開」をクリックします。

お役に立ちましたか？

|

お役に立ちましたか？

|
「価格帯は？」というタイトルのレンジスライダー要素を示すスクリーンショット。
Wix エディタでレンジスライダーを追加しているスクリーンショット。
レンジスライダーをデータセットおよびコレクションフィールドに接続しているスクリーンショット。
レンジスライダー設定を調整しているスクリーンショット。