【ver2.6.0対応】最新SWELL テーブルブロック機能を解説

【ver2.6.0対応】最新SWELL テーブルブロック機能を解説

SWELL – ver. 2.6.0のアップデートでテーブルブロックがものすごく便利になりました!

ほんとうにすごいアップデートで、有料プラグインよりも便利!と云われるほど!

過去の解説記事と比べるとかなり機能が拡張されたので、今回あらためてテーブルブロック機能を解説しようと思います。

ちなみにわたしもこのブログで過去にテーブルブロックの操作感を記事にしたことがあるのですが、「ブロックエディターのテーブルってちょっと物足りない…」というのが正直な感想でした。

ここが不満だった!

  • セルごとに背景色が変えられない
  • 色はカラーパレットの4色からしか選べない
  • ヘッダーの色はサイトメインカラー以外選べない

※正確にはSWELLというよりブロックエディターの標準テーブル機能の問題っぽいですが…

しかしながら、ver. 2.6.0のアップデートで数少ない不満ポイントだったテーブル機能が改善されちゃいましたね!
SWELLがますます弱点がないテーマに進化しています!

この記事の目次

ver. 2.6.0 アップデート内容

【SWELL – ver. 2.6.0 アップデート情報】 | WordPressテーマ SWELL

こんなテーブルブロックが作れるようになりました。

スクロールできます
テーブルブロック拡張内容その他
テーブル全体の中央揃え設定
縦1列目の強調カラー設定
テーブルヘッダーのテキスト中央寄せ設定
テーブルヘッダーの背景カラー設定
テーブル内の書式に「リスト風書式」を追加
セル内のテキスト「中央揃え」設定
個別セルに対しての背景色設定
個別セルに対しての背景アイコン設定
インラインボタン」機能実装
Font Awesome 6に対応
…etc

ここに注目!
今回のアップデートの目玉は何といってもセルの背景にアイコンが設定できるようになったことです!
比較表現が格段にしやすくなっています!

サンプルです。

スクロールできます

SWELL

テーマB

テーマC
ブロックエディター完全対応一部対応非対応
ウィジェットエリア数20418
目次追従機能ありなしなし
デザイン良い良い微妙
価格17,600円10,000円15,000円
購入する購入する購入する
各製品の比較

SWELL テーブルブロック機能解説

テーブルブロックの設置方法

  • ブロックの追加時に「テーブル」と検索する
  • 段落ブロックの最初に「/table」と入力する

テーブルブロックのスタイル

デフォルト
ヘッダーセクションヘッダーセクション
Aさん沖縄
Bさん北海道
デフォルト
ストライプ
ヘッダーセクションヘッダーセクション
Cさんりんご
Dさんマスカット
奇数行の背景がグレー
シンプル
ヘッダーラベルヘッダーラベル
Eさんサッカー
Fさん吹奏楽
色なし
二重線
ヘッダーセクションヘッダーセクション
Gさん
Hさん
枠線が二重線

テーブル内書式

折り返し禁止

通常、テキストがセル内に収まらない場合は自動的に折り返して表示されますが、下のテーブルの通り、強制的に開業を禁止して表示することができます。

ヘッダーセクションヘッダーセクション
テキストテキストテキストテキストテキストテキストテキストテキスト重なってるよ!
上のようにセルからはみ出して表示されます。はみ出したテキストは隣のセルに重ねて表示されます。
折り返し禁止
リスト風

SWELL – ver. 2.6.0 追加機能

セル内にリスト風のアイコンを追加することができます。

スクロールできます
リスト風 チェックリスト風 リスト風 バツ
チェック
チェック
チェック
チェック
メリット
メリット
メリット
メリット
デメリット
デメリット
デメリット
デメリット
リスト風を使用したテーブル例
中央寄せ

SWELL – ver. 2.6.0 追加機能

テーブル全体ではなく、個別セル単位でテキストの中央寄せをすることができます。

「テーブルの最後の行にボタンを設置する際、そのボタンだけセンター寄せにしたい」といった要望に応えた機能です。

プランAプランB
製品A中央寄せしない中央寄せする
3列目だけ中央寄せ

セル背景

SWELL – ver. 2.6.0 追加機能

セルごとに背景色・アイコンを設定することができます。

背景カラー

カラーパレットから自由に変更することができます。

製品A
製品B
製品C
個別セルの背景が変更可能
背景アイコン

アイコンは7種類・サイズは大中小から選択することができます。

サイズ大
サイズ中
サイズ小
アイコンを背景に表示しない アイコンを背景に表示しない
アイコンを背景に表示するアイコンを背景に表示する

テーブルパターン(困ったらこれ!)

SWELLではテーブルブロックを活用してもらうために、あらかじめテーブルブロックのパターンが用意されています。

どのように活用すればいいのか困ったときは、まずはテーブルパターンを参考に使ってみてください。

テーブルパターン:メリット・デメリット

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

テーブルパターン:料金比較表

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

テーブルパターン:商品比較表1

スクロールできます

商品A

商品B

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

テーブルパターン:商品比較表2

スクロールできます

商品A

商品B

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

テーブルパターン:商品比較表3

スクロールできます
商品特徴価格評価

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

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

商品C
xxxが便利
xxxもできる
xxxはできない
1000円
各製品の比較

表の設定

表のセル幅を固定

セルの文字数に関係なく、セル幅を均等に表示します。

「表のセル幅を固定」なし「表のセル幅を固定」なし
石炭をば早はや積み果てつ。きのふの是はけふの非なるわが瞬間の感触を、筆に写して誰たれにか見せむ。
中等室の卓つくゑのほとりはいと静にて、熾熱燈しねつとうの光の晴れがましきも徒いたづらなり。今宵は夜毎にこゝに集ひ来る骨牌カルタ仲間も「ホテル」に宿りて、舟に残れるは余一人ひとりのみなれば。これや日記の成らぬ縁故なる、あらず、これには別に故あり。
引用元:森鴎外 『舞姫』
「表のセル幅を固定」あり「表のセル幅を固定」あり
彼かの人々の嘲るはさることなり。赤く白く
おもて
を塗りて、赫然
かくぜん
たる色の衣を
まと
ひ、珈琲店
カツフエエ
に坐して客を

をみな
を見ては、往きてこれに就かん勇気なく、高き帽を戴き、眼鏡に鼻を挾ませて、普魯西
プロシヤ
にては貴族めきたる鼻音にて物言ふ「レエベマン」を見ては、往きてこれと遊ばん勇気なし。
されど嫉むはおろかならずや。此等の勇気なければ、彼活溌なる同郷の人々と交らんやうもなし。
引用元:森鴎外 『舞姫』
ヘッダーセクション

テーブルの先頭行に見出しとなるヘッダーが追加されます。

ヘッダーセクションなしヘッダーセクションなし
2行×2列で作成2行×2列で作成
ヘッダーセクションなし
ヘッダーセクション ありヘッダーセクション あり
行頭に自動的に1行追加されます。行頭に自動的に1行追加されます。
2行×2列で作成2行×2列で作成
ヘッダーセクション あり
フッターセクション

テーブル最後尾行にフッターが追加されます。

ヘッダーセクションと比べると見た目の強調が弱いです。

2行×2列で作成2行×2列で作成
最終行に自動的に1行追加されます。最終行に自動的に1行追加されます。
フッターセクションフッターセクション
太字は執筆者が設定

テーブル設定

テーブル全体の中央設定

SWELL – ver. 2.6.0 追加機能

  • 指定しない:左上揃え
  • 垂直・水平:上下左右で中央揃え
  • 水平方向だけ:上下は上揃え、左右は中央揃え
  • 垂直方向だけ:上下は中央揃え、左右は左揃え
指定しない指定しない
Aさん
左 右
Bさん
← →
左上に寄せて表示
垂直・水平垂直・水平
Aさん
左 右
Bさん
← →
各セルすべて上下左右で中央揃え
水平方向だけ水平方向だけ
Aさん
左 右
Bさん
← →
左右のみ中央揃え
垂直方向だけ垂直方向だけ
Aさん
左 右
Bさん
← →
上下のみ中央揃え
各列で最低限維持する幅

各セルで最低限維持してほしい横幅を10%20%30%で選択できます。

各列で最低限維持する幅 約10%
各列で最低限維持する幅 約10%
格子の開く音がした。10%維持
「お帰りなさいまし。」
と、ぞんざいに挨拶して迎えた。ぞんざいというと非難するように聞えるが、そうではない、シネクネと身体にシナを付けて、語音に礼儀の潤いを持たせて、奥様らしく気取って挨拶するようなことはこの細君の大の不得手で、褒めて云えば真率なのである。
10%維持
引用元:幸田露伴 『鵞鳥』
各列で最低限維持する幅 約20%各列で最低限維持する幅 約20%
「ア、帰ったよ。」20%維持
と夫が優しく答えたことなどは、いつの日にも無いことではあったが、それでも夫は神経が敏くて、受けこたえにまめで、誰に対っても自然と愛想好く、日々家へ帰って来る時立迎えると、こちらでもあちらを見る、あちらでもこちらを見る、イヤ、何も互にワザと見るというのでも無いが、自然と相見るその時に、夫の眼の中に和らかな心、「お前も平安、おれも平安、お互に仕合せだナア」と、それほど立入った細かい筋路がある訳では無いが、何となく和楽の満足を示すようなものが見える。10%より広い
引用元:幸田露伴 『鵞鳥』
各列で最低限維持する幅 約30%各列で最低限維持する幅 約30%
永年連添う間には、何家でも夫婦の間に晴天和風ばかりは無い。30%維持
夫が妻に対して随分強い不満を抱《最も甚しい時に、自分は悪い癖で、女だてらに、少しガサツなところの有る性分か知らぬが、ツイ荒い物言いもするが、夫はいよいよ怒るとなると、勘高い声で人の胸にささるような口をきくのも止めてしまって、黙って何も言わなくなり、こちらに対って眼は開いていても物を見ないかのようになる。さらに広い
引用元:幸田露伴 『鵞鳥』
縦1列目を強調する

1列目(つまり左端の縦列)を見出し風に強調することができます。

区分(↓1列目が強調される)年齢
小学生7歳~12歳
中学生13歳~15歳
左端の縦列が強調されています。
縦1列目の強調カラー設定

SWELL – ver. 2.6.0 追加機能

「縦1列目を強調する」を使用している場合、背景色を好きな色に変更することができます。
テキストカラーは背景色の明暗に合わせて自動的に白と黒に切り替わります。便利~♪

区分(↓1列目が強調される)年齢
小学生7歳~12歳
中学生13歳~15歳
左端の縦列が強調されています。
スマホで縦並びに表示する

スマホで行を縦に変換して並べ替えて表示します。

縦並び表示する際のおすすめ設定

「ヘッダーセクション」はなし、「縦1列目を強調する」はONにすると見やすくなります。

ワンワンかわいい
ニャーかわいい

「ヘッダーセクション」ありだとまあまあ意味が分からなくなります。

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

「縦1列目を強調する」も設定しておかないと区切りがわかりません。

鶏肉安いヘルシーな感じ
豚肉鶏肉よりは高い疲労回復のお供
「縦1列目を強調する」設定なし

横スクロール設定

画面幅よりも横に長いテーブルをスクロールで表示できるようになります。
スマホのように画面が小さい環境でテーブルを表示したいときに便利です。

横スクロール設定をオンにすると、テーブルの右上に「スクロールできます」というガイドテキストが表示されます。
(親切ですね。)

SWELL テーブルブロック スマホでの追加設定 横スクロール可能にする
スクロールできます
名前出身地年齢好きなもの
さつき広島5歳団子
六太郎青森6歳お刺身
横スクロール可能(SP&PC)で設定
横スクロールするデバイス設定
  • 横スクロールなし:デフォルト 横スクロールしない
  • 横スクロール可能(SPのみ):スマホのみ横スクロールで表示します。
  • 横スクロール可能(PCのみ):PCのみ横スクロールで表示します。
  • 横スクロール可能(SP&PC):スマホとPCともに横スクロールで表示します。
テーブルの横幅

テーブルの幅を1px単位で設定可能です。

スクロールできます
名前住所連絡先年齢趣味職業
田中神奈川県川崎市070-XXXX-XXXX15歳野球中学生
松井福岡県福岡市080-XXXX-XXXX18歳サッカー高校生
テーブルの横幅 200px
スクロールできます
名前住所連絡先年齢趣味職業
鈴木東京都千代田区070-XXXX-XXXX25歳映画鑑賞会社員
佐藤大阪府堺市080-XXXX-XXXX30歳読書自営業
テーブルの横幅 800px
1列目を左端に固定する

ボタン一つで1列目を固定表示することもできます。

スクロールできます
名前出身地年齢好きな食べ物嫌いな食べ物好きな動物
さくら長崎3歳りんごピーマンカンガルー
けんたろう岩手4歳さつまいも人参くじら
1列目を左端に固定して表示

テーブルヘッダー設定

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

SWELL – ver. 2.6.0 追加機能

ヘッダーセクションのテキストが中央寄せになります。

ここのテキストが中央寄せになるここのテキストが中央寄せになる
Aさん沖縄
Bさん北海道
「ヘッダーテキストを中央寄せにする」あり
ヘッダーの固定設定

ヘッダーが追従して表示されるようになります。

ヘッダーの固定設定ありヘッダーの固定設定あり
A1
B2
C3
D4
E5
ヘッダーを上部に固定(SP&PC)

デバイス別に追従設定が可能ですが、PCだけを追従設定させることはできません。

  • 固定しない
  • ヘッダーを上部に固定(SPのみ)
  • ヘッダーを上部に固定(SP&PC)

横スクロール設定を使用している場合、ヘッダーの固定設定使用することはできません。

ヘッダーカラー

SWELL – ver. 2.6.0 追加機能

ヘッダーセクションの背景色を好きな色に変更することができます。

テキストカラーは背景色の明暗に合わせて自動的に白と黒に切り替わります。

ヘッダーセクションヘッダーセクション
Aさん沖縄
Bさん北海道
ヘッダーカラーを変更

まとめ

SWELL – ver. 2.6.0のアップデートでテーブル機能が格段にレベルアップしています。
特にリスト風書式背景アイコンによって比較表現がとても充実しました。
商品レビュー記事を書く人にとって、ますます便利なWordPressテーマになったと思います。

ビジュアルエディタのテーブル機能と比べると、枠線のカスタマイズ性が低くやセル結合の機能がないという点はあるものの、その点を差し引いてもSWELLのテーブル機能の方がおすすめです。

進化し続けるところがSWELLの魅力!

このブログで過去にSWELLのテーブル機能について解説したことがあるのですが、当時まとめに以下のように書いていました。

両テーマ比較してみて、テーブル機能を利用するにあたって、多くのニーズに応えられるのはTHE THOR(ビジュアルエディター)の方だと思いました。

テーブルデザインの設定のしやすさ、見た目の良さはSWELL(ブロックエディター)だと思いますが、セルの結合や色のカスタマイズがTHE THORに比べると貧弱です。

せめてヘッダーセクションとテーブル背景色が自由に設定できると嬉しいのですが…。

引用元:当ブログ WordPressテーブル機能で比べてみるTHE THORとSWELL
(太字は筆者設定)

今回のアップデートでヘッダーセクションと個別セルの背景色が自由に設定できるようになっていました。
(きっとわたしの想いが届いたのでしょう!)

実際わたしの声が届いたかはさておき、SWELLは利用者の声を取り入れながら進化しているWordPressテーマです。
例えばブログパーツ機能なんかも利用者の要望をきっかけに開発されました。

今後もSWELLのアップデートが楽しみですね!

WordPressテーマをお探しでしたらぜひSWELLをご検討ください。
(よっぽどの理由がない限りSWELLにしときなさい!というのが本音です!)

たくさんのブログの中から最後まで読んでいただきありがとうございました。

もっと気軽に、楽しく記事を書こう。

【ver2.6.0対応】最新SWELL テーブルブロック機能を解説

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

satouのアバター satou 金融系Web広告担当

ブログ未経験でいきなりワードプレスからはじめました!金融業界で働くただのWeb広告担当者です。Web広告のことや生活を豊かにする情報をシェアしていきます。
最近はワードプレステーマ『SWELL』にどっぷりハマってます。しばらく『SWELL』についてばかり書くことになりそう。

この記事の目次
閉じる