テーブル

テーブル要素について

Table Elementを使用すると、商品情報や料金プランを示すテーブルを作成できます。

詳細については、以下のビデオチュートリアルを参照してください。

レガシーエディター - テーブル要素にアクセスして設定する方法

• ステップ1：PageFlyエディターで、左側メニューの要素ボタンをクリックします。

• ステップ2：PageFlyタブを探し > 高度セクションの下にあるテーブル要素をクリックします。サイドバーで探す代わりに、検索機能を使用してこの要素を検索できることに注意してください。

• ステップ3：目的のテーブルバリアントをページエディターにドラッグアンドドロップします。これで要素の設定を開始できます。

テーブル要素には、ほとんどのニーズをカバーする複数のバリエーションがあります。しかし、時間を節約できるよう、さらにバリエーションを追加し続けます。

テーブル要素には、行や列の数量の調整、ヘッダー行やヘッダー列の設定、カスタムフォントや色の適用など、外観と機能をカスタマイズするのに役立つ様々なパラメーターがあります。…

全般設定

全般タブに移動して、テキスト、配置、見出しレベル（H1、H2、H3など）などの全般設定を調整します。

以下に全般タブの主な設定を確認してください。

| スタイル: 6つのテーブルスタイルから選択：デフォルト、ベーシック、ストライプ行、枠付きテーブル、ホバー行、枠なし。 |

| | テキストコンテンツ: テーブル内のテキストフィールドのコンテンツを変更します。セルをクリックして、必要に応じてテキストを入力および書式設定します。 |

|

ATTRIBUTES、VISIBILITY、およびANIMATIONパラメーターに関する詳細は、こちらで確認できます。

スタイリング設定

スタイリングタブに切り替えて、フォントサイズ、色、間隔など、外観をカスタマイズするためのスタイリング設定を行います。

全体

全体セクションでは、コンテンツの色を変更できます：8つのデフォルトカラーから選択するか、カラーピッカーを使用して独自のカラーをカスタマイズして、テーブルのコンテンツの色を変更します。

間隔

• パディング：テーブルのコンテナの内部間隔を調整して、各セル内のコンテンツが適切に配置されるようにします。

• マージン：テーブルのコンテナの外部間隔を調整し、テーブルとページ上の他の要素との距離を管理します。

タイポグラフィ

| - フォントファミリー: ストアのブランディングに合わせるために、6つのデフォルトフォントファミリーオプションから選択します。 |

| | - テキスト配置: 左揃え、右揃え、中央揃え、両端揃えの4つのテキスト配置オプションから選択し、セル内のテキストを適切に配置します。 |

| | - テキストスタイル: テキストの表示を強化するために、テキストスタイル（太字、斜体）を適用します。 |

|

背景

| - 背景色: 8つのデフォルトカラーのいずれかを使用するか、独自のカラーをカスタマイズして、テーブルの背景色を選択します。

|

|

スタイリングタブに関する詳細は、こちらで確認できます。

Gen 2エディター - テーブル要素にアクセスして設定する方法

アクセス手順はレガシーエディターと同じですが、時間を節約できるよう、さらにバリエーションを追加し続けます。

テーブル要素には、行や列の数量の調整、ヘッダー行やヘッダー列の設定、カスタムフォントや色の適用など、外観と機能をカスタマイズするのに役立つ様々なパラメーターがあります。…

より分かりやすくするために、以下のビデオチュートリアルを参照してください。

全般設定

以下に全般タブの主な設定を確認してください。

コンテンツ:

| 行、列: 列と行の数を調整します |

パラメーターとして表示されるテーブル行、テーブルセルなどの内部要素をクリックして行や列を追加することもできます。

| | ボーダー: テーブルにボーダーを設定します。テーブルセルのみにボーダーを設定することもできます。 |

| | 段落テキスト: テーブル内のテキストフィールドのコンテンツを変更します |

|

ATTRIBUTES、VISIBILITY、およびANIMATIONパラメーターに関する詳細は、こちらで確認できます。

注意：これらの要素のみをセル内に配置できます

• フレックスブロック、見出し、段落、ボタン、画像、ビデオ、リスト、アイコン、仕切り。

スタイリング設定

スタイリングタブに切り替えて、フォントサイズ、色、間隔など、外観をカスタマイズするためのスタイリング設定を行います。フレックスエディターの場合、「サイズ」という新しいパラメーターが追加され、フレックスブロックの幅と高さを変更できます。

レイアウト

テーブルセル要素をクリックしてパラメーターの設定を調整します。ページエディター - スタイリングタブの記事で詳細を確認できます（Gen 2エディター - スタイリングタブのレイアウト設定の下）。

全体

全体セクションでは、コンテンツの色を変更できます：8つのデフォルトカラーから選択するか、カラーピッカーを使用して独自のカラーをカスタマイズして、テーブルのコンテンツの色を変更します。

間隔

• パディング: テーブルのコンテナの内部間隔を調整し、各セル内のコンテンツが適切に配置されるようにします。パディングは、テーブルセルなどの内部要素にも適用できます。

• マージン: テーブルのコンテナの外部間隔を調整し、テーブルとページ上の他の要素との距離を管理します。

タイポグラフィ

| - フォントファミリー: ストアのブランディングに合わせるために、6つのデフォルトフォントファミリーオプションから選択します。 |

| | - テキスト配置: 左揃え、右揃え、中央揃え、両端揃えの4つのテキスト配置オプションから選択し、セル内のテキストを適切に配置します。 |

| | - テキストスタイル: テキストの表示を強化するために、テキストスタイル（太字、斜体）を適用します。 |

|

背景

| - 背景色: 8つのデフォルトカラーのいずれかを使用するか、独自のカラーをカスタマイズして、テーブルの背景色を選択します。

|

|

一般的なケース

モバイルデバイスでテーブルがレスポンシブにならない場合

PageFlyのレスポンシブデザインツールを使用して、モバイルデバイス向けにテーブルのレイアウトを調整します。テーブルセルが広すぎず、小さい画面でもテキストが適切なサイズであることを確認してください。PageFlyエディター内で様々なデバイスサイズでテーブルをプレビューし、すべてのデバイスでの読みやすさと使いやすさを確保するために必要な調整を行います。

テーブルスタイルがテーマに合わない場合

スタイリングタブを使用して、テーブルの外観をカスタマイズします。フォントファミリー、フォントサイズ、テキストカラーを変更してテーマのスタイルに合わせます。背景色を調整するか、背景画像を追加して、テーブルがストアのデザインとシームレスに統合されるようにします。提供されているデフォルトのテーブルスタイル（例：Striped Rows, Bordered Table）を利用して、統一感のある見た目を素早く適用します。

よくある質問

1. なぜウェブページでテーブルを使用する必要があるのですか？

テーブル要素は、スキャン、比較、分析が容易であるため、大量のデータを表示する最良の方法です。ユーザーは統計間の関連性を迅速に理解し、概観することができます。

2. テーブル要素内に画像を追加できますか？

はい、Gen 2エディターを使用してテーブル要素を追加できます。新しいテーブル要素は、テーブル内に画像を追加することをサポートしています。

追加リソース

• PageFlyコンテンツリスト要素を編集する方法

• 要素ツールバーの主な機能 | PageFlyページエディター

• PageFlyでのページエディター - 要素カタログの使い方