SWELLのテーブルブロック｜便利な比較表も簡単に作れる！

SWELLのテーブルブロックについて紹介します。

この記事で紹介するSWELLのテーブル機能は、『SWELL ver. 2.6.0』以上の場合のみ使用できます。

---

テーブルブロックの使い方とSWELLの独自機能

ブロックエディターで表を作るための「テーブルブロック」について以下の2点を紹介します。

テーブルブロックはWordPress本体で用意されているブロック(コアブロック)で、全テーマ共通の機能です。

WordPress標準機能のテーブルブロックをSWELLでは独自に機能拡張してくれています。

では、テーブルブロックについて紹介していきます。

テーブルブロックの使い方

上述したとおり、テーブルブロックはWordPress標準のブロックで全テーマ共通の機能です。

テーブルブロックの基本的な使い方は以下の記事で紹介しているので参考にしてください。

テーブルブロックの使い方の次は、SWELLオリジナルのテーブルブロック拡張機能を紹介します。

SWELL独自のテーブルブロック拡張機能

標準のテーブルブロックの機能では、少し物足りない方も多いと思います。

ですが、SWELLでは以下のようなオリジナルの拡張機能がかなりたくさん用意されています。

各機能の詳細は、公式サイトで丁寧にまとめられているのでぜひ確認しておいてください。

背景アイコンのカラーが変更できるようになりました！

SWELLのVer.2.6.5アップデートで、テーブル内の〇や×など背景に設定できるアイコンのカラーが変更できるようになりました。

以下の方法で、背景アイコンのカラーを変更できます。

WordPress管理画面→「SWELL設定」→「エディター設定」→「カラーセット」→『テーブル設定』

次は、テーブルを簡単に記事内に配置する方法を紹介します。

テーブル作成が苦手な人はテーブル用のブロックパターンを活用しよう！

SWELLのテーブルブロックはかなり高機能です。

でも、いざ自分でテーブルを作ろうとするとどのように表現したら良いか迷ってしまう人もいると思います。

SWELLでは、ブロックエディターのブロックパターンという機能で簡単にキレイなテーブルが作成できます。

ブロックパターンに登録されているテーブルは以下の5種類です。

ブロックパターンに登録されたコンテンツは、以下の手順で記事内に呼び出すことができます。

このあとは、上記のような比較表を自分で作る手順も紹介しておきます。

SWELLのテーブルブロックで超便利な比較表を作る手順！

ブロックパターンを使わずに、自分で比較表を作る手順を紹介します。

今回は、SWELLのテーブルブロックの機能を活用して以下のような比較表を作っていきます。

さらに、以下のような機能が付いた比較表にしたいと思います。

• ボタンリンクにはASPのリンクを改変無しで設定
• ボタンリンクのクリック率も計測可能
• セルごとに〇や×など記号を入力して視覚的に比較できる

今回は以下のステップで、比較表を作っていきましょう。

STEP1：表の全体レイアウトを作る

まずは、エディター上でテーブルブロックを挿入して表の全体像を整えていきましょう。

今回は以下画像のようにしました。

ヘッダーやフッター、列の固定やスクロールなど、SWELLの機能を駆使してお好みで設定しましょう。

例では「二重線」のスタイルで「縦１列目を強調する」をONにしてみました。テーブル全体を中央揃えにしています。

テーブルが上手く作れない場合は記事前半の「テーブルブロックの使い方とSWELLの独自機能の紹介」をもう一度読んでみてください。

次は、表の中に画像を挿入していきます。

STEP2：画像を「インライン画像」機能で挿入

表の1番上の行(今回の例ではヘッダー)に商品などの画像を挿入してみましょう。

以下の手順で画像を挿入できます。

この作業を画像が必要なセル全てで行ってください。

次は計測機能付きのリンクを設置していきます。

STEP3：クリック計測ができるリンクを設置

SWELLには「広告タグ管理機能」という便利機能があります。

広告タグ管理機能では、広告リンクの表示回数やクリック数を計測できます。

この機能を使ってクリック計測できるボタンリンクを表内に設置していきます。

事前準備として、設置したいASPなどのリンクを「テキスト型」で広告タグ管理機能に登録しておいてください。

登録したタグを以下の手順で表内に設置していきます。

画像同様に、リンクが必要なセル全てで同様の作業をしてください。

次はこのリンクをボタン風に装飾していきます。

STEP4：リンクを「インラインボタン」機能で装飾

SWELLには、任意のテキスト部分をボタンにすることができる「インラインボタン」機能があります。

この機能を使うと、先ほどセル内に配置したリンクをボタンにすることができます。

以下の手順でリンクをボタンに変換していきましょう。

広告タグをインラインボタン化するのは少しイレギュラーなやり方かもしれませんが、一応この手順でASPの改変無しリンクをクリック計測機能付きのボタンリンクにすることができます。

この手順をボタンにしたいリンクすべてで行うと、以下のようなリンクのクリック数が計測できる比較表が完成します。

最後に、セルの背景に記号アイコンを設定します。

STEP5：セルの背景に○×など記号を入力

セルの背景に〇や×など記号を入力したり、背景色を変えたり、お好みで表を整えましょう。

以下の手順でセルの背景色やアイコンの挿入ができます。

今回は、セルの背景に記号を入力してみました。

これで、SWELLの標準機能だけで作る比較表の完成です。

ボタンリンクに広告タグを使うことで、ASPのリンクも改変無しで設置できて、さらにボタンリンクの表示回数やクリック数も計測できるようになっています。

有料プラグインの比較表をSWELLのテーブル機能で作り直す方法

特にTwitterで活動されているブロガーさんの中で有名な比較表が作れるプラグイン「SIMPLE BLOG DESIGN」を使用している方が多いと思います。

SWELLの機能を最大限に活用するためにも、プラグインではなくSWELLのテーブル機能で比較表を作った方が良いかもしれません。

そこで、既にプラグインで作っていた比較表をなるべく簡単にSWELLのテーブルに置き換える方法を考えてみました。

以下の手順でテーブルを作り直すことができます。

あとは、ご自身のタイミングで必要に応じてプラグインの無効化や削除などの対応をしてください。

SWELLのテーブルブロックは工夫次第でいろいろな表現ができる！

SWELLのテーブルブロックの機能や活用例を紹介してきました。

テーブルブロックはWordPress標準のブロックですが、SWELLではオリジナルの機能が追加されています。

上記の機能をうまく活用するといろいろな表現ができるので、読者の方に見やすく伝わりやすい表が作れると思います。

みなさんもアレンジしながら素敵な表を作ってみてください。

最後まで読んでいただきありがとうございました。

---

SWELL公式サイトはこちらからどうぞ…！

SWELLブロックエディターの関連記事

SWELL全般の関連記事