SANGO Gutenberg 1.60.0よりブロックエディターで以下のような比較表を作るのが容易になりました。
| 項目 | 項目 | 項目 | 項目 | 項目 | |
|---|---|---|---|---|---|
 | |||||
| |||||
| |||||
|
この記事ではテーブルブロックを使った比較表の作り方を紹介します。
以下のように/table と入力いただいてテーブルブロックを呼び出します
テーブルの行数とカラム数を選択します
行を見出しセルに
行を見出しセルにするにはテーブルブロックを選択し、以下のようにヘッダーセクションにチェックを入れます。
列を見出しセルに
列を見出しセルにするにはテーブルブロックを選択し、テーブル見出し設定 にて最初の列を見出しに にチェックを入れます。
また、テーブル見出し設定 にて見出しセルの背景色や文字色を設定することもできます。
テーブルの中には評価スターやインラインボタンなどを以下のように挿入できます。
評価スターの挿入方法
評価スターはツールバーより星アイコンを選択することで挿入することができます。
インラインボタンの挿入方法
インラインボタンはボタン化したいテキストを選択し、ツールバーよりボタンアイコンを選択することで挿入できます。
インライン画像の挿入方法
またテーブルの中には画像を差し込むこともできます。これは少しわかりづらいのですが同じようにツールバーより挿入可能です。
またテーブルのセル内の文字に対してマルやバツなどで以下のように装飾することも可能です。
マルやバツを挿入したいセルのテキストを選択して該当のアイコンを選択します。
挿入後は、テーブルブロックのアイコン設定によりアイコンサイズや色なども変更可能です。
また列数が多いテーブルはスマートフォンの際の見た目を考慮して列を固定して横にスクロールできるように設定するのがおすすめです。
その場合、テーブルの固定設定 より 最初の列を固定 を選択していただきテーブル幅を設定しましょう
また、スタイル にてスクロールヒントを利用する を選んでおくと以下のようにテーブルのスクロールを促すアイコンが表示されユーザビリティが向上するのでおすすめです！
あらかじめSANGO Landにいくつか雛形を用意しているのでぜひお使いください！
1セルに2行ある場合の文字ズレ
いつもお世話になり、ありがとうございます！ 比較表（マルバツ表）を愛用しているのですが、1セルの中で2行あり、どちらか片方の行を太字にすると文字が中央合わせではなくなってしまいます。 2行のうち、1行目だけを太字にしても2行目だけを太字にしてもそれぞれ異なる文字のズレ方をします。(2行まるまる太字にした場合は正常です) ご確認よろしくお願いします。
テーブルをスマホで見るとスクロールヒントや横スクロールが利かない
いつもお世話になっております。 今までは問題が無かったのですが、テーブルの動きが設定どうりになりません テーブルを作成しましたが、スマホから見ると横幅がページの枠を超えて表示されます。2カラム（左がコンテンツ）で作成しています。 モバイルで横スクロールにしても、スクロールヒントを利用するも反映しません。 条件付きでモバイルのみ違った設定にしても横にスクロールすると背景までついてくる状態です。 --…
比較表の画像
比較表の中のインライン画像についてですが、幅の調整をすることでPCでは綺麗に表示されるのですが、モバイル上は元の画像の大きさで表示され、大きさがバラバラとなってしまいます。 モバイル表示でも画像の大きさを調整する方法はないでしょうか？
マルバツテーブルを貼り付けた後、マルバツを装飾するアイコンが表示されない
こんにちは！ いつも利用させていただいてます 表題の件ですが マルバツテーブルを記事に貼り付けた後の ◯→✖️に変更したいのですが、変更できるテーブルの様なアイコン？が表示されず テンプレートのまま使用するしかないため困っています。 対処方法を教えていただけますでしょうか。 お忙しいところ恐縮ですが よろしくお願いいたします。