こんにちは "osaboo"
です。"@osaboo_Bot"
AFFINGER6のテーブルブロック使い方をご紹介します。商品比較や料金表などの作成にお役立て下さい。
どうやって使うの？デザインはカスタマイズできるの？
それではご覧ください。
AFFINGER6 テーブルブロックとは？テキスト：テーブル
テキスト：テーブル（テーブルブロック）とは…
WordPressで標準装備されているブロック（コアブロック）で、全テーマ共通のエディター機能です。
「 テーブル＝表」→ 表が作成できるブロックです。
こんな感じです。綺麗じゃないですか？^^
| TABLE | BLOCK |
|---|---|
| CELL-01 | ABCDEFG |
| CELL-02 | ABCDEFG |
- 当サイト専用の色設定が含まれています
テーブルブロックを使えば、行と列で構成された表（テーブル）を簡単に作成できるため、料金の比較・特徴の対比・スペック一覧など、さまざまなシーンで活躍します。
特にAFFINGER6では、6種類のスタイルからデザインを選べるほか、表の背景色変更・文字の配置調整・太字などのカスタマイズにも柔軟に対応しています。
そのため、用途やデザインに合わせたテーブル作成がかんたんにできます。
さらに、装飾機能やCSSを組み合わせれば、見た目の印象もグッとアップします！
表を使うと、情報が「一目で伝わる」ので、読者にやさしく、離脱防止にもつながりますよ！
テーブルブロックの基本的な使い方
WordPressブロックエディタでは、「テーブルブロック」を使って簡単に表を作成することができます。
AFFINGER6でもこのブロックをベースに、装飾やデザインのカスタマイズが可能です。
まずは、基本的なテーブルの作り方を見ていきましょう。
それでは順番に見ていきましょう。
テーブルブロックの挿入手順
- 作業は投稿（エディター）画面での作業になります。
この章では、基本的な テーブルブロックの挿入手順をご紹介します。
投稿（記事編集）画面を準備
Menu 『WordPress管理＞ダッシュボード＞投稿＞投稿を追加』をクリックします。
投稿（エディター）画面が表示されます。
（編集する場合は、投稿一覧から対象記事を選択してください。）
テーブルブロックを挿入する箇所をクリックします。
ブロック挿入ツールを切り替え
『+』をクリックします。
ブロックタブ メニューから『テーブル』を選択
ブロック挿入ツール切り替えアイコンが『 x 』に変わり 以下の画面が表示されます。
ブロックタブのメニューから『テーブル』をクリックして投稿（記事編集）画面に挿入します。
表形式データを挿入
投稿（記事編集）画面に以下の「テーブル」作成画面が表示されます。
『カラム数』と『行数』を挿入して『表を作成』をクリックします。
テーブルブロック挿入完了
投稿（エディター）画面に「テーブル」ブロックが挿入されます。
見出し行の設定や装飾の変更は後述します。
テーブルブロックの設定：設定
テーブルブロックの「設定＞設定」メニューの詳細をご紹介します。（グローバル設定）
メニューの場所は、投稿（エディター）画面の右側に表示される『設定＞ブロック』タブメニューです。
表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。
「ブロック＞設定」タブメニューの詳細が以下のように表示されます。
テーブル
設定
- 表のセル幅を固定：『ON/OFF』
- ヘッダーセクション：『ON/OFF』
- フッターセクション：『ON/OFF』
1列目の幅
- 『20%・30%・50%・標準・60%』を選択
2列目の幅
- 『20%・30%・50%・標準・60%』を選択
スクロール（SP）
- 横スクロールさせる：『ON/OFF』
高度な設定
- HTML アンカー：『任意』
- 追加 CSS クラス：『任意』
- ヘッダー・フッターの色変更はカスタマイザーで行います。
Menu 『WordPress管理＞ダッシュボード＞外観＞カスタマイズオプション（その他）＞table（表）』をクリックします。
テーブルブロックのカスタマイズイメージ：設定
『設定』項目をすべて『ON』にした場合 ヘッダーとフッターの表示は以下の様に表示されます。
（デフォルト）
設定｜❶ ❷ ❸
『1列目の幅』を30%・『2列目の幅』を20% 設定して見ました。2列以上ある場合、残列は等分されます。
設定：『1列目の幅』を30%・『2列目の幅』を20%・残列2等分で25%自動振分
プレビュー：テーブル設定｜1・2列目の幅
スマホ（SP）の表示を横スクロールさせることができます
設定：『スクロール（SP）』横スクロールを『ON』
プレビュー：テーブル設定｜スクロール（SP）
ツールバー：表を編集アイコンのドロップダウンメニュー
- 投稿（記事編集）画面での作業になります。
テーブルブロックの領域をクリック（選択）すると以下のようにツールバーが切り替わり、赤枠部分の『表を編集』アイコンが表示されます。『表を編集』アイコンをクリックするとドロップダウンメニューが表示されます。各メニューより、行と列の追加や削除ができます。
テーブルブロックの設定：スタイル
テーブルブロックの設定：Styles メニューの詳細をご紹介します。
メニューの場所は、投稿（記事編集）画面の右側に表示される『設定＞ブロック』タブメニューです。
表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。
スタイルでは 基本表示パターンが、6種類用意されています。
「ブロック＞スタイル」タブメニューの詳細が以下のように表示されます。
テーブル
スタイル
- デフォルト
- ストライプ
- 中央寄せ
- ラインなし
- ラインのみ
- ラインのみ2
色
- テキスト
- カラーパレットより選択
- 背景
- カラーパレットより選択
タイポグラフィ
- ドロップダウンメニューより選択
サイズ
- ドロップダウンメニューより選択
テーブルブロックのカスタマイズイメージ：スタイル
スタイルで用意されている 基本表示パターンをご紹介します。
ヘッダー・フッターあり
スタイル：デフォルト
| スタイル：ヘッダー1 | スタイル：ヘッダー2 | スタイル：ヘッダー3 |
|---|---|---|
| スタイル：CELL1-1 | スタイル：CELL1-2 | スタイル：CELL1-3 |
| スタイル：CELL2-1 | スタイル：CELL2-2 | スタイル：CELL2-3 |
| スタイル：CELL3-1 | スタイル：CELL3-2 | スタイル：CELL3-3 |
| スタイル：CELL4-1 | スタイル：CELL4-2 | スタイル：CELL4-3 |
| スタイル：フッター1 | スタイル：フッター2 | スタイル：フッター3 |
スタイル：ストライプ
| スタイル：ヘッダー1 | スタイル：ヘッダー2 | スタイル：ヘッダー3 |
|---|---|---|
| スタイル：CELL1-1 | スタイル：CELL1-2 | スタイル：CELL1-3 |
| スタイル：CELL2-1 | スタイル：CELL2-2 | スタイル：CELL2-3 |
| スタイル：CELL3-1 | スタイル：CELL3-2 | スタイル：CELL3-3 |
| スタイル：CELL4-1 | スタイル：CELL4-2 | スタイル：CELL4-3 |
| スタイル：フッター1 | スタイル：フッター2 | スタイル：フッター3 |
スタイル：中央寄せ
| スタイル：ヘッダー1 | スタイル：ヘッダー2 | スタイル：ヘッダー3 |
|---|---|---|
| スタイル：CELL1-1 | スタイル：CELL1-2 | スタイル：CELL1-3 |
| スタイル：CELL2-1 | スタイル：CELL2-2 | スタイル：CELL2-3 |
| スタイル：CELL3-1 | スタイル：CELL3-2 | スタイル：CELL3-3 |
| スタイル：CELL4-1 | スタイル：CELL4-2 | スタイル：CELL4-3 |
| スタイル：フッター1 | スタイル：フッター2 | スタイル：フッター3 |
スタイル：ラインなし
| スタイル：ヘッダー1 | スタイル：ヘッダー2 | スタイル：ヘッダー3 |
|---|---|---|
| スタイル：CELL1-1 | スタイル：CELL1-2 | スタイル：CELL1-3 |
| スタイル：CELL2-1 | スタイル：CELL2-2 | スタイル：CELL2-3 |
| スタイル：CELL3-1 | スタイル：CELL3-2 | スタイル：CELL3-3 |
| スタイル：CELL4-1 | スタイル：CELL4-2 | スタイル：CELL4-3 |
| スタイル：フッター1 | スタイル：フッター2 | スタイル：フッター3 |
スタイル：ラインのみ
| スタイル：ヘッダー1 | スタイル：ヘッダー2 | スタイル：ヘッダー3 |
|---|---|---|
| スタイル：CELL1-1 | スタイル：CELL1-2 | スタイル：CELL1-3 |
| スタイル：CELL2-1 | スタイル：CELL2-2 | スタイル：CELL2-3 |
| スタイル：CELL3-1 | スタイル：CELL3-2 | スタイル：CELL3-3 |
| スタイル：CELL4-1 | スタイル：CELL4-2 | スタイル：CELL4-3 |
| スタイル：フッター1 | スタイル：フッター2 | スタイル：フッター3 |
スタイル：ラインのみ2
| スタイル：ヘッダー1 | スタイル：ヘッダー2 | スタイル：ヘッダー3 |
|---|---|---|
| スタイル：CELL1-1 | スタイル：CELL1-2 | スタイル：CELL1-3 |
| スタイル：CELL2-1 | スタイル：CELL2-2 | スタイル：CELL2-3 |
| スタイル：CELL3-1 | スタイル：CELL3-2 | スタイル：CELL3-3 |
| スタイル：CELL4-1 | スタイル：CELL4-2 | スタイル：CELL4-3 |
| スタイル：フッター1 | スタイル：フッター2 | スタイル：フッター3 |
ヘッダー・フッターなし
スタイル：デフォルト（ヘッダー未設定で1行目にヘッダーの色設定を反映）
| スタイル：CELL1-1 | スタイル：CELL1-2 | スタイル：CELL1-3 |
| スタイル：CELL2-1 | スタイル：CELL2-2 | スタイル：CELL2-3 |
| スタイル：CELL3-1 | スタイル：CELL3-2 | スタイル：CELL3-3 |
| スタイル：CELL4-1 | スタイル：CELL4-2 | スタイル：CELL4-3 |
テーブルブロックのカスタマイズ（カスタマイザーの設定）
カスタマイザーの設定は、すべてのテーブルブロック（表）に影響します。（グローバル設定）
カスタマイザーを起動します。
Menu 『WordPress管理＞ダッシュボード＞外観＞カスタマイズ』をクリックします。
カスタマイザーが起動すると以下の画面が表示されます。左から順番にメニューをクリックしていきます。
オプション（その他）
➡︎
table（表）
➡︎
table（表）詳細
⬇︎
記事をたくさん書く前に！
なるべく早い段階で「table（表）」の色を決めると良いかと…
AFFINGER6のテーブルブロックで作った！商品比較の参考例
これまでご紹介したAFFINGER6のテーブルブロック拡張機能を使って参考例を作ってみました。
インライン画像を取り込み商品を視覚化して 項目毎に評価を「○△×」で表示してみました。リンクはテキストリンクで作成し広告リンクを使えば計測もできます。
「商品比較表」をご覧ください。
商品比較表：参考例
| インライン画像 商品名 |  商品A |  商品B |
|---|---|---|
| 項目1 | ◎ | △ |
| 項目2 | ⚪︎ | × |
| リンク | osaboo.site/affinger | osaboo.site/affinger |
| 総合評価 | 80点 | 40点 |
テーブルブロックがいまいち使いにくいと感じる方におすすめなのが！（詳しくは、以下の記事で…）
『Flexible Table Block』プラグインです。セルの結合・分割が簡単にできる優れものです。 超おすすめ！
-
-
Flexible Table Blockの導入と使い方【WordPressプラグイン】#AFFINGER6
WordPressで表をカンタンに作れるプラグイン「Flexible Table Block」の導入手順と使い方を初心者さん向けにやさしく解説。AFFINGER6でも使えて便利です！
まとめ！AFFINGER6のテーブルブロック使い方ガイド｜商品比較・料金表もラクラク作成！
AFFINGER6のテーブルブロックの使い方をご紹介しました。
AFFINGER6のテーブルブロックは凝った装飾はできませんが（ブロックエディターの場合）機能的には十分カッコよく！見やすいと思います。カスタマイザーで色の初期設定ができるので統一化されたスタイルが簡単にできるのは魅力ですね。
基本！は装飾等にあまり凝りすぎないように気をつけましょう。この記事がお役に立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
