header-logo
はじめましょう！Wix でサイトやビジネスを構築する方法をご紹介します。テンプレートを使用してサイトをカスタマイズしたり、パートナーに依頼してウェブプレゼンスを確立しましょう。
サイトの作成Wix エディタの使い方とサイトコンテンツの管理方法について学びましょう。訪問者のプライバシーを保護し、サイトをよりアクセシブルにします。
アカウント・お支払いアカウント設定を確認し、定期購入とプレミアムプランを管理、請求内容を把握しましょう。
Wix モバイルアプリの使用Wix Owner アプリを使用してビジネスを効率的に運営し、訪問者と関わり、コミュニティを構築しましょう。
ドメインの接続ドメインの購入・接続・移管方法と、サイトデータを安全に保つ方法について理解しましょう。
ビジネスの管理支払いの受け付け、分析、訪問者とのつながりなど、ビジネスを構築し成長させるための適切なツールを見つけましょう。
サイトの宣伝検索エンジンでサイトを宣伝し、メルマガを送信し、有料広告を掲載する方法を学びましょう。
Wix Studio・パートナー・エンタープライズWix Studio、パートナー、エンタープライズアカウントを最大限に活用し、ビジネスを拡大しましょう。
ヘルプサイトのパフォーマンスや技術的な問題を解決するための情報を入手しましょう。製品ロードマップでは今後の機能について確認できます。
placeholder-preview-image
Wix Learnコースとチュートリアルでスキルを習得する。
Wix ブログウェブデザインやマーケティングなどのヒントを得る。
SEO ラーニングハブ検索エンジンからのトラフィックを増やす方法について学ぶ。
Website developmentフルスタックプラットフォームでカスタムサイトを構築する。
Wix パートナーに依頼あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image
この記事では下記を説明します：
  • ステップ 1 | コレクションを作成する
  • ステップ 2 | ページにテーブルを追加する
  • ステップ 3 | テーブルを CMS コレクションに接続する
  • ステップ 4 | テーブルをカスタマイズする
  • ステップ 5 | データセット設定を管理する
  • よくある質問
  1. ホーム
  2. サイトの作成
  3. 高度な機能
  4. CMS
  5. 動的ページと CMS の操作
  6. CMS：テーブルにコレクションコンテンツを表示する

CMS：テーブルにコレクションコンテンツを表示する

この記事内
  • ステップ 1 | コレクションを作成する
  • ステップ 2 | ページにテーブルを追加する
  • ステップ 3 | テーブルを CMS コレクションに接続する
  • ステップ 4 | テーブルをカスタマイズする
  • ステップ 5 | データセット設定を管理する
  • よくある質問
サイトのテーブルに CMS（コンテンツ管理システム）コレクションのコンテンツを表示します。

テーブルをコレクションにバインドするデータセットに接続すると、フィールドは列として、アイテムは行として表示されます。デフォルトでは、 表示するように設定しているフィールドは、CMS に接続すると自動的にエディタに表示されます。接続を終えたら、カラムの順番を変更したり、「設定」、「レイアウト」、「デザイン」パネルなどを使用して、テーブルの外観や動作をカスタマイズすることができます。
CMS に接続されたテーブルの例を示したスクリーンショット。

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

テーブルに表示するコンテンツを格納するための「 複数アイテムコレクション」を作成します。コレクションのフィールドとアイテムは、手動で追加するか CSV ファイルからインポートすることができます。

コレクションを作成する方法：

  1. サイトダッシュボードの「CMS」にアクセスします。または、エディタ内で「CMS」 をクリックします。
  2. 「コレクションを作成」をクリックします。
  3. 「ゼロから始める」をクリックします。
    ヒント：「AI で作成」をクリックすると、AI（人工知能）にコレクションを作成してもらうことができます。
  4. 「次へ」をクリックします。
  5. コレクション名を入力します。
  6. （コーディングのみ）コードで使用するコレクション ID を入力します。
  7. 「複数のアイテム（デフォルト）」を選択したまま、「作成する」をクリックします。
  8. 手動または CSV ファイルをインポートして、コレクションにフィールドを追加します：
  9. コレクションの権限を設定します：
    1. 「その他のアクション」をクリックし、「権限・プライバシー」を選択します。
    2. コレクションの権限を選択します：
      • コンテンツを表示：すべての訪問者またはサイト会員のみが、ライブサイトからコレクションのコンテンツを表示できるようにします。管理者と CMS にアクセスできる共同管理者は、常にコレクションのアイテムを表示、追加、更新、または削除することができます。
      • コンテンツを収集：すべての訪問者またはサイト会員のみが、ユーザー入力要素や API を使用して、ライブサイトからコレクションに新しいアイテムを追加できるようにします。また、ここでコンテンツを表示できるユーザーも指定します。管理者と CMS にアクセスできる共同管理者は、常にコレクションのアイテムを表示、追加、更新、または削除することができます。
      • 高度：ユーザーの役割ごとにカスタム権限を設定して、コレクションのコンテンツを表示、追加、更新、または削除できるユーザーを制御します。CMS にアクセスできる管理者と共同管理者は、すべての権限にアクセスできます。ただし、特定の共同管理者の役割に権限を設定して、コレクションへのアクセスを制限することは可能です。
    3. 「保存する」をクリックします。
コレクションの権限を設定しているスクリーンショット。

ステップ 2 | ページにテーブルを追加する

エディタに追加するテーブルをプリセットから選択します。テーブルは後でコレクションに接続してカスタマイズします。
  1. エディタにアクセスします。
  2. エディタ左側で「要素を追加」 をクリックします。
  3. 「リスト」をクリックします。
  4. 「テーブル」をクリックします。
  5. 使用したいテーブルをクリックして、ページにドラッグします。
Wix エディタでテーブルを追加しているスクリーンショット。

ステップ 3 | テーブルを CMS コレクションに接続する

コレクションにバインドするデータセットにテーブルを接続すると、テーブル内に自動的に対応するフィールドが表示されます。 動的アイテムページへのリンクなど、カラムにリンクを追加すると、訪問者がカラム内のアイテムをクリックしてリンク先に移動できるようになります。
  1. ページ上のテーブル要素をクリックします。
  2. 「CMS に接続」アイコン  をクリックします。
  3. 「データセットを選択」ドロップダウンをクリックし、コレクションに接続する既存のデータセットを選択します。または、「データセットを追加」を選択し、接続するコレクションを選択し、名前を付けて「作成」をクリックすることもできます。
  1. 「接続設定」下の該当するドロップダウンをクリックして、各カラムに接続するコレクションフィールドを選択します。
    ヒント：テーブルに画像がある場合は、「Image column alt text connects to（画像カラムの代替テキストの接続先）」ドロップダウンで、必ずそのカラムの画像に代替テキストのフィールドを接続してください。CMS のアクセシビリティに関するベストプラクティスはこちら
「画像カラムの代替テキストの接続先」ドロップダウンがハイライトされている様子を示したスクリーンショット。
  1. （オプション）カラム内のアイテムに、動的アイテムページなどへのリンクを設定します：
    1. 該当する「[フィールド名] 列のリンク先」ドロップダウンをクリックします。
    2. 「[コレクション名]（Item）」と表示される動的アイテムページを選択するか、別のリンクオプションを選択します。
    3. リンクを設定したいカラム内のアイテムごとに、この手順を繰り返します。
  1. （オプション）テーブルに別のカラムを追加します：
    1. 右側の「テーブルを接続」パネルの下部にある「カラムを追加」をクリックします。
    2. 「カラムを選択」ドロップダウンをクリックし、接続するコレクションのフィールドを選択します。
    3. 「カラムを追加」をクリックします。

ステップ 4 | テーブルをカスタマイズする

テーブルを好みの外観にカスタマイズします。カラムは並べ替えたり、名前を変更したり、削除したりできるほか、「設定」、「レイアウト」、「デザイン」パネルを使用して自由にカスタマイズすることができます。また、テーブルは端をドラッグして、サイズや位置を微調整することもできます。
  1. ページ上のテーブル要素をクリックします。
  2. 「テーブルを管理」をクリックし、実行する内容を選択します：
    • カラムを並べ替える：該当するカラム横の「並び替え」アイコン  をクリックし、目的の位置まで上下にドラッグします。
    • カラムの名前を変更する：該当するカラムにマウスオーバーし、「その他のアクション」アイコン  をクリックして「ラベルを編集」を選択します。新しい名前を入力し、「完了」をクリックします。
    • カラムを削除する：該当するカラムにマウスオーバーし、「その他のアクション」アイコン  をクリックして「削除」をクリックします。
    • 接続を管理する：「接続を管理」をクリックし、CMS 接続を変更します。次に、右側の該当するドロップダウンをクリックし、各カラムに接続するコレクションのフィールドを選択して、アイテムのリンクを設定します。
  1. 「設定」アイコン  をクリックし、次のオプションから選択します：
    • クリック時の選択範囲：訪問者がセルをクリックした際、テーブル内で選択される範囲を「なし」、「行」、「セル（マス）」から選択します。
    • リンク先の表示方法：アイテムにリンクを設定している場合は、それらを新しいウィンドウで表示するか、現在のウィンドウで表示するかを選択します。
    • 日付の表示形式： 日付フィールドタイプを接続している場合は、日付の表示形式を選択します。
  2. 「レイアウト」アイコン  をクリックし、テーブルの高さ、ヘッダーの表示オプション、行とカラムのサイズ、コンテンツ配置、ページ送りを選択します。
  3. 「デザイン」アイコン  をクリックし、プリセットデザインを選択し、「デザインをカスタマイズ」をクリックしてテーブルのデザインを微調整します。
  4. 「ストレッチ」アイコン  をクリックして、テーブルをサイトの幅に合わせます。
  5. テーブルの端をドラッグしてサイズを変更します。
注意：
コレクションのフィールド名を変更するには、エディタで 「開発モード」を有効にしてください。そして、コレクションに移動し、該当するフィールドを編集して、フィールド名を変更してください。（英語）

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

データセットモードを設定し、テーブルに特定のアイテムのみが指定した順番で表示されるよう、データセットにフィルターと並び替えを追加します。テーブルには、データセットによって取得されたすべてのアイテムが表示されるため、「 読み込みごとのアイテム数」を設定することはできません。
  1. エディタ右側のパネルで、「データセット設定」をクリックします。
  2. 「データセットモード」ドロップダウンをクリックし、オプションを選択します：
注意：
「 読み込みごとのアイテム数」はテーブルには適用できません。その代わり、「 レイアウト」アイコン をクリックし、カスタムのテーブルの高さを設定してページ送りを有効にすることで、表示するアイテム数を制限することができます。
  1. （オプション）「＋フィルターを追加」をクリックし、テーブルに特定のアイテムのみが表示されるようにします。
  2. （オプション）「＋新しい並び替えを追加」をクリックし、テーブルに表示されるコレクションアイテムの順序を選択します。

よくある質問

テーブルでの CMS コンテンツの表示に関するよくある質問と回答については、以下をクリックしてください。

お役に立ちましたか？

|

Helpmate

こんにちは、さん

さらにヘルプが必要ですか？
Unlock personalized helpLog in to get the most out of Helpmate.