SWELLブロックエディタ使い方｜テーブル、V2.6.0で爆進化！

2022年4月3日2024年1月1日

2022年3月31日、SWELL バージョン2.6.0がリリースされ、特にテーブル機能が大幅に進化しました！

表内に○や△などの文字を入れたり、ボタンを挿入できるようになりました。

セルごとに背景色も設定可能に！

スクロールできます

	商品A	商品B	商品C
機能A	少し古い	普通	最新機能
機能B	対応済み	制限付き	使用不可
	購入する	購入する	購入する

大幅にパワーアップしたSWELL Ver.2.6.0の表機能を見ていきましょう！

SWELL Ver.2.6.0の新しいテーブル機能とは？

2022年3月31日、SWELL バージョン2.6.0がリリースされ、特にテーブル機能が大幅に進化しました！

今回追加されたテーブルの新機能は、主につぎのとおりです。

セル内にボタンを入れられるようになった
セルの背景に、「◎ ○ △ ×」などの形状を入れられるようになった
セルの背景に、個別に背景色を設定できるようになった
テーブル全体の「中央揃え」が一括でできるようになった、等
テーブルパターン（サンプル）がたくさん用意された

これらの新機能を使った新しいテーブルのサンプルを見ていきましょう。

本家の動画を見るとわかりやすいよ！

＼参考リンク／

SWELL記事：SWELL Ver.2.6.0 アップデート情報（動画解説あり）

SWELLのホームページへ

SWELLホームページ：swell-theme.com

SWELL Ver.2.6.0のテーブル例

SWELLのバージョン2.6.0を使って、どのような表を作れるか見てみましょう。

誰でも使えるように「テーブルパターン」（サンプル）が追加されましたので、そちらをご紹介します。

これらはSWELLに備え付けのテーブルパターン(サンプル)です。

＼参考リンク／

SWELL記事：SWELL Ver.2.6.0で追加されたテーブルパターン

ヘッダー行に背景色を塗ったり、行頭にリスト項目のような「○」「×」をつけられる。

メリット	デメリット
メリットメリットメリットメリット	デメリットデメリットデメリットデメリット

「△」や「✓」などの画像を文字と共に挿入可能。また、商品比較表内にボタンを配置できるので、商品の挿入に直結しやすい。

スクロールできます

	フリープラン 0円	プレミアムプラン 1000円/月
機能A
機能B
機能C	制限あり
機能D
機能E
機能F
	無料ではじめる	購入はこちら

背景に○や×を入れて商品比較表を分かりやすく作成でき、購入ボタンも挿入可能。

スクロールできます

	商品A	商品B	商品C
機能A	少し古い	普通	最新機能
機能B	非対応	制限付き	使用可
性能A	200[単位]	500[単位]	1000[単位]
性能B	500[単位]	1000[単位]	800[単位]
デザイン	普通	良い	微妙
価格	5,000円	10,000円	15,000円
	購入する	購入する	購入する

文字の邪魔にならないように、「○△」などの形状をセルの右上に配置したり、表内にシンプルなボタンを配置できる。

スクロールできます

	商品A	商品B	商品C
機能A	少し古い	普通	最新版
機能B	非対応	制限付き	使用可
性能A	200[単位]	500[単位]	1000[単位]
性能B	500[単位]	1000[単位]	800[単位]
デザイン	普通	良い	微妙
価格	5,000円	10,000円	15,000円
	購入する	購入する	購入する

表内に「○×」のリスト項目を作成可能。また、○△などの形状を背景ではなく文字の上にも配置できる。

スクロールできます

商品	特徴	価格
商品A	xxxが便利 xxxもできる xxxはできない	1000円
商品B	xxxが便利 xxxもできる xxxはできない	1000円
商品C	xxxが便利 xxxもできる xxxはできない	1000円

SWELLのホームページへ

SWELLホームページ：swell-theme.com

SWELL「テーブル」ブロックの使い方

「テーブル」のサイドバーでできる設定

こちらは「テーブル」ブロックのサイドバーの設定画面です。

元々の機能に加え、V2.6.0では多くの機能が追加されました！（リンクからご覧いただけます）

本家の動画を見るとわかりやすいよ！

＼参考リンク／

SWELL記事：SWELL Ver.2.6.0で追加されたサイドバー機能（動画解説あり）

SWELL Ver.2.6.0 のテーブルブロック、設定画面の画像 — SWELL Ver.2.6.0のテーブルの設定項目

テーブル設定

テーブル全体の中央揃え設定	[指定しない]、[水平・垂直]、[水平方向だけ]、[垂直方向だけ] 左の列を、見出し風の外観にするかどうか。（この表ではONになっているので、左の列が色付けされています）
各列で最低限維持する幅	[指定しない]、[約10%]、[約20%]、[約30%] 入力文字が短いと（〇、×など）列幅が極端に狭くなってしまうため、最低何パーセントの幅を維持するか設定できる。
スマホで縦並びに表示する	通常横並びの項目を、1行ずつ縦並びに表示する。
縦1列目を強調する	左の列を、見出し風の外観にするかどうか。 ONにすると、背景色を選ぶメニューが表示される。

横スクロール設定

横スクロール設定	[横スクロールなし]、[横スクロール可能(SPのみ)]、[横スクロール可能(PCのみ)]、[横スクロール可能(SP＆PC)] 表が横に広い場合、横にスクロールするかどうかを設定する。スマホだけでなくPCもスクロール設定可能。
テーブルの横幅	[横スクロール可能]に設定すると、テーブルの横幅を設定できる。
1列目を左端に固定する	横にスクロールしたときに、左端の列を固定するかどうか。横スクロールを選択した場合にのみ選択可能。

テーブルヘッダー設定

ヘッダーテキストを中央寄せにする	ヘッダー見出しを中央寄せにできる（Ver.2.6.0～）。
ヘッダーの固定設定	[固定しない]、[ヘッダーを上部に固定(SPのみ)]、[ヘッダーを上部に固定(PCのみ)] 表の一番上の行を固定するかどうか。表が縦に長くなってもヘッダー項目が固定されるので見やすくできる（横スクロールを可能にした場合は使用不可）。