Wix Studio エディタ：テーブルを追加・カスタマイズする

この記事内

CMS（コンテンツ管理システム）を使用してコレクションとデータセットを管理している場合、テーブルを追加すると、データセットを便利なビューで表示することができます。動作の定義からレイアウトとデザインのカスタマイズまで、クライアントのサイトに合わせてテーブルをカスタマイズできます。

始める前に：

テーブルに表示したいコンテンツコレクションを追加・設定してください。

「 要素を追加」パネルからクライアントのサイトにテーブルを追加します。あらかじめデザインされたテーブルをいくつかご用意していますので、ニーズに合わせてカスタマイズすることができます。その後、要素設定パネルで表示するデータセットを選択してください。

エディタ左側で「要素を追加」をクリックします。
「レイアウトツール」をクリックします。
「テーブル」をクリックします。
好きなデザインをページにドラッグします。
テーブルをコンテンツコレクションに接続します：
1. 「CMS に接続」アイコンをクリックします。
2. （要素設定パネルで）テーブルに表示するデータセットを選択します。
「テーブルを管理」をクリックし、テーブルのカラムを設定します：
- カラムを並べ替える：該当するカラム横の「並び替え」アイコンをクリックし、目的の位置まで上下にドラッグします。
- カラムの名前を変更する：該当するカラムにマウスオーバーし、「その他のアクション」アイコンをクリックして「ラベルを編集」を選択します。新しい名前を入力し、「完了」をクリックします。
- カラムを削除する：該当するカラムにマウスオーバーし、「その他のアクション」アイコンをクリックして「削除」をクリックします。
- 接続を管理する：「接続を管理」をクリックして、CMS 接続を変更します。次に、要素設定パネルの「接続」下の該当するドロップダウンをクリックして、接続とリンクを編集します。

「テーブル設定」パネルからテーブル機能を最適化します。訪問者がテーブルのセルをクリックした際の選択範囲やリンクを開く方法を決定し、必要に応じて日付形式を設定します。

エディタにアクセスします。
テーブル要素を選択します。
「設定」アイコンをクリックし、次のオプションから選択します：
- クリック時の選択範囲：訪問者がセルをクリックした際、テーブル内で選択される範囲を「なし」、「行」、「セル（マス）」から選択します。
- リンク先の表示方法：アイテムにリンクを設定している場合は、それらを新しいウィンドウで表示するか、現在のウィンドウで表示するかを選択します。
- 日付の表示形式：日付フィールドタイプを接続している場合は、日付の表示形式を選択します。

ブレイクポイントを操作する場合：

「設定」パネルでの選択内容は、すべてのブレイクポイントに適用されます。

塗りつぶし色や不透明度の調整から、枠線、角、影の微調整まで、テーブルの視覚的なプレゼンテーションを完全に制御できます。また、テキストスタイルや書式設定をカスタマイズして、洗練された外観にすることもできます。

エディタにアクセスします。
該当するテーブルを選択します。
エディタ右上の「要素設定パネルを開く」アイコンをクリックします。
デザインするものを選択します：
- 色・不透明度：テーブルのさまざまな部分の背景色と不透明度を選択します（例：ヘッダー背景、行背景、テーブル背景）。
- 枠線：テーブルの枠線の色、サイズ、太さ、および区切り線を設定します。
- 角：丸みを px で設定して、テーブルの角をより丸くします。
- 影：色、角度、不透明度に影を適用します。
- テキスト：テーブルに表示されるすべてのテキストのスタイルと書式（例：ヘッダーテキスト、カラムテキスト）を設定します。
（オプション）テーブル内のリンクを、マウスオーバー時に色が変わるように設定します：
1. 「デザイン」下の「ホバー」をクリックします。
2. 「ホバー時のリンク色」横のカラーボックスをクリックします。

コンテンツに合わせてテーブルのレイアウトを調整します。テーブルの高さ、行の高さ、カラムの幅をニーズに合わせてカスタマイズできます。さらに、テーブルのヘッダーを表示または非表示にしたり、カラムの方向を調整したり、テキストの配置を調整したりすることもできます。

ブレイクポイントを操作する場合：

「 テーブルレイアウト」パネルでの選択内容は、すべてのブレイクポイントに適用されます。

こんにちは、さん