WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!! | SWELL DESIGN GALLERY by WebNote+
2024年4月にリニューアルしました!絞り込み検索やお気に入り機能もあります。ぜひ見ていってください!
WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!! | SWELL DESIGN GALLERY by WebNote+
2024年4月にリニューアルしました!絞り込み検索やお気に入り機能もあります。ぜひ見ていってください!
WordPressのブロックエディター標準のテーブルブロックの機能を拡張してくれるWordPressプラグインやテーマを紹介します。
各テーマやプラグインによってテーブルブロックに追加される機能が異なります。
この記事では追加される機能を比較しつつ、目的別におすすめのテーブルブロックも紹介していきます。リッチな表を作成したい方はぜひ参考にしてください。
ブロックエディター機能が充実したWordPressテーマまとめ。
ブロックエディターにおすすめのWordPressプラグインまとめ。
記事はできる限り最新情報に更新していきますが、キャプチャ等は執筆時点の物が多くなると思います。
各テーマやプラグイン紹介の文末に確認したバージョンを記載しています。最新情報は各プロダクトの公式サイト等もご確認頂くようお願いします。
まずは、WordPress標準のテーブルブロックでできないことや基本操作を把握しておきましょう。以下の記事にまとめています。
標準のテーブルブロックでは、例えば表を作成するときに使いたい機能としては以下のような設定ができません。
WordPress6.2からrowspan / colspan 属性がサポートされたことでセルの結合が一応可能になりましたが、テーブルブロックの設定パネルから直感的な操作で結合することはできず、HTMLを直接編集したりする必要があります。
上記は一例ですが、基本的にかなりシンプルな表しか作ることができず、列数が増えるとデザイン的にもあまり見やすい表ではなくなることがあります。
このようなテーブルブロックに機能を追加して、便利で見やすい表を作るためにはプラグインやWordPressテーマの機能を活用するのがおすすめです。
ここから、テーブル機能が充実したWordPressテーマやプラグインを紹介していきます。
この記事で紹介する、プラグインやWordPressテーマで使えるテーブルブロックの機能を以下にまとめました。
プラグイン名 | おすすめ度 | セル結合 | 横スクロール | 背景色変更 | 記号アイコン | ボタンリンク |
---|---|---|---|---|---|---|
Flexible Table Block | 対応 | 対応 | 対応 | – | – | |
SIMPLE BLOG DESIGN | – | 対応 | – | 対応 | 対応 |
※プラグイン名をクリックすると、対象の説明箇所までスクロールできます。
上記で紹介した比較表の中から、目的別におすすめのテーブルブロックを紹介します。
表といえば「セルの結合」と考える方も多いと思います。
現状、テーブルブロックでセルの結合ができるものは少ないですが、以下のプラグインやテーマの機能を利用することでセルを結合したテーブルの作成が可能です。
クラシックエディターで表を作る場合にはもう少し選択肢が増えます。
以下のような表の横スクロールができるプラグインやテーマは多いです。
列1 | 列2 | 列3 | 列4 | 列5 | 列6 | |
---|---|---|---|---|---|---|
行1 | sample | sample | sample | sample | sample | sample |
行2 | sample | sample | sample | sample | sample | sample |
この記事で紹介するプラグインやテーマ全てに、表の横スクロール機能が実装されています。
以下のように一部のセルのみ背景色を設定したいケースがあると思います。
列1 | 列2 |
---|---|
sample | sample |
sample | sample |
セル背景色を個別に変更できるプラグインやテーマのテーブルは以下です。
最近では表の背景に〇や×といった記号アイコンを挿入できる機能を持ったテーブルも登場しています。
列1 | 列2 |
---|---|
sample | sample |
sample | sample |
セルの背景に記号アイコンを挿入できるプラグインやテーマのテーブルは以下です。
この機能は、SIMPLE BLOG DESIGNというプラグインで最初に話題になりました。その後、国内の主要なブログ向けテーマも追従して同機能が搭載され現在に至っています。
何事も0→1を生み出すのが大変なので、この機能を最初にお披露目してくれた開発者さんには本当に感謝です…!
テーブルブロックで商品などの比較表を作る際に、テーブル内にボタンリンクを挿入したいケースもあると思います。
テーブル内にボタンリンクが設置できるプラグインやテーマは以下です。
SIMPLE BLOG DESIGNとSANGOのボタンリンクには通常のURLのみ設定可能です。アフィリエイト用の広告タグなどは設置不可です。SWELLでは、SWELLの複数機能を組みあわせて、アフィリエイト用の広告タグの設定も可能です。
ちなみに、SWELLとSANGOでは、インラインボタンとして文中などにも自由にボタンリンクを設置できます。SWELLやSANGOテーマを使っている場合はFlexible Table Blockの表の中にもボタンを設置できるようになります。
当サイトおすすめのブロック拡張プラグインの中から、テーブルブロックの便利機能を持ったプラグインを紹介します。
おすすめ度:
Flexible Table Blockはブロックエディター専用の無料テーブル作成プラグインで、超万能でトップクラスに高機能なテーブルプラグインだと思います。
Flexible Table Blockの機能を他のプラグインやテーマのテーブル機能と比較すると、以下のような特徴があります。
セルの結合ができる点が個人的に最大の目玉かと思います。
罫線の種類も柔軟に設定できるので、Excelやスプレットシートなどの表計算ソフトのような感覚でテーブルを作成できるのでもの凄く便利です。
さらにセルの背景色も個別に指定できるので、特定セルを強調するような表の作り方も可能です。
横スクロール設定なども含め、かなり細かく柔軟な設定ができるようになっているので、複雑な表を作る際にはかなり活躍します。
セルの背景に記号アイコンを挿入したり、ボタンリンクを設置する機能はありませんが、それ以外にテーブルに求められる設定はほぼすべて兼ね備えていると言っても過言ではないと思います。
お使いのWordPressテーマのテーブル機能が物足りないと感じている方は、Flexible Table Blockを一度ぜひ試してみてください。
関連:Flexible Table Blockの機能・使い方まとめ
おすすめ度:
SIMPLE BLOG DESIGNで、テーブルなど見やすさにこだわった装飾が使えるプラグインです。
SIMPLE BLOG DESIGNのテーブルブロック機能を他のプラグインやテーマの機能と比較すると、以下のような特徴があります。
SIMPLE BLOG DESIGNのテーブルでは、セル背景に記号アイコンを設置できるのが何より魅力です。表内にボタンリンクも設置できるので商品比較表にも便利です。
注意点としては、ボタンリンクはURLのみ設定できて、アフィリエイトリンクのようなHTMLタグは配置できません。タグを配置したい場合は、後述のSWELLのテーブルブロックがおすすめです。
横スクロールの設定とスクロールヒントの表示設定も簡単にできます。
設定がシンプルで簡単なのもSIMPLE BLOG DESIGNプラグインのメリットかと思います。
SIMPLE BLOG DESIGNはテーブル以外にも複数のブロックが使えるブロック拡張プラグインです。設定項目は少ないながら、初期状態でも見栄えの良いデザインの装飾ができるように工夫されています。
関連:SIMPLE BLOG DESIGNの機能・使い方まとめ
当サイトおすすめのWordPressテーマの中から、テーブルブロックの機能が拡張されているテーマを紹介します。
おすすめ度:
WordPressテーマSWELLでは、テーブルブロックに強力な拡張機能が追加されています。
SWELLのテーブルブロックの機能を他のプラグインやテーマの機能と比較すると、以下のような特徴があります。
SWELLのテーブルブロックでは、セル背景に記号アイコンを設置したり、任意のセルのみ背景色を変更することもできます。
横スクロールの設定は、スマホとPCそれぞれで設定が可能です。
また、SWELLの広告タグ管理機能と組み合わせることで、SIMPLE BLOG DESIGNでは実現できなかった、表内のボタンリンクにアフィリエイトリンクを貼ることもできます。
ちなみに、この機能ではボタンリンクのクリック数も分析できるのでかなり便利です。
SWELLの機能を組み合わせると、以下のような比較表を簡単に作ることができて便利です。
長くなるので省略しますが、この他にもSWELLのテーブルブロックでできることがたくさんあります。以下の記事に詳しくまとめていますので、ぜひ見てみてください。
SWELLのテーブルブロックでは、セルの結合はできませんがテーブルに求められる機能としてはとても充実しています。WordPressテーマのテーブルブロック機能としては頭一つ抜けた高機能なブロックになっています。
2023年4月29日リリースのSWELL v.2.7.5アップデートで、直感的にセルの結合ができるようになりました!
公式:SWELL
以下の環境で動作を確認しています。※最終確認日:2023/6/3
v6.2
v2.7.6
おすすめ度:
WordPressテーマSANGOでは、テーブルブロックに独自の拡張機能が追加されています。
SANGOのテーブルブロックの機能を他のプラグインやテーマの機能と比較すると、以下のような特徴があります。
WordPressテーマSANGOも、SWELLやSIMPLE BLOG DESIGNの後を追うように背景に記号を配置できる機能や、表内にボタンリンクを設置できる機能を追加してきました。
SANGOのテーブルは、ブロックスタイルに横スクロールできる表が用意されています。
特定のスタイルでしか設定できないのは注意が必要な点だと思います。
個別にセルの背景色を変更することはできませんが、それ以外の機能としては充実しています。
WordPressテーマの中では、SWELLに次いでおすすめのテーブルブロックです。
公式:SANGO
以下の環境で動作を確認しています。※最終確認日:2023/1/21
v6.1.1
v3.6.4
おすすめ度:
WordPressテーマNishiki Proでは、テーブルブロックに一部の機能が追加されます。
Nishiki Proのテーブルブロックの機能を他のプラグインやテーマの機能と比較すると、以下のような特徴があります。
Nishiki Proでは、ブロックバリエーションとして、横スクロールする表が用意されています。
タブレットやスマホなどデバイスのサイズに合わせてスクロールさせるかどうか選ぶことができます。
それからブロックスタイルとして用意されている「左見出し」のスタイルが、比較項目を縦に並べた表を作るときに見やすいデザインで個人的にはお気に入りです。
機能としてはシンプルですが、複雑すぎない通常の表を作る用途としては十分な機能かと思います。
公式:Nishiki Pro
以下の環境で動作を確認しています。※最終確認日:2022/12/6
v6.1.1
v1.0.307
おすすめ度:
WordPressテーマSTORK19ではテーブルブロックに一部機能が追加されています。
STORK19のテーブルブロックの機能を他のプラグインやテーマの機能と比較すると、以下のような特徴があります。
STORK19では、デバイス幅が480px以下の場合のみ横スクロールさせることができます。
それから1列目をth(テーブル見出し)風のデザインにすることができます。1列目がグレーになりますが、色の指定はできません。
ブログで作る機会が多い商品比較表などを見やすく作りたい場合は、SWELLやSANGOのテーブル機能の方が適しているように感じますが、通常用途の表には十分な機能だと思います。
公式:STORK19
以下の環境で動作を確認しています。※最終確認日:2023/1/21
v6.1.1
v3.17
おすすめ度:
WordPressテーマyStandardでは、専用プラグイン「yStandard Toolbox」を使うことでテーブルブロックの機能が拡張されます。
yStandardのテーブルブロックの機能を他のプラグインやテーマの機能と比較すると、以下のような特徴があります。
yStandard Toolboxのテーブルブロックは、スタイルの中に横スクロール用のスタイルが用意されています。
上記以外のスタイルで横スクロールできない点には注意です。
機能もデザインもシンプルなので、ミニマルなサイトに合いそうなテーブルを作ることができるかなと思います。
公式:yStandard
以下の環境で動作を確認しています。※最終確認日:2022/11/1
v6.0.3
v5.9.2
v5.9.2
v5.9.2
おすすめ度:
WordPressテーマAFFINGER6では、テーブルブロックに一部独自の機能が追加されています。
AFFINGER6のテーブルブロックの機能を他のプラグインやテーマの機能と比較すると、以下のような特徴があります。
AFFINGER6では、ブロックスタイルの中にスマホサイズで横スクロールが可能なスタイルが用意されています。
横スクロールできるスタイルが限定されているのと、PCなど大きな画面サイズのデバイスでは横スクロールできない点には注意が必要です。
それから、1列目のみですが、幅を細かく指定できるようになっています。
テーブルのカラーなどはテーマカスタマイザーから設定できます。記事の編集画面からは設定できない仕様です。
ブログ、アフィリエイト向けの比較表などを作る目的では、SWELLやSANGOのテーブルブロック機能の方が充実していますが、シンプルな表は問題なく作ることができます。
公式:AFFINGER6
以下の環境で動作を確認しています。※最終確認日:2022/11/21
v6.0.3
v5.9.2
v5.9.2
WordPressのブロックエディター標準のテーブルブロック機能を便利に拡張してくれるWordPressテーマやプラグインを紹介しました。
ブログ記事などで頻繁に利用するテーブルブロックですが、標準機能だけだと少し物足りなく感じます。
この記事で紹介したテーマやプラグインのテーブルブロックを活用することで標準機能では作れない表を作成できるのでぜひ参考にしてもらえたら嬉しいです。
ブロックエディターを活用して素敵なコンテンツを作っていきましょう。
最後まで読んでいただきありがとうございました。
この記事が気に入ったら
いいね または フォローしてね!