SWELLのテーブルブロック作成方法を解説【有料プラグイン不要で高機能】

こんにちは、さいそん(@saison_program)です。

この記事では、SWELLのテーブルブロックの作成方法について解説をしています。(※2022/3/30アップデートで実装された新機能)

このような疑問や悩みに答えていきます！

WordPress標準のブロックエディタには「テーブルブロック」という機能が実装されています。

今回は、SWELLのアップデートによってさらに進化した機能が追加されたのでその使い方についてまとめました。

ぜひアフィリエイトや見やすいブログにするために参考にしてみてくださいね。

ではさっそく内容に入っていきましょう！

SWELLのテーブルブロックとは

SWELLのテーブルブロックで用意されている代表的な拡張機能は以下の通りです↓

SWELLを導入するだけで、テーブルの作成機能がここまで拡張されているのは非常に嬉しいですよね。

それぞれの機能の詳細は公式サイトでまとめられているのでそちらも参考にしてください。

SWELLのテーブルブロック作成方法とブロックパターン

SWELLのテーブルブロックの基本的な作成方法について画像付きで解説をしていきます。

以上の作業だけで簡単にテーブルブロックを作成することができます。

ベースとなるテーブルブロックを作成したら、SWELLの独自の拡張機能を駆使して素敵な表を完成させていきましょう。

このように心配している方もSWELLには以下の表のブロックパターン(テンプレート)がアップデートにより追加されたので初心者でも安心して使うことができますよ。

それぞれ内容を見ていきます！

1.メリット・デメリット

メリットとデメリットを見やすくまとめることができるブロックパターンです。

シンプルな表ですので、記事のデザインを崩すことなく使えるようになっています。

2.料金比較表

複数の料金プランがある商品を紹介するときに使えるブロックパターンです。

セルの中にボタンも最初からついているので特に細かい設定をする必要がなく充実した表を作ることができます。

3.商品比較表1

商品比較表は、商品の画像もテーブルに挿入することができるブロックパターンです。

アイコンを使いながら視覚的にわかりやすい表となっています。

4.商品比較表2

商品比較表2では、「○」「△」「×」のアイコンをセルの背景に設定することができるブロックパターンです。

理由は、従来であればセルの背景にアイコンを追加するためには「有料プラグイン」を使用する必要があったからです。

この機能をSWELLは取り入れたことによって専用プラグインが不要になった点はブロガーにとって大きなメリットとなります。

5.商品比較表3

商品比較表3は商品の画像に加え、商品の特徴や評価スターを表示させることができるブロックパターンです。

これを自分でカスタマイズするとなると結構大変なのですが、初心者でも簡単に実装できるようになっているのが特徴となっています。

以上がSWELLのテーブルブロックの紹介でした。

SWELLのブロックパターンの呼び出し方法

SWELLのテーブルブロックのブロックパターンを呼び出す方法は以下の通りです↓

この機能を使うことによって高度な表を簡単に作成することができます。

圧倒的にブログ執筆作業を効率化することができるので試してみてくださいね。

SWELLのテーブルブロックを自分でカスタマイズする方法

SWELLであらかじめ用意されているブロックパターンではなく、最初から自分で比較表を作成する方法を解説します。

今回は以下のような表を作っていきますので参考にしてみてくださいね。

では具体的に作成方法を画像付きで解説をしていきます。

1.表のベースを作成

最初にテーブルブロックのベースとなる表を作成していきましょう。

SWELL独自のカスタマイズ機能を使ってお好みのデザインにしてみてください。(今回は説明用として簡単なものとしています。)

2.インライン画像の挿入

表の一番上には画像を挿入していきます。

画像を挿入する時のコツとしては、全ての画像のサイズを同じものにすると綺麗な表に仕上げることができます。

※サンプルに使用している画像は600px×300pxとしています。

3.計測用リンクの挿入

ボタンのクリック率などを計測することができるリンクを挿入していきます。

このリンクを導入することによってどのくらいの反応があったのかを計測できるのでアフィリエイトをする時の貴重なデータを集めることができます。

今回のサンプルでは2箇所に呼び出しコードを入力していきます。

4.インラインボタン装飾

SWELLのアップデートでテーブル内にボタンを設置できるようになりました。

先ほど入力した広告タグをボタンにしていく手順を紹介します。

5.背景にアイコンを設定

セルの背景にアイコンを設定してパッと読者が比較をしやすいようにしていきましょう。

以下の手順で簡単に設定することができます。

お疲れさまでした。これで自作のテーブルブロックの完成です！

基本的な機能は理解できたと思うので、あとはどんどん自分で試行錯誤しながら最高の表を作っていきましょう。

まとめ：SWELLでは高機能な比較表が作成できる

今回は、SWELLの「テーブルブロック」の使い方について詳しく説明をしました。

従来であれば有料プラグインを使用しなければいけなかった装飾も全てSWELLで完結できるようになったので非常に便利になりました。

SWELLのテーブルブロックについておさらいをしておきましょう。

定期的なアップデートにより、どんどんSWELLには機能が追加されています。

それに伴って、アフィリエイトのしやすさも格段に上がっているのでまさに「稼げるWordPressテーマ」と言えますのでぜひ気になった方はSWELLを使ってみてくださいね。

こちらの記事では、SWELLを実際に使ってみたレビューを紹介していますので参考にしてみてください。