カテゴリ
  1. ホーム
  2. ブログ
  3. デザイン
  4. 【SWELL】テーブル機能（デフォルト搭載）をサンプル付きで紹介

【SWELL】テーブル機能（デフォルト搭載）をサンプル付きで紹介

ブログ デザイン

「SWELLのテーブルは多機能で使い方がよく分からない」という方も多いのではないでしょうか。

今回、SWELLにデフォルトで搭載されているテーブル機能をサンプル付きで紹介。最新のアプデでどのように変わったのかも解説しています。

▼テーブルの基本的な使い方

あわせて読みたい
【WordPress】テーブルの挿入方法、効果的な使い方を解説 ブロックエディターの登場によってテーブルの挿入はとても簡単になりました。しかしながら、テーブル機能を使いこなしているという方は少ないのではないでしょうか？ 今…
目次

SWELLテーブル最新機能

2022年3月31日、ver2.6.0のアップデートでSWELLのテーブルが大きく進化しました。

本記事では機能ごとにサンプルを用意。どう変わったのかも簡潔に解説しています。

テーブル2パターン追加

以下3つの表が簡単に作成可能になりました。

  1. メリット・デメリット表
  2. 料金プラン比較表
  3. 商品比較表
呼び出し方
  1. ブロックを追加
  2. テーブル（table）で検索
  3. すべて表示
  4. 表を選択

①メリット・デメリット表

メリットデメリット
メリット
メリット
メリット
メリット		デメリット
デメリット
デメリット
デメリット
SWELLテーブル｜メリット・デメリット比較表

②料金プラン比較表

スクロールできます
フリープラン
0円		プレミアムプラン
1000円/月
機能A
機能B
機能C
制限あり
機能D
機能E
機能F
無料ではじめる購入はこちら
SWELLテーブル｜料金プラン比較表

③商品比較表


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

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

商品特徴価格評価

商品A		xxxが便利
xxxもできる
xxxはできない		1000円

商品B		xxxが便利
xxxもできる
xxxはできない		1000円

商品C		xxxが便利
xxxもできる
xxxはできない		1000円
SWELLテーブル｜商品比較表3

ブロックサイドバーの進化

追加された機能
  • テーブル全体の中央揃え設定
  • ヘッダーテキストを中央に設定
  • ヘッダーカラーを変更
  • ヘッダーの固定設定

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

サンプルサンプル

ヘッダーテキストを中央に設定

サンプルサンプル

※ヘッダーセクションをオンにする必要があります

ヘッダーカラーを変更

サンプル
〜

・色は設定したものを12色呼び出し可能
・テーブルごとに設定も可能

ヘッダーを上部に固定

サンプル
〜
〜
〜
〜
〜
〜
〜
〜
〜

スクロール時ヘッダーが上部に固定されます。

SWELLテーブルのスタイル

4種類のテーブルから選択可能です。

※アップデートで2パターンが追加されたことにより現在6パターンから選択可能

デフォルト

サンプルヘッダーセクション
〜
〜
〜
〜フッターセクション

シンプル

サンプルヘッダーセクション
〜
〜
〜
〜フッターセクション

ストライプ

サンプルヘッダーセクション
〜
〜
〜
〜フッターセクション

二重線

サンプルヘッダーセクション
〜
〜
〜
〜フッターセクション

※ヘッダー・フッターセクションは非表示可能
※ヘッダー・フッターセクションのカラーはカスタマイズで好きな色に変更可能
※文字色、背景色は好きな色に変更可能

SWELLのテーブル機能｜スマホ縦表示、テーブルの幅を選択可能

スマホで縦並び表示できる

サンプル〜
〜
サンプル〜
〜
スマホ表示縦並びのテーブル

1列目のテーブルの色を強調可能

サンプル〜
サンプル〜
1列目を強調したテーブル

各列で最低限維持する幅を選択可能

指定しない

サンプルサンプル・サンプルサンプル・サンプル・サンプル

10%

サンプルサンプル・サンプルサンプル・サンプル・サンプル

20%

サンプルサンプル・サンプルサンプル・サンプル・サンプル

30%

サンプルサンプル・サンプルサンプル・サンプル・サンプル

横スクロール設定

スクロールできます
横スクロールスマホだけ設定も可能
横スクロールPCだけ設定も可能

テーブルの横幅を設定可能

横幅300px

スクロールできます
テーブルの横幅300px
サンプルサンプルサンプル・サンプル

横幅600px

スクロールできます
テーブルの横幅600px
サンプルサンプル・サンプルサンプル・サンプル・サンプル

横幅900px

スクロールできます
テーブルの横幅900px
サンプルサンプル・サンプルサンプル・サンプル・サンプル

横幅1200px

スクロールできます
テーブルの横幅1200px
サンプルサンプル・サンプルサンプル・サンプル・サンプル

SWELLのテーブルについてよくある質問

SWELLのテーブルはセル結合できる？

SWELLデフォルトのテーブルブロックではセル結合ができません。

別途プラグイン（Flexible Table Blockなど）を使うと結合可能ですが、アプデでSWELL標準搭載のテーブルがかなり使いやすくなったため必要性は低いでしょう。

折り返し禁止って何？

セル内の自動改行を防ぐ機能です。

ブログ デザイン
SWELL
目次