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

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

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

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

SANGO gutenberg抜群の使い心地!SANGO Gutenbergを使おう!

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

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

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

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

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

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

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

行を見出しセルに

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

列を見出しセルに

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

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

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

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

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

評価スターの挿入方法

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

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

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

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

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

○×などの装飾を挿入

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

良い悪い

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

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

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

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

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

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

設定がめんどくさい方は

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

6 COMMENTS

コメントを残す

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

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