テーブル
Last updated
Was this helpful?
Japanese 🇯🇵
Last updated
Was this helpful?
Table Elementを使用すると、商品情報や料金プランを示すテーブルを作成できます。
詳細については、以下のビデオチュートリアルを参照してください。
ステップ1：PageFlyエディターで、左側メニューの要素ボタンをクリックします。
ステップ2：PageFlyタブを探し > 高度セクションの下にあるテーブル要素をクリックします。サイドバーで探す代わりに、検索機能を使用してこの要素を検索できることに注意してください。
ステップ3：目的のテーブルバリアントをページエディターにドラッグアンドドロップします。これで要素の設定を開始できます。
テーブル要素には、ほとんどのニーズをカバーする複数のバリエーションがあります。しかし、時間を節約できるよう、さらにバリエーションを追加し続けます。
テーブル要素には、行や列の数量の調整、ヘッダー行やヘッダー列の設定、カスタムフォントや色の適用など、外観と機能をカスタマイズするのに役立つ様々なパラメーターがあります。…
全般タブに移動して、テキスト、配置、見出しレベル（H1、H2、H3など）などの全般設定を調整します。
以下に全般タブの主な設定を確認してください。
| スタイル: 6つのテーブルスタイルから選択：デフォルト、ベーシック、ストライプ行、枠付きテーブル、ホバー行、枠なし。 |
列、行、ヘッダー行、ヘッダー列: 黒い点を目的の位置にドラッグするか、右側のボックスに特定の数値を入力して、列、行、ヘッダー行、ヘッダー列の数を調整します。
ATTRIBUTES、VISIBILITY、およびANIMATIONパラメーターに関する詳細は、こちらで確認できます。
スタイリングタブに切り替えて、フォントサイズ、色、間隔など、外観をカスタマイズするためのスタイリング設定を行います。
全体
全体セクションでは、コンテンツの色を変更できます：8つのデフォルトカラーから選択するか、カラーピッカーを使用して独自のカラーをカスタマイズして、テーブルのコンテンツの色を変更します。
間隔
パディング：テーブルのコンテナの内部間隔を調整して、各セル内のコンテンツが適切に配置されるようにします。
マージン：テーブルのコンテナの外部間隔を調整し、テーブルとページ上の他の要素との距離を管理します。
タイポグラフィ
| - フォントファミリー: ストアのブランディングに合わせるために、6つのデフォルトフォントファミリーオプションから選択します。 |
- フォントサイズ: 黒い点をドラッグするか、ボックスに特定の数値を入力してフォントサイズを調整します。
背景
| - 背景色: 8つのデフォルトカラーのいずれかを使用するか、独自のカラーをカスタマイズして、テーブルの背景色を選択します。
|
- 背景画像: 画像を選択をクリックし、画像を選択し、選択をクリックして、テーブルに背景画像を追加します。
スタイリングタブに関する詳細は、こちらで確認できます。
重要: Gen 2レイアウトは、従量課金制モデル（スロットプラン）でのみ利用可能です。
アクセス手順はレガシーエディターと同じですが、時間を節約できるよう、さらにバリエーションを追加し続けます。
テーブル要素には、行や列の数量の調整、ヘッダー行やヘッダー列の設定、カスタムフォントや色の適用など、外観と機能をカスタマイズするのに役立つ様々なパラメーターがあります。…
より分かりやすくするために、以下のビデオチュートリアルを参照してください。
以下に全般タブの主な設定を確認してください。
コンテンツ:
| 行、列: 列と行の数を調整します |
一番上の行をヘッダーに、列をヘッダーに: 最初の行または列をヘッダーとしてマークします
ATTRIBUTES、VISIBILITY、およびANIMATIONパラメーターに関する詳細は、こちらで確認できます。
注意：これらの要素のみをセル内に配置できます
フレックスブロック、見出し、段落、ボタン、画像、ビデオ、リスト、アイコン、仕切り。
スタイリングタブに切り替えて、フォントサイズ、色、間隔など、外観をカスタマイズするためのスタイリング設定を行います。フレックスエディターの場合、「サイズ」という新しいパラメーターが追加され、フレックスブロックの幅と高さを変更できます。
レイアウト
テーブルセル要素をクリックしてパラメーターの設定を調整します。ページエディター - スタイリングタブの記事で詳細を確認できます（Gen 2エディター - スタイリングタブのレイアウト設定の下）。
全体
全体セクションでは、コンテンツの色を変更できます：8つのデフォルトカラーから選択するか、カラーピッカーを使用して独自のカラーをカスタマイズして、テーブルのコンテンツの色を変更します。
間隔
パディング: テーブルのコンテナの内部間隔を調整し、各セル内のコンテンツが適切に配置されるようにします。パディングは、テーブルセルなどの内部要素にも適用できます。
マージン: テーブルのコンテナの外部間隔を調整し、テーブルとページ上の他の要素との距離を管理します。
タイポグラフィ
| - フォントファミリー: ストアのブランディングに合わせるために、6つのデフォルトフォントファミリーオプションから選択します。 |
- フォントサイズ: 黒い点をドラッグするか、ボックスに特定の数値を入力してフォントサイズを調整します。
背景
| - 背景色: 8つのデフォルトカラーのいずれかを使用するか、独自のカラーをカスタマイズして、テーブルの背景色を選択します。
|
- 背景画像: 画像を選択をクリックし、画像を選択し、選択をクリックして、テーブルに背景画像を追加します。
PageFlyのレスポンシブデザインツールを使用して、モバイルデバイス向けにテーブルのレイアウトを調整します。テーブルセルが広すぎず、小さい画面でもテキストが適切なサイズであることを確認してください。PageFlyエディター内で様々なデバイスサイズでテーブルをプレビューし、すべてのデバイスでの読みやすさと使いやすさを確保するために必要な調整を行います。
スタイリングタブを使用して、テーブルの外観をカスタマイズします。フォントファミリー、フォントサイズ、テキストカラーを変更してテーマのスタイルに合わせます。背景色を調整するか、背景画像を追加して、テーブルがストアのデザインとシームレスに統合されるようにします。提供されているデフォルトのテーブルスタイル（例：Striped Rows, Bordered Table）を利用して、統一感のある見た目を素早く適用します。
1. なぜウェブページでテーブルを使用する必要があるのですか？
テーブル要素は、スキャン、比較、分析が容易であるため、大量のデータを表示する最良の方法です。ユーザーは統計間の関連性を迅速に理解し、概観することができます。
2. テーブル要素内に画像を追加できますか？
はい、Gen 2エディターを使用してテーブル要素を追加できます。新しいテーブル要素は、テーブル内に画像を追加することをサポートしています。
| | テキストコンテンツ: テーブル内のテキストフィールドのコンテンツを変更します。セルをクリックして、必要に応じてテキストを入力および書式設定します。 |
|
| | - テキスト配置: 左揃え、右揃え、中央揃え、両端揃えの4つのテキスト配置オプションから選択し、セル内のテキストを適切に配置します。 |
| | - テキストスタイル: テキストの表示を強化するために、テキストスタイル（太字、斜体）を適用します。 |
|
|
パラメーターとして表示されるテーブル行、テーブルセルなどの内部要素をクリックして行や列を追加することもできます。
| | ボーダー: テーブルにボーダーを設定します。テーブルセルのみにボーダーを設定することもできます。 |
| | 段落テキスト: テーブル内のテキストフィールドのコンテンツを変更します |
|
| | - テキスト配置: 左揃え、右揃え、中央揃え、両端揃えの4つのテキスト配置オプションから選択し、セル内のテキストを適切に配置します。 |
| | - テキストスタイル: テキストの表示を強化するために、テキストスタイル（太字、斜体）を適用します。 |
|
|
