テーブルマスター」アプリを追加・設定する
読了時間:5分
テーブルマスターアプリを使用すると、Wix サイトに簡単にテーブル(表)を追加することができます。 Google スプレッドシートをアップロードするか、手動で表のデータを追加できます。サイト訪問者はダウンロードすることなくテーブルのデータを閲覧、絞り込み、並べ替えることができます。
テーブルを使用すると以下のことができるようになります:
- コンテンツの整理
- リストの作成
- 連絡先の詳細を並べ替え
- データの更新
- など
始める前に:
スプレッドシートをアップロードする前に公開する必要があります。
![デスクトップとモバイルで表示されるテーブルマスターアプリ。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9dcc39dd-da6f-4c38-b1c3-ee79d33f39d5/2021/10/18/36bdeeb7-8a99-4c41-a965-fcdd41c21f0e/a679e003-7a65-4a13-ba59-984552bf85c4.png)
ステップ 1 | テーブルマスターアプリをサイトに追加する
テーブルマスターアプリをサイトに追加します。アプリを追加したら、アプリをコピー&ペーストして、サイトの別のページに移動することができます。
注意:
現在、テーブルマスターアプリは Wix Studio エディタではご利用いただけません。
アプリを追加・設定する方法:
- エディタ左側で「アプリ」
をクリックします。
- 検索バーに「テーブルマスター」と入力してアプリを検索します。
- 「サイトに追加」をクリックします。
![サイトにテーブルマスターアプリを追加する](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/12/03/5837a93b-d447-471f-851a-1ae863fb62b6/7da5346e-383a-4858-b85b-bff51d82da7e.jpg)
ステップ 2 | 表のデータを入力する
Google スプレッドシートをアップロードするか、手動で表のデータを挿入します。
データを追加する方法:
- エディタで表を選択します。
- 「設定」をクリックします。
- 「データ」タブをクリックします。
- 手動でデータを追加するか、Google スプレッドシートをアップロードします。
データを手動で追加する
Google スプレッドシートをアップロードする
ステップ 3 | 表のレイアウトと表示をカスタマイズする
データを追加したら、表のレイアウトと表示をカスタマイズできます。表示するデータの列数、表の高さ、モバイル端末での表の表示方法を選択します。
レイアウトと表示をカスタマイズする方法:
- 「レイアウト」タブをクリックします。
- 「列の制限」トグルをクリックして、表に表示する列数を制限するかどうかを設定します。
- 有効化:「表示する列の最大数」で表示する列数を選択できます。スライダーをドラッグするか、数値を入力して変更します。
- 無効化:表に表示する列数に制限はありません。
![「テーブルマスター」アプリのレイアウト設定](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/12/03/949fe46e-0555-4c29-84f8-cdc8ed50852b/59c34198-9754-4ebd-8325-012c9fd6d4cb.png)
- 「表の高さ」下で表の高さを選択します。
- 固定サイズでスクロールする:表はデータに合わせて調整されません。表示領域に収まらない行がある場合、表には縦のスクロールバーが表示されます。
- 自動で調節:表の高さは、行数に応じて調整されます。
- 「スマホ」下で、モバイル端末での表の動作を選択します。
- 拡大表示:表には最初の列が表示され、訪問者は各行をクリックしてその内容を表示できます。
- スクロール:表の高さは固定されており、訪問者がより多くのデータを表示するために使用できるスクロールバーがあります。
- 「表示設定」タブをクリックします。
![「テーブルマスター」アプリの表示設定](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/12/03/afeae2e6-1e19-4345-b52e-f61c7842d34c/874842b8-0c71-49b9-9d04-12e2cd1b00c3.png)
- 「ヘッダーとフッターを表示」トグルをクリックして表にヘッダーとフッターを表示するかどうかを設定します。
- 「検索を表示」トグルをクリックして、表に検索バーを表示するかどうかを設定します。
- (オプション)「検索テキスト」下で検索バーのデフォルトテキストをカスタマイズします。
- 「並べ替えを有効化」トグルをクリックして、訪問者が表内のデータを並べ替えることができるかどうかを設定します。
有効にすると、訪問者は列をクリックしてアルファベット順または数値の昇順または降順で並べ替えることができます。
![「テーブルマスター」アプリの並べ替え機能](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9dcc39dd-da6f-4c38-b1c3-ee79d33f39d5/2021/09/03/9cbf52f8-1092-4d35-bd96-e7b626eda23b/95243642-a9cb-496c-95bb-b0eee5aaff27.gif)
ステップ 4 | 表のテキストと色をカスタマイズする
最後のステップは、「デザイン」タブでテーブルのフォントとテキストの色をカスタマイズすることです。表の背景、枠線、行の色を設定し、表のテキストに使用するフォントをカスタマイズできます。
- 「デザイン」タブをクリックします。
- 「背景色」をクリックします。
- 「メインカラー」下で表の背景色を選択します。
- 「グラデーションを使用」トグルをクリックして、表の背景色にグラデーション効果を使用するかどうかを設定します。
![名前、メールアドレス、電話番号が入力されたテーブル](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9dcc39dd-da6f-4c38-b1c3-ee79d33f39d5/2021/09/03/30350886-714f-49b0-b305-7b79f98302ca/01207eab-e65a-4cf7-8145-c5b1283bfa57.png)
- (オプション)「サブカラー」横でグラデーションの色を選択します。
- 「外枠線」下で枠線の色、枠線の太さ、角の丸みを選択します。
- 「戻る」をクリックします。
- 「テーブル」をクリックします。
- 「列」または「行」下の「テキスト」をクリックして、表で使用するフォントをカスタマイズします。行と列に個別のテキストオプションを選択できます。
![デザイン設定とフォントの変更方法](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/12/03/b0e35bc6-aa66-437c-876b-8a3c144a69ab/607bd230-e0f2-42fd-a869-b1d4e39028d0.png)
- 「行」で行の背景色を選択します。奇数行と偶数行に異なる色を設定し、ホバーの背景色を設定できます。
- 「内枠線」下で表の内側の枠線の色と太さを選択します。
- サイトを公開して更新内容を反映させましょう。
ヒント:
Wix App Market 内を検索してその他のテーブルアプリを探すか、Velo by Wix を使用して表を作成することもできます。