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

WordPressテーマSWELLで、商品比較や機能対比の表を簡単に作る方法をわかりやすく解説します。

それではご覧ください。

SWELLテーブルブロックとは？

SWELLのテーブルブロック は、WordPressのブロックエディターで表を作成できる機能です。
商品の価格や機能の違いなど、複数の情報を比較する表（商品比較表・機能対比表） を簡単に作れるのが特徴です。

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

TABLE	BLOCK
CELL-01	ABCDEFG
CELL-02	HIJKLMNO

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

テーブルブロックの基本的な使い方

SWELLのテーブルブロックを使えば、商品比較や機能対比の表を初心者でも簡単に作成できます。

ここでは、基本的な操作手順とカスタマイズ方法を解説します。

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

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

※ 投稿（エディター）画面での作業になります。

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

見出し行の設定や装飾など、テーブルの見た目に関する設定については、次の章で詳しく解説します。

テーブルブロックの基本設定方法

この章では、投稿（エディター）画面の右側に表示される「ブロックタブメニュー」の基本的な役割と内容を紹介します。
テーブルブロックには「設定」タブと「スタイル」タブがあり、それぞれで調整できる内容が異なります。

まずは、投稿（エディター）画面の右側に表示される「設定」タブの各設定項目から確認していきましょう。

ブロックタブメニューは、右側の設定パネルに表示されます。

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

「設定」タブで調整できる主な設定項目

「設定」タブの詳細設定項目

続いて、「スタイル」タブの各設定項目を確認していきましょう。

「スタイル」タブで調整できる主なスタイル項目

「スタイル」タブの詳細設定項目

テーブルブロックでできる主なカスタマイズと表示例

この章では、前章で紹介した投稿（エディター）画面右側のサイドパネルを使ったテーブルブロックのカスタマイズと、その表示例を紹介します。
各設定を変更すると表の見た目がどのように変わるのか、実際の画面を参考にしながら確認してみてください。

設定タブでできるカスタマイズと表示例

サイドパネルの「設定」項目をすべてONにすると、ヘッダーとフッターは次のように表示されます。

ヘッダーカラーをカレーパレットから設定変更すると次のように表示されます。

• デフォルトでは、メインカラーが表示されます。

セルの背景色を変更する場合は、ツールバーの「セル背景」をクリックし、表示されるドロップダウンメニューから設定します。

ツールバーの「セル背景」をクリックし、表示されるドロップダウンメニューのタブを「カラー」から「アイコン」に切り替えると、次の画面のようにアイコンをセルの背景として設定できます。

スタイルタブでできるカスタマイズと表示例

テーブルブロックで使える基本の装飾スタイルは4種類あります。
サイトや記事のデザインに合わせて、使いやすいものを選んでみてください。

デフォルト

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：ヘッダー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：ヘッダー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：ヘッダー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

テーブルブロックのツールバーでできる設定一覧

テーブルブロックのツールバーでは、さまざまな設定を行えます。
ツールバーに表示される専用メニューとドロップダウンメニューは、次の通りです。

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

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

SWELL設定｜エディター設定のカラーセット（テーブル設定）

エディター設定での変更は、全てのテーブルブロックに反映されます。

Menu『WordPress管理＞ダッシュボード＞SWELL設定＞エディター設定』をクリックします。

以下の「エディター設定」画面が表示されます。

「カラーセット」タブをクリックし、画面下にスクロールしてください。

画面を下にスクロールすると、以下の画面が表示されます。

テーブル設定では、背景用のアイコンを7種類のカラーで登録できます。

設定がすべて完了したら、画面を最下部までスクロールし、「変更を保存」をクリックして完了です。

SWELLのテーブルブロックで作る商品比較表・対比表の参考例

これまでご紹介したSWELLのテーブルブロック拡張機能を使い、参考例を2つ作成しました。
下記の「商品比較表」と「対比表」をご覧ください。

商品比較表：参考例

簡単な商品の比較表サンプルを作って見ました。（SWELLの標準拡張機能を使って作成しています。）

インライン画像 商品名	商品A	商品B	商品C
項目1	aaa	bbb	ccc
項目2	ddd	eee	ggg
項目3	hhh	kkk	mmm
項目4	nnn	ppp	qqq
リンク	osaboo.site	osaboo.site	osaboo.site
総合評価点	30点	60点	90点

インライン画像を取り込み商品を視覚化して 項目毎に評価を「セルの背景アイコン」で表示してみました。リンク用ボタンはインラインボタンで作成し広告リンクを使えば計測もできます。

対比表：参考例

最新機能を使った対比表を作ってみました。「新機能   セルの結合」

AAA（セル結合）		BBB（セル結合）		CCC（セル結合）
123	456	123	456	123	456
123	456	123	456	123	456

セルの結合ができる様になったので…1項目に対する対比が簡単に表示できるようになりました。

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

SWELLのテーブルブロックの使い方をご紹介しました。
このブロックを活用すれば、商品比較表や機能対比表など、複数の情報を見やすく整理できます。

投稿（エディター）画面のサイドパネルにある「設定」タブや「スタイル」タブを使えば、セルの背景や文字装飾、余白などを細かくカスタマイズ可能です。
さらに、ツールバーやドロップダウンメニューを使えば、直感的に操作でき、デザインの統一感も簡単に出せます。

この記事で紹介した拡張機能や参考例を活用して、あなたのサイトや記事に合わせたテーブル作成に挑戦してみてください。この記事がお役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／