ホーム » 表を作る

表を作る

表を作る

料金や会社情報などを表にします。スマホで読みやすい並び方も選べます。

こんなときに使います

たとえば:サービスの料金や営業時間を、文章だけでなく項目ごとに比べられるようにしたい。

表にまとめて見せます。スマホでは文字が小さくなりすぎたり、列が画面からはみ出したりしないか確認します。

操作する画面の開き方

WordPressの「投稿」または「固定ページ」から編集画面を開き、ブロックエディターで操作します。

実画面で確認

操作画面と手順のポイント

表を作るの実際の操作画面
実際の操作画面の一部です。画像を押すと拡大できます。表示は撮影時の例です。
  1. 「テーブル」ブロックを追加し、各セルに項目と内容を入力します。
  2. 右側の「設定」で、必要に応じて「ヘッダーセクション」をオンにします。
  3. 「スタイル」で選べるデザインを確認し、スマートフォンでの表示も確認します。

独自スタイルが表示されない場合:撮影した環境では、下記で紹介するOptiB独自スタイルは一覧に表示されませんでした。テーマのバージョンや対応状況を管理担当者に確認してください。表示される標準設定はそのまま使えます。

自分の状況から、次の操作を選びましょう
こんなときスマホで表が読みにくい
次にすることヘッダー行+スマホで縦積み

各項目名が付いたカード状の表示を確認

表を作る手順

  1. 投稿・固定ページのブロックエディターで「+」→「テーブル」を追加します。
  2. 横の列数と縦の行数を決め、各マスに文字を入力します。
  3. 一番上を項目名の行にするなら、右側で「ヘッダーセクション」をオンにします。
  4. 右側の「スタイル」から見た目を選び、保存します。

見た目の選び方

  • 見出し列強調:左の列を目立たせます。「会社名→株式会社○○」などに向いています。
  • 枠線なし:縦線を消し、横線だけにします。
  • スマホで縦積み:スマホでは1行ずつカードのように並べます。
  • ストライプ:行ごとに背景色を変えて読みやすくします。

スマホで確認すること

「スマホで縦積み」の項目名は、ヘッダー行から作られます。ヘッダー行がないと項目名が付かないため、設定してから確認します。

標準のテーブルブロックでは、マスの結合、画像やボタンブロックの挿入、列幅をドラッグで変える操作はできません。「デフォルト」で元の見た目に戻せます。

ここまでできたら完了

  • 行・列と見出しの対応が正しく、保存できた
  • スマホでも各数値がどの項目のものかわかる。縦積みならヘッダー行も設定した