テーブルブロックで商品比較表を作る方法

SANGO Gutenbergのインストールが必要です

この記事を実践するにはSANGO Gutenbergをインストールする必要があります。

詳しくはこちらの記事をご覧ください

SANGO gutenbergショートコード不要!直感的に記事を書けるSANGOのエディター機能を解説

SANGO Gutenberg 1.60.0よりブロックエディターで以下のような比較表を作るのが容易になりました。

テーマAテーマBテーマC
使いやすさ普通使いやすいいまいち
居心地の良さ普通居心地は悪い居心地いい
サポートいまいち充実しているサポートはない
評価
ダウンロードダウンロードダウンロードダウンロード
テーマ比較表
項目項目項目項目項目
満足満足充実している使いやすい居心地いい
普通満足普通使いやすいいまいち
満足満足普通居心地は悪い居心地いい
大満足普通普通充実しているサポートはない
ラインナップ

この記事ではテーブルブロックを使った比較表の作り方を紹介します。

まずはテーブルブロックを選択

以下のように/table と入力いただいてテーブルブロックを呼び出します

テーブルの行数とカラム数を選択します

行または列の最初を見出しセルに設定

行を見出しセルに

行を見出しセルにするにはテーブルブロックを選択し、以下のようにヘッダーセクションにチェックを入れます。

列を見出しセルに

列を見出しセルにするにはテーブルブロックを選択し、テーブル見出し設定 にて最初の列を見出しに にチェックを入れます。

また、テーブル見出し設定 にて見出しセルの背景色や文字色を設定することもできます。

評価スターやインラインボタン、インライン画像を挿入

テーブルの中には評価スターやインラインボタンなどを以下のように挿入できます。

商品A商品B
ダウンロードダウンロード

評価スターの挿入方法

評価スターはツールバーより星アイコンを選択することで挿入することができます。

インラインボタンの挿入方法

インラインボタンはボタン化したいテキストを選択し、ツールバーよりボタンアイコンを選択することで挿入できます。

インライン画像の挿入方法

またテーブルの中には画像を差し込むこともできます。これは少しわかりづらいのですが同じようにツールバーより挿入可能です。

○×などの装飾を挿入

またテーブルのセル内の文字に対してマルやバツなどで以下のように装飾することも可能です。

良い悪い

マルやバツを挿入したいセルのテキストを選択して該当のアイコンを選択します。

挿入後は、テーブルブロックのアイコン設定によりアイコンサイズや色なども変更可能です。

横に長いテーブルの場合は最初の列を固定してスクロールさせよう

また列数が多いテーブルはスマートフォンの際の見た目を考慮して列を固定して横にスクロールできるように設定するのがおすすめです。

その場合、テーブルの固定設定 より 最初の列を固定 を選択していただきテーブル幅を設定しましょう

また、スタイル にてスクロールヒントを利用する を選んでおくと以下のようにテーブルのスクロールを促すアイコンが表示されユーザビリティが向上するのでおすすめです!

設定がめんどくさい方は

あらかじめSANGO Landにいくつか雛形を用意しているのでぜひお使いください!

14 COMMENTS

アバター
パナブロガー 2022/07/31

1セルに2行ある場合の文字ズレ

いつもお世話になり、ありがとうございます! 比較表(マルバツ表)を愛用しているのですが、1セルの中で2行あり、どちらか片方の行を太字にすると文字が中央合わせではなくなってしまいます。 2行のうち、1行目だけを太字にしても2行目だけを太字にしてもそれぞれ異なる文字のズレ方をします。(2行まるまる太字にした場合は正常です) ご確認よろしくお願いします。

回答を見る
アバター
kaho 2022/07/01

テーブルをスマホで見るとスクロールヒントや横スクロールが利かない

いつもお世話になっております。 今までは問題が無かったのですが、テーブルの動きが設定どうりになりません テーブルを作成しましたが、スマホから見ると横幅がページの枠を超えて表示されます。2カラム(左がコンテンツ)で作成しています。 モバイルで横スクロールにしても、スクロールヒントを利用するも反映しません。 条件付きでモバイルのみ違った設定にしても横にスクロールすると背景までついてくる状態です。 --…

回答を見る
アバター
サンサン 2022/06/19

比較表の画像

比較表の中のインライン画像についてですが、幅の調整をすることでPCでは綺麗に表示されるのですが、モバイル上は元の画像の大きさで表示され、大きさがバラバラとなってしまいます。 モバイル表示でも画像の大きさを調整する方法はないでしょうか?

回答を見る
アバター
ゆう 2022/05/09

マルバツテーブルを貼り付けた後、マルバツを装飾するアイコンが表示されない

こんにちは! いつも利用させていただいてます 表題の件ですが マルバツテーブルを記事に貼り付けた後の ◯→✖️に変更したいのですが、変更できるテーブルの様なアイコン?が表示されず テンプレートのまま使用するしかないため困っています。 対処方法を教えていただけますでしょうか。 お忙しいところ恐縮ですが よろしくお願いいたします。

回答を見る

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。