Wix Studio エディタ：テーブルを追加・カスタマイズする
読了時間：6分
CMS（コンテンツ管理システム）を使用してコレクションとデータセットを管理している場合、テーブルを追加すると、データセットを便利なビューで表示することができます。動作の定義からレイアウトとデザインのカスタマイズまで、クライアントのサイトに合わせてテーブルをカスタマイズできます。
この記事では、以下の項目について説明します：
始める前に：
テーブルに表示したいコンテンツコレクションを追加・設定してください。
テーブルを追加・設定する
「要素を追加」パネルからクライアントのサイトにテーブルを追加します。あらかじめデザインされたテーブルをいくつかご用意していますので、ニーズに合わせてカスタマイズすることができます。その後、要素設定パネルで表示するデータセットを選択してください。
テーブルを追加・設定する方法：
- エディタにアクセスします。
- （まだ有効にしていない場合）コードパネルからコーディングを有効にします：
- 左側で「コード」アイコン
をクリックします。 - 「コーディングを開始」をクリックします。
- 左側で「コード」アイコン
- エディタ左側で「要素を追加」
をクリックします。 - 「レイアウトツール」をクリックします。
- 「テーブル」をクリックします。
- 好きなデザインをページにドラッグします。
- テーブルをコンテンツコレクションに接続します：
- 「CMS に接続」アイコン
をクリックします。 - （要素設定パネルで）テーブルに表示するデータセットを選択します。
- 「CMS に接続」アイコン
- 「テーブルを管理」をクリックし、テーブルのカラムを設定します：
- カラムを並べ替える：該当するカラム横の「並び替え」アイコン
をクリックし、目的の位置まで上下にドラッグします。 - カラムの名前を変更する：該当するカラムにマウスオーバーし、「その他のアクション」アイコン
をクリックして「ラベルを編集」を選択します。新しい名前を入力し、「完了」をクリックします。 - カラムを削除する：該当するカラムにマウスオーバーし、「その他のアクション」アイコン をクリックして「削除」をクリックします。
- 接続を管理する：「接続を管理」をクリックして、CMS 接続を変更します。次に、要素設定パネルの「接続」下の該当するドロップダウンをクリックして、接続とリンクを編集します。
- カラムを並べ替える：該当するカラム横の「並び替え」アイコン
テーブル設定をカスタマイズする
「テーブル設定」パネルからテーブル機能を最適化します。訪問者がテーブルのセルをクリックした際の選択範囲やリンクを開く方法を決定し、必要に応じて日付形式を設定します。
テーブル設定をカスタマイズする方法：
- エディタにアクセスします。
- テーブル要素を選択します。
- 「設定」アイコン
をクリックし、次のオプションから選択します：
- クリック時の選択範囲：訪問者がセルをクリックした際、テーブル内で選択される範囲を「なし」、「行」、「セル（マス）」から選択します。
- リンク先の表示方法：アイテムにリンクを設定している場合は、それらを新しいウィンドウで表示するか、現在のウィンドウで表示するかを選択します。
- 日付の表示形式： 日付フィールドタイプを接続している場合は、日付の表示形式を選択します。
ブレイクポイントを操作する場合：
「設定」パネルでの選択内容は、すべてのブレイクポイントに適用されます。
テーブルをデザインする
塗りつぶし色や不透明度の調整から、枠線、角、影の微調整まで、テーブルの視覚的なプレゼンテーションを完全に制御できます。また、テキストスタイルや書式設定をカスタマイズして、洗練された外観にすることもできます。
テーブルをデザインする方法：
- エディタにアクセスします。
- 該当するテーブルを選択します。
- エディタ右上の「要素設定パネルを開く」アイコン
をクリックします。 - デザインするものを選択します：
- 色・不透明度：テーブルのさまざまな部分の背景色と不透明度を選択します（例：ヘッダー背景、行背景、テーブル背景）。
- 枠線：テーブルの枠線の色、サイズ、太さ、および区切り線を設定します。
- 角：丸みを px で設定して、テーブルの角をより丸くします。
- 影：色、角度、不透明度に影を適用します。
- テキスト：テーブルに表示されるすべてのテキストのスタイルと書式（例：ヘッダーテキスト、カラムテキスト）を設定します。
- （オプション）テーブル内のリンクを、マウスオーバー時に色が変わるように設定します：
- 「デザイン」下の「ホバー」をクリックします。
- 「ホバー時のリンク色」横のカラーボックスをクリックします。
テーブルレイアウトを調整する
コンテンツに合わせてテーブルのレイアウトを調整します。テーブルの高さ、行の高さ、カラムの幅をニーズに合わせてカスタマイズできます。さらに、テーブルのヘッダーを表示または非表示にしたり、カラムの方向を調整したり、テキストの配置を調整したりすることもできます。
テーブルレイアウトを調整する方法：
- エディタにアクセスします。
- 該当するテーブルを選択します。
- 「レイアウト」アイコン
をクリックします。 - 調整する内容を選択します：
- テーブルの高さ：テーブルをカスタムの高さに設定するかどうかを決定します。
- カラムの幅：テーブルのカラム（列）の幅を設定します：
- 均一：すべてのカラムを同じ幅にします。
- カスタム：「適用」をクリックして、各列の幅を定義します。ピクセル（px）、パーセント（%）、または自動計量単位を使用できます。
- ヘッダーを表示：トグルをクリックして、テーブルのヘッダー（カラムタイトル）を表示または非表示にします。有効にした場合、ヘッダーの高さを設定することもできます。
- 行の高さ：行の高さをピクセル単位で設定します。
- 方向：カラムを左から右に表示するか、右から左に表示するかを選択します。
ヒント：カラムの順序は、「テーブルを管理」パネルでの整理方法に基づきます。 - コンテンツ配置：テーブルテキストを左、中央、または右に配置します。
ブレイクポイントを操作する場合：
「テーブルレイアウト」パネルでの選択内容は、すべてのブレイクポイントに適用されます。
お役に立ちましたか？
|