Wix ヘルプセンター
    ホーム
  1. サイトの作成
  2. 高度な機能
  3. CMS
  4. CMS コレクションコンテンツをサイトに接続
    5. CMS：プロギャラリーにコレクションコンテンツを表示する

CMS：プロギャラリーにコレクションコンテンツを表示する

読了時間：14分
プロギャラリーを使用して、CMS（コンテンツ管理システム）コレクションの各アイテムの画像を動的に表示します。各アイテムに使用する画像フィールドを制御し、コレクションフィールドを画像のタイトル、詳細、代替テキスト、リンクに接続することもできます。このタイプの設定では画像をアイテムの動的アイテムページにリンクできるため、動的リストページと静的ページの両方に最適です。
重要：
この記事では、コレクションアイテムごとに 1つの画像を表示するための画像フィールドにプロギャラリーを接続する方法について説明します。または、ギャラリーをメディアギャラリーフィールドに接続して、動的アイテムページに 1つのコレクションアイテムを表示することができます。

ステップ 1 | CMS コレクションを作成する

ギャラリーに表示したい画像を格納する複数アイテムコレクションを作成して、画像フィールドタイプや画像のタイトル、詳細、代替テキストを格納するテキストフィールドを追加することができます。次に、コレクション内の各アイテムの画像と値を追加します。必要に応じて、デフォルトの「公開」設定から、誰でもコンテンツを閲覧できるコレクションの権限を調整することができます。

ギャラリー画像を格納するコレクションを作成する方法：

  1. サイトダッシュボードの「CMS」にアクセスします。あるいは、エディタ内で「CMS」 をクリックします。
  2. 「コレクションを作成」をクリックします。
  3. コレクション名を入力します。
  4. 「複数のアイテム（デフォルト）」を選択したまま、「作成」をクリックします。
  5. 手動または CSV ファイルをインポートして、コレクションにフィールドを追加します：
ヒント：
各アイテムの画像を格納するには、必ず「画像」フィールドタイプを追加してください。テキストフィールドタイプを追加して、画像のタイトル、詳細、代替テキストとして使用することもできます。
  1. コレクションにアイテムを追加します：
    1. 「＋アイテムを追加」をクリックします。
    2. 「画像」フィールドタイプを含む各該当するフィールドに、アイテムに関するコンテンツを追加します。
    3. この手順を繰り返し、必要な数のアイテムを作成します。
  1. コレクションの権限を設定します：
    1. 「その他のアクション」をクリックし、「権限・プライバシー」を選択します。
    2. 「このコレクションに保存するコンテンツの種類」ドロップダウンをクリックしてオプションを選択します。必要であればドロップダウンをクリックして、コンテンツを閲覧、追加、削除、更新できるユーザーを調整できます。コレクションの権限を設定する方法はこちら
    3. 「保存する」をクリックします。
コレクションの権限とプライバシーを設定しているスクリーンショット。

ステップ 2 | プロギャラリーをコレクションに接続する

サイトにプロギャラリーを追加し、コレクションフィールドにバインドするデータセットに接続します。次に、ギャラリーの画像ソースをコレクションの画像フィールドに接続します。タイトル、詳細、代替テキストをコレクション内のフィールドに接続することもできます。「リンクの接続先」フィールドを使用して、アイテムを動的アイテムページ、または URL、画像、または動画フィールドにリンクします。
Wix エディタ
Editor X
Wix Studio エディタ
  1. エディタにアクセスします。
  2. 異なるコレクションアイテムを表す画像をギャラリーで表示したいページに移動します。
  3. エディタ左側で「パーツを追加」 をクリックします。
  4. 「ギャラリー」をクリックします。
  5. 使用したいプロギャラリーをクリックして、ページにドラッグします。
  1. ギャラリーからサンプル画像を削除します：
    1. ギャラリーで「メディアを管理」をクリックします。
    2. 「すべて選択」をクリックし、「削除」をクリックします。
    3. 「完了」をクリックします。
  2. 「CMS に接続」アイコン  をクリックします。
  3. 「データセットを選択」ドロップダウンをクリックし、コレクションに接続されている既存のデータセットを選択します。または、「新しいデータセットを作成」をクリックし、接続するコレクションを選択します。
  4. 該当するドロップダウンをクリックして、コレクションフィールドをギャラリーに接続します：
    • 画像元の接続先：表示する画像フィールドを選択します。
    • タイトルの接続先：画像のタイトルに使用するフィールドを選択します。
    • 詳細の接続先：画像の詳細に使用するフィールドを選択します。
    • 代替テキストの接続先：画像の代替テキストに使用するフィールドを選択します。
    • リンクの接続先：画像をリンクする動的ページ、URL フィールド、または画像フィールドを選択します。
  1. プロギャラリーをクリックし、「設定」を選択してギャラリーのレイアウトやデザインなどをカスタマイズします。プロギャラリーのカスタマイズについての詳細はこちら

ステップ 3 | データセット設定を管理する

データセット設定を開き、一度に読み込むことができるアイテムの合計数を設定したり、特定のアイテムが表示されないようフィルターしたり、アイテムの表示順序を並べ替えたり、モードを変更したりすることができます。訪問者がギャラリーに接続されているコレクションで画像を送信したり編集したりできるようにする場合は、モードを「読み取り・書き込み」に設定します。
Wix エディタ
Editor X
Wix Studio エディタ
  1. エディタで、ギャラリーに接続するデータセットを選択します。
  2. 「設定」をクリックします。
  3. 「データセットモード」ドロップダウンをクリックし、オプションを選択します：
    • 読み取り：ギャラリーにコレクションのコンテンツを表示できるようにします。
    • 読み取り & 書き込み：ギャラリーにコレクションのコンテンツを表示し、訪問者が入力要素を使用してコレクションのコンテンツを追加または編集できるようにします。
  4. 「アイテム最大表示数」を編集し、ギャラリーに最初に表示されるアイテムの最大数を設定します。これは、訪問者が「もっと見る」ボタン（次のステップを参照）をクリックした際に読み込まれるアイテムの最大数としても使用されます。
  1. （オプション）「＋フィルターを追加」をクリックし、ギャラリーに特定のアイテムのみを表示させます。
  2. （オプション）「＋並び替えを追加」をクリックして、ギャラリーに表示されるコレクションアイテムの順番を選択します。

ステップ 4 |（オプション）「もっと見る」ボタンを作成する

ギャラリー画像がたくさんある場合は、「もっと見る」ボタンを追加することで、ページの読み込みパフォーマンスを改善することができます。データセット設定の「アイテム最大表示数」で、ギャラリーに最初に表示されるアイテム数と、訪問者が「もっと見る」ボタンをクリックした際に表示されるアイテム数が決まります。
Wix エディタ
Editor X
Wix Studio エディタ
  1. エディタ左側で「要素を追加」 をクリックします。
  2. 「ボタン」をクリックし、表示したい場所にボタンをドラッグします。
    ヒント：ボタンの代わりに、画像を追加して「もっと見る」ボタンとして使用することもできます。
  3. 「テキストを編集」をクリックし、ボタンに表示するテキスト（例：「もっと見る」など）を入力します。
  4. 「CMS に接続」アイコン  をクリックします。
  5. 「データセットを選択」ドロップダウンをクリックし、ギャラリーに接続されているデータセットを選択します。
  6. 「クリック時の動作を選択」ドロップダウンをクリックし、「もっと見る」を選択します。
  1. ボタンをクリックして「デザイン」アイコン を選択し、「もっと見る」ボタンの外観をカスタマイズします。

よくある質問

ギャラリーと CMS の接続に関するよくある質問と回答については、以下をクリックしてください。

お役に立ちましたか？

|

この記事では下記を説明します：

  • ステップ 1 | CMS コレクションを作成する
  • ステップ 2 | プロギャラリーをコレクションに接続する
  • ステップ 3 | データセット設定を管理する
  • ステップ 4 |（オプション）「もっと見る」ボタンを作成する
  • よくある質問