こんにちは、さいそん(@saison_program)です。
この記事では、SWELLのテーブルブロックの作成方法について解説をしています。(※2022/3/30アップデートで実装された新機能)
![](http://saison-blog.com/wp-content/uploads/2022/02/アイコン-e1645055191481-150x150.jpg)
SWELLで高機能でカッコいいテーブル(表)を作りたいです。
作成方法を教えてください!
このような疑問や悩みに答えていきます!
- SWELLのテーブルブロックとは
- SWELLのテーブルブロック新機能の使い方
- 高機能な比較表を自作する方法
執筆者情報
![](https://saison-blog.com/wp-content/uploads/2022/03/さいそんブログ管理人-3-1024x427.png)
![](https://saison-blog.com/wp-content/uploads/2022/03/さいそんブログ管理人-3-1024x427.png)
WordPress標準のブロックエディタには「テーブルブロック」という機能が実装されています。
今回は、SWELLのアップデートによってさらに進化した機能が追加されたのでその使い方についてまとめました。
ぜひアフィリエイトや見やすいブログにするために参考にしてみてくださいね。
結論からお伝えすると、「有料プラグイン」でしか実現できなかった機能が実装されました。
ではさっそく内容に入っていきましょう!
\ 当ブログのWordPressテーマ /
SWELLのテーブルブロックとは
![](https://saison-blog.com/wp-content/uploads/2022/03/education-book-concept-free-vector.jpg)
![](https://saison-blog.com/wp-content/uploads/2022/03/education-book-concept-free-vector.jpg)
SWELLのテーブルブロックで用意されている代表的な拡張機能は以下の通りです↓
- 表のスタイルの指定
- 最低限確保するセル幅の指定
- 表の横スクロール
- 表のヘッダー/フッターを強調
- インラインボタン機能
- セル背景色の指定
- セルの背景にアイコン挿入機能
- ヘッダーの背景色、テキスト中央寄せの設定
SWELLを導入するだけで、テーブルの作成機能がここまで拡張されているのは非常に嬉しいですよね。
それぞれの機能の詳細は公式サイトでまとめられているのでそちらも参考にしてください。
SWELLのテーブルブロック作成方法とブロックパターン
SWELLのテーブルブロックの基本的な作成方法について画像付きで解説をしていきます。
![テーブルブロック作成1](https://saison-blog.com/wp-content/uploads/2022/04/テーブルブロック作成1.png)
![テーブルブロック作成1](https://saison-blog.com/wp-content/uploads/2022/04/テーブルブロック作成1.png)
![テーブルブロック作成2](https://saison-blog.com/wp-content/uploads/2022/04/テーブルブロック作成2.png)
![テーブルブロック作成2](https://saison-blog.com/wp-content/uploads/2022/04/テーブルブロック作成2.png)
![テーブルブロック作成3](https://saison-blog.com/wp-content/uploads/2022/04/テーブルブロック作成3.png)
![テーブルブロック作成3](https://saison-blog.com/wp-content/uploads/2022/04/テーブルブロック作成3.png)
![テーブルブロック作成4](https://saison-blog.com/wp-content/uploads/2022/04/テーブルブロック作成4.png)
![テーブルブロック作成4](https://saison-blog.com/wp-content/uploads/2022/04/テーブルブロック作成4.png)
以上の作業だけで簡単にテーブルブロックを作成することができます。
ベースとなるテーブルブロックを作成したら、SWELLの独自の拡張機能を駆使して素敵な表を完成させていきましょう。
![](http://saison-blog.com/wp-content/uploads/2022/02/アイコン-e1645055191481-150x150.jpg)
![](http://saison-blog.com/wp-content/uploads/2022/02/アイコン-e1645055191481-150x150.jpg)
![](http://saison-blog.com/wp-content/uploads/2022/02/アイコン-e1645055191481-150x150.jpg)
たくさんの機能がありすぎて使いこなす自信がないです…
このように心配している方もSWELLには以下の表のブロックパターン(テンプレート)がアップデートにより追加されたので初心者でも安心して使うことができますよ。
- メリット・デメリット
- 料金比較表
- 商品比較表1
- 商品比較表2
- 商品比較表3
それぞれ内容を見ていきます!
1.メリット・デメリット
![メリットデメリット](https://saison-blog.com/wp-content/uploads/2022/04/メリットデメリット.png)
![メリットデメリット](https://saison-blog.com/wp-content/uploads/2022/04/メリットデメリット.png)
メリットとデメリットを見やすくまとめることができるブロックパターンです。
シンプルな表ですので、記事のデザインを崩すことなく使えるようになっています。
2.料金比較表
![料金比較表](https://saison-blog.com/wp-content/uploads/2022/04/料金比較表.png)
![料金比較表](https://saison-blog.com/wp-content/uploads/2022/04/料金比較表.png)
複数の料金プランがある商品を紹介するときに使えるブロックパターンです。
セルの中にボタンも最初からついているので特に細かい設定をする必要がなく充実した表を作ることができます。
3.商品比較表1
![商品比較表1](https://saison-blog.com/wp-content/uploads/2022/04/料金比較表1.png)
![商品比較表1](https://saison-blog.com/wp-content/uploads/2022/04/料金比較表1.png)
商品比較表は、商品の画像もテーブルに挿入することができるブロックパターンです。
アイコンを使いながら視覚的にわかりやすい表となっています。
4.商品比較表2
![商品比較表2](https://saison-blog.com/wp-content/uploads/2022/04/料金比較表2.png)
![商品比較表2](https://saison-blog.com/wp-content/uploads/2022/04/料金比較表2.png)
商品比較表2では、「○」「△」「×」のアイコンをセルの背景に設定することができるブロックパターンです。
![](http://saison-blog.com/wp-content/uploads/2022/02/アイコン-e1645055191481-150x150.jpg)
![](http://saison-blog.com/wp-content/uploads/2022/02/アイコン-e1645055191481-150x150.jpg)
![](http://saison-blog.com/wp-content/uploads/2022/02/アイコン-e1645055191481-150x150.jpg)
このブロックパターンが僕的に一番のSWELLの強みだと思っています!
理由は、従来であればセルの背景にアイコンを追加するためには「有料プラグイン」を使用する必要があったからです。
「SIMPLE BLOG DESIGN」という9,800円のプラグインでカスタマイズしていた機能です。
この機能をSWELLは取り入れたことによって専用プラグインが不要になった点はブロガーにとって大きなメリットとなります。
5.商品比較表3
![商品比較表3](https://saison-blog.com/wp-content/uploads/2022/04/料金比較表3.png)
![商品比較表3](https://saison-blog.com/wp-content/uploads/2022/04/料金比較表3.png)
商品比較表3は商品の画像に加え、商品の特徴や評価スターを表示させることができるブロックパターンです。
これを自分でカスタマイズするとなると結構大変なのですが、初心者でも簡単に実装できるようになっているのが特徴となっています。
以上がSWELLのテーブルブロックの紹介でした。
![](http://saison-blog.com/wp-content/uploads/2022/02/アイコン-e1645055191481-150x150.jpg)
![](http://saison-blog.com/wp-content/uploads/2022/02/アイコン-e1645055191481-150x150.jpg)
![](http://saison-blog.com/wp-content/uploads/2022/02/アイコン-e1645055191481-150x150.jpg)
ブログ初心者でもアフィリエイトに効果抜群の高度な表を作ることができるので試してみてくださいね。
SWELLのブロックパターンの呼び出し方法
![](https://saison-blog.com/wp-content/uploads/2022/03/free-linear-tool-collection-vector-1024x717.jpg)
![](https://saison-blog.com/wp-content/uploads/2022/03/free-linear-tool-collection-vector-1024x717.jpg)
SWELLのテーブルブロックのブロックパターンを呼び出す方法は以下の通りです↓
![テーブルブロック作成1](https://saison-blog.com/wp-content/uploads/2022/04/テーブルブロック作成1.png)
![テーブルブロック作成1](https://saison-blog.com/wp-content/uploads/2022/04/テーブルブロック作成1.png)
![ブロックパターン1](https://saison-blog.com/wp-content/uploads/2022/04/ブロックパターン1.png)
![ブロックパターン1](https://saison-blog.com/wp-content/uploads/2022/04/ブロックパターン1.png)
![ブロックパターン 2](https://saison-blog.com/wp-content/uploads/2022/04/ブロックパターン-2.png)
![ブロックパターン 2](https://saison-blog.com/wp-content/uploads/2022/04/ブロックパターン-2.png)
この機能を使うことによって高度な表を簡単に作成することができます。
圧倒的にブログ執筆作業を効率化することができるので試してみてくださいね。
SWELLのテーブルブロックを自分でカスタマイズする方法
![](https://saison-blog.com/wp-content/uploads/2022/02/free-flat-digital-marketing-vector-illustration-1024x717.jpg)
![](https://saison-blog.com/wp-content/uploads/2022/02/free-flat-digital-marketing-vector-illustration-1024x717.jpg)
SWELLであらかじめ用意されているブロックパターンではなく、最初から自分で比較表を作成する方法を解説します。
今回は以下のような表を作っていきますので参考にしてみてくださいね。
![完成形](https://saison-blog.com/wp-content/uploads/2022/04/完成形.png)
![完成形](https://saison-blog.com/wp-content/uploads/2022/04/完成形.png)
- 背景にアイコンを付けてわかりやすい
- ボタンのクリック率等を計測できる
では具体的に作成方法を画像付きで解説をしていきます。
1.表のベースを作成
最初にテーブルブロックのベースとなる表を作成していきましょう。
![テーブル用意](https://saison-blog.com/wp-content/uploads/2022/04/テーブル用意.png)
![テーブル用意](https://saison-blog.com/wp-content/uploads/2022/04/テーブル用意.png)
SWELL独自のカスタマイズ機能を使ってお好みのデザインにしてみてください。(今回は説明用として簡単なものとしています。)
2.インライン画像の挿入
表の一番上には画像を挿入していきます。
![インライン画像1](https://saison-blog.com/wp-content/uploads/2022/04/インライン画像1.png)
![インライン画像1](https://saison-blog.com/wp-content/uploads/2022/04/インライン画像1.png)
![インライン画像2](https://saison-blog.com/wp-content/uploads/2022/04/インライン画像2.png)
![インライン画像2](https://saison-blog.com/wp-content/uploads/2022/04/インライン画像2.png)
画像を挿入する時のコツとしては、全ての画像のサイズを同じものにすると綺麗な表に仕上げることができます。
![](http://saison-blog.com/wp-content/uploads/2022/02/アイコン-e1645055191481-150x150.jpg)
![](http://saison-blog.com/wp-content/uploads/2022/02/アイコン-e1645055191481-150x150.jpg)
![](http://saison-blog.com/wp-content/uploads/2022/02/アイコン-e1645055191481-150x150.jpg)
Canvaなどの画像編集ツールでサイズを揃えておきましょう!
※サンプルに使用している画像は600px×300pxとしています。
3.計測用リンクの挿入
ボタンのクリック率などを計測することができるリンクを挿入していきます。
このリンクを導入することによってどのくらいの反応があったのかを計測できるのでアフィリエイトをする時の貴重なデータを集めることができます。
事前に「広告タグ」をテキスト型で登録してある必要があります。
![ボタン設置1](https://saison-blog.com/wp-content/uploads/2022/04/ボタン設置1.png)
![ボタン設置1](https://saison-blog.com/wp-content/uploads/2022/04/ボタン設置1.png)
![ボタン設置2](https://saison-blog.com/wp-content/uploads/2022/04/ボタン設置2.png)
![ボタン設置2](https://saison-blog.com/wp-content/uploads/2022/04/ボタン設置2.png)
今回のサンプルでは2箇所に呼び出しコードを入力していきます。
4.インラインボタン装飾
SWELLのアップデートでテーブル内にボタンを設置できるようになりました。
先ほど入力した広告タグをボタンにしていく手順を紹介します。
![インラインボタン1](https://saison-blog.com/wp-content/uploads/2022/04/インラインボタン1.png)
![インラインボタン1](https://saison-blog.com/wp-content/uploads/2022/04/インラインボタン1.png)
![インラインボタン2](https://saison-blog.com/wp-content/uploads/2022/04/インラインボタン2.png)
![インラインボタン2](https://saison-blog.com/wp-content/uploads/2022/04/インラインボタン2.png)
![インラインボタン3](https://saison-blog.com/wp-content/uploads/2022/04/インラインボタン3.png)
![インラインボタン3](https://saison-blog.com/wp-content/uploads/2022/04/インラインボタン3.png)
![インラインボタン4](https://saison-blog.com/wp-content/uploads/2022/04/インラインボタン4.png)
![インラインボタン4](https://saison-blog.com/wp-content/uploads/2022/04/インラインボタン4.png)
計測用リンク(テキスト型の広告タグ)を使用するときはリンクを解除しておきましょう。
また、エディタ上ではボタン装飾が解除されますが、プレビューではボタン装飾がされていますので確認をしておきましょう。
5.背景にアイコンを設定
セルの背景にアイコンを設定してパッと読者が比較をしやすいようにしていきましょう。
以下の手順で簡単に設定することができます。
![背景アイコン](https://saison-blog.com/wp-content/uploads/2022/04/背景アイコン.png)
![背景アイコン](https://saison-blog.com/wp-content/uploads/2022/04/背景アイコン.png)
お疲れさまでした。これで自作のテーブルブロックの完成です!
![完成形](https://saison-blog.com/wp-content/uploads/2022/04/完成形.png)
![完成形](https://saison-blog.com/wp-content/uploads/2022/04/完成形.png)
基本的な機能は理解できたと思うので、あとはどんどん自分で試行錯誤しながら最高の表を作っていきましょう。
まとめ:SWELLでは高機能な比較表が作成できる
今回は、SWELLの「テーブルブロック」の使い方について詳しく説明をしました。
従来であれば有料プラグインを使用しなければいけなかった装飾も全てSWELLで完結できるようになったので非常に便利になりました。
SWELLのテーブルブロックについておさらいをしておきましょう。
- 表のスタイルの指定
- 最低限確保するセル幅の指定
- 表の横スクロール
- 表のヘッダー/フッターを強調
- インラインボタン機能
- セル背景色の指定
- セルの背景にアイコン挿入機能
- ヘッダーの背景色、テキスト中央寄せの設定
定期的なアップデートにより、どんどんSWELLには機能が追加されています。
それに伴って、アフィリエイトのしやすさも格段に上がっているのでまさに「稼げるWordPressテーマ」と言えますのでぜひ気になった方はSWELLを使ってみてくださいね。
\ 当ブログのWordPressテーマ /
こちらの記事では、SWELLを実際に使ってみたレビューを紹介していますので参考にしてみてください。