MENU
チロ猫
こんにちは、チロ猫です。

ネットショップと趣味のブログをいくつか運営しています。
◆ 神テーマ「SWELL」のすべて!◆ 特徴 ~ エディタ ~ 移行手順 ~ デメリット ~ 感想 ~ 比較まで!記事へ GO!

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

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 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非対応制限付き使用可
性能A200[単位]500[単位]1000[単位]
性能B500[単位]1000[単位]800[単位]
デザイン普通良い微妙
価格5,000円10,000円15,000円
購入する購入する購入する
各製品の比較

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

スクロールできます

商品A

商品B

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

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

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

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

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

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

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のみ)]

表の一番上の行を固定するかどうか。表が縦に長くなってもヘッダー項目が固定されるので見やすくできる(横スクロールを可能にした場合は使用不可)。

ツールバーで行う「テーブル」装飾

SWELLのバージョン2.6.0から、ツールバー上でテーブル装飾を行う機能が追加されました。

背景色の追加や、○×の追加など、多くのことを行えます(下記のリンクからご覧いただけます)。

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

\参考リンク/

SWELL記事:SWELL Ver.2.6.0で追加されたツールバー機能(動画解説あり)

リスト風の「○」「×」を挿入する

SWELLのテーブル内に、リスト風の○×を挿入する方法の図

セルの背景に、色や「○」「×」を挿入する

SWELLのテーブルで、セルの背景に○×を挿入する方法の図

セル内にボタンを挿入する

セル内にボタンを挿入するには、以下の方法で行います。

SWELLのテーブル内に、ボタンを挿入する方法の図

SWELL Ver.2.6.0 の新しいテーブル機能、いかがでしたか?

ブロックエディタの弱点である「テーブル」機能の使い勝手が見事に解消され、魅力的な比較表を簡単に作れるまでに進化しました!

すでにSWELLをお持ちの方は、今すぐVer.2.6.0にアップグレードしてください。

\参考リンク/

SWELL記事:SWELL Ver.2.6.0 アップデート情報(動画解説あり)

SWELLをご検討中の方は、SWELLの新しいテーブル機能をぜひ試してみてくださいね!

\ テーブル機能が充実! /

SWELLホームページ:https://swell-theme.com/

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