SWELL テーブルブロックの使い方！商品比較と対比表を簡単作成

当ページのリンクには広告が含まれています。

2024年10月22日

SWELLの「テーブルブロックの使い方」を初心者さん向けに解説します。

テキスト：テーブル

WordPress標準のブロックエディター機能です。
表が作成できるブロックで複数の類似した内容を比較する用途に適した機能ですね。
例えば、商品の比較や機能の違い等に表（テーブルブロック）を使って見易くするという感じです。

テーブルブロックのSWELLオリジナル拡張機能と標準機能を合わせてご紹介します。^^／

この記事でわかること！

テキスト：テーブルとは…
テーブルブロックの使い方
1. テーブルブロックの挿入手順
2. テーブルブロックの設定：Settings
3. テーブルブロックのカスタマイズイメージ：Settings
4. ツールバー：テーブルブロックの設定｜メニューまとめ
5. テーブルブロックの設定：Styles
6. テーブルブロックのカスタマイズイメージ：Styles
エディター設定：カラーセットのカスタマイズ方法
SWELLのテーブルブロックで作った！商品比較表と対比表の参考例
1. 商品比較表：参考例
2. 対比表：参考例
まとめ！

それではご覧ください。

目次 "Contents"

テキスト：テーブルとは…

テキスト：テーブル（テーブルブロック）とは…
WordPressで標準装備されているブロック（コアブロック）で、全テーマ共通のエディター機能です。

「テーブル＝表」表が作成できるブロックです。

こんな感じ！センス良くないですか ^^

TABLE	BLOCK
CELL-01	ABCDEFG
CELL-02	HIJKLMNO

SWELLのテーブルブロック（デフォルト）

SWELLで使用すると！テーブルブロックの基本（装飾）スタイルは、4種類になります。（詳しくは後述します）
オリジナ拡張機能も多数あり、ハイセンスなテーブル（表）が便利に使えます。

テーブルブロックの使い方

この章では、テーブルブロックの使い方をご紹介します。

テーブルブロックの使い方

テーブルブロックの挿入手順
テーブルブロックの設定：Settings
テーブルブロックのカスタマイズイメージ：Settings
ツールバー：テーブルブロックの設定｜メニューまとめ
テーブルブロックの設定：Styles
テーブルブロックのカスタマイズイメージ：Styles

それでは順番に見ていきましょう。

テーブルブロックの挿入手順

作業は投稿（記事編集）画面での作業になります。

基本的なテーブルブロックの挿入手順をご紹介します。

STEP

投稿（記事編集）画面を準備

Menu『WordPress管理＞ダッシュボード＞投稿＞新規投稿を追加』をクリックします。

投稿画面が表示されます。
（編集する場合は、投稿一覧から対象記事を選択してください。）

テーブルブロックを挿入する箇所をクリックします。

STEP

ブロック挿入ツールを切り替え

『+』をクリックします。

STEP

ブロックタブメニューから『テーブル』を選択

ブロック挿入ツールが『ｘ』切り替わり以下の画面が表示されます。

テキストから『テーブル』を選択して投稿画面に設置します。

『テーブル』をクリックします。

STEP

表形式データを挿入

投稿（記事編集）画面に以下のテーブル作成画面が表示されます。

『カラム数』と『行数』を挿入して『表を作成』をクリックします。

STEP

テーブルブロック挿入完了

投稿（記事編集）画面に『テーブルブロックが挿入されます。

各セルに必要項目を入力して表を完成させます。

見出し行の設定や装飾の変更は後述します。

テーブルブロックの設定：Settings

テーブルブロックの設定：Settingsメニューの詳細をご紹介します。

メニューの場所は、投稿（記事編集）画面の右側に表示される『設定＞ブロック』タブメニューです。

表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。

ブロックタブメニュー詳細

設定

表のセル幅を固定

ヘッダーセクション

フッターセクション

カスタマイズイメージ（設定）

セルの結合・分割

セルの結合

セルを分割

崩れたセルを修復する

テーブル設定

テーブル全体のフォントサイズ

テーブル1列目の横幅

テーブル全体の中央揃え設定

※ ドロップダウンメニューより選択

各列で最低限維持する幅

横スクロール設定

※ ドロップダウンメニューより選択

テーブルヘッダー設定

ヘッダーテキストを中央寄せにする

ヘッダーの固定設定

※ ドロップダウンメニューより選択

ヘッダーカラー

設定：ヘッダーセクションがONの時に有効

デバイス制御

表示するデバイスサイズ

ブロック下の余白量

※ ドロップダウンメニューより選択

高度な設定

HTML アンカー：割愛します。

追加 CSS クラス：割愛します。

テーブルブロックのカスタマイズイメージ：Settings

『設定』項目をすべて『ON』にした場合ヘッダーとフッターの表示は以下の様に表示されます。
（デフォルト）

Settings：設定｜❶ ❷ ❸

Settings：テーブルヘッダー設定｜ヘッダーカラー

Settings：セル背景｜背景カラー

ヘッダーカラーは赤枠部のサイドメニュー、セルの背景カラーは青枠部のツールバーから呼び出します。

Settings：セル背景｜背景アイコン

セル背景のタブを切り替えると上画面のような背景アイコンがワンタッチで入力できます。

ツールバー：テーブルブロックの設定｜^{メニューまとめ}

ツールバーのテーブルブロック設定メニューは以下の部分になります。

ツールバー：テーブルブロック設定

ツールバー：テーブルブロック設定のプルダウンメニュー

❶ テーブル内書式

❷ セル背景

❸ 表を編集

テーブルブロックの設定：Styles

テーブルブロックの設定：Stylesメニューの詳細をご紹介します。

メニューの場所は、投稿（記事編集）画面の右側に表示される『設定＞ブロック』タブメニューです。

表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。

スタイルでは基本（装飾）スタイルが、4種類用意されています。

ブロックタブメニュー詳細

スタイル

デフォルト

ストライプ

シンプル

二重線

カスタマイズイメージ（スタイル）

色

テキスト

ブロックのテキストの色が設定できます。

背景

ブロックの背景の色が設定できます。

タイポグラフィー

ブロックの細かい設定ができます。

サイズ

ブロックのテキストサイズが設定できます。

『 S・M・L・XL・XXL 』を選択

テーブルブロックのカスタマイズイメージ：Styles

基本（装飾）スタイル 4種類をご紹介します。サイトや記事に合わせて自由に選んでみてください。^^／

Styles：デフォルト

Styles：ヘッダー1	Styles：ヘッダー2	Styles：ヘッダー3
Styles：CELL1-1	Styles：CELL1-2	Styles：CELL1-3
Styles：CELL2-1	Styles：CELL2-2	Styles：CELL2-3
Styles：CELL3-1	Styles：CELL3-2	Styles：CELL3-3
Styles：フッター1	Styles：フッター2	Styles：フッター3

Styles：デフォルト

Styles：ストライプ

Styles：ヘッダー1	Styles：ヘッダー2	Styles：ヘッダー3
Styles：CELL1-1	Styles：CELL1-2	Styles：CELL1-3
Styles：CELL2-1	Styles：CELL2-2	Styles：CELL2-3
Styles：CELL3-1	Styles：CELL3-2	Styles：CELL3-3
Styles：フッター1	Styles：フッター2	Styles：フッター3

Styles：ストライプ

Styles：シンプル

Styles：ヘッダー1	Styles：ヘッダー2	Styles：ヘッダー3
Styles：CELL1-1	Styles：CELL1-2	Styles：CELL1-3
Styles：CELL2-1	Styles：CELL2-2	Styles：CELL2-3
Styles：CELL3-1	Styles：CELL3-2	Styles：CELL3-3
Styles：フッター1	Styles：フッター2	Styles：フッター3

Styles：シンプル

Styles：二重線

Styles：ヘッダー1	Styles：ヘッダー2	Styles：ヘッダー3
Styles：CELL1-1	Styles：CELL1-2	Styles：CELL1-3
Styles：CELL2-1	Styles：CELL2-2	Styles：CELL2-3
Styles：CELL3-1	Styles：CELL3-2	Styles：CELL3-3
Styles：フッター1	Styles：フッター2	Styles：フッター3