ブロックエディタ(グーテンベルク)の使い方を紹介するコーナーです。今回は「テーブルブロック」について説明します。
「テーブル」とは表のことです。何か情報をまとめるときに使います。
「テーブル」はいつ覚えるべき？
「テーブル」は基礎的なブロックなので早めに覚えるべきです。順番的には超必須ブロック(見出し、段落、画像)の次に覚えるべき項目！
「テーブル」とは？(初心者向け)
「テーブル」の存在を初めて知ったという人に向けて「テーブル」の説明をします。
「テーブル」とは「表」のことです。テーブルを使えば情報をわかりやすくまとめることができて便利です。
テーブルの解説１：テーブルの縦軸を「カラム(列)」、横軸を「行」と呼ぶ
テーブルは縦横のマスからなります。WordPressではテーブルの横軸のことを「カラム(もしくは列)」、縦を「行」と呼んでいます。
カラム(列)：横軸
行：縦軸
覚え方
カラム(行)や列の区別がつかない人へ。よく言われる覚え方としては漢字の形で覚える方法があります。「行」は「二」の部分で横をイメージし、「列」は「II」の部分で縦をイメージする。
テーブルの解説２：テーブルの上にテーブルヘッダーと言われるタイトルを付けられる
テーブルの上には色が違う部分があると思います。この部分はテーブルヘッダー(table header：TH)と呼ばれ各項目のタイトルを記入するときに使います(ちなみに普通のセルの部分はtable data：TDと呼ばれます)。
テーブルヘッダー：TH
テーブルヘッダーは必ず使う必要はありません。必要な場合に使いましょう。
ブロックエディタでのテーブルブロックの使い方手順
それではブロックエディタで実際にテーブルブロックを使ってみましょう。
テーブルブロックの使い方を説明します。
テーブルブロックを呼び出す
まずはテーブルブロックを呼び出します。
記事の編集画面に移動してください。中央のパネルでテーブルブロックを出したい場所をクリックします⑴。そして左上のブロックインサーターボタンを押してください⑵。パネル内にあるテーブルブロックを選択しましょう⑶。テキスト欄の中にあります。
- テーブルブロックを出したい場所をクリック
- 左上のブロックインサーターボタンをクリック
- テーブルブロックを選択
すると中央の編集画面にテーブルブロックが追加されます。
これでテーブルブロックの呼び出しが完了しました。
カラム数と行数を決める
カラム数と行数を決めます。
カラム数と行数を決める
テーブルブロックを呼び出すとカラム数と行数を聞かれるので入力します。カラム数は横。カラム数を増やすと表が横に伸びていきます。行数は縦。行数を増やすと表が下に伸びていきます。
両方 入力したら表を作成ボタンを押しましょう。テーブルが出てきます。
カラム数と行数を調節する
間違えても大丈夫。カラム数と行数は後から変更できます。
編集中のテーブルブロックをクリックし、ツールバーの表を編集というところを押してください。カラム数、行数を増やしたり減らしたりする操作ができます。
- 行を上に挿入
- 行を下に挿入
- 行を削除
- 列を左に挿入
- 列を右に挿入
- 列を削除
コツ
カラムや行は区別が付きにくいと思います。そういうときは、「上に挿入」、「下に挿入」、「左に挿入」、「右に挿入」という部分からイメージしてください。
データを入力する
テーブルにデータを入力していきます。
セル内にデータを入力
セル内にデータを入力していきます。
ヘッダーセクションを出す(任意)
ヘッダーセクションが必要な場合はヘッダーセクションを出してデータを入力します。やり方はこちら↓。
- 編集中のテーブルブロックをクリック
- 右上の 設定ボタンを押す①
- パネルをブロックに切り替える②
- 設定 ＞ ヘッダーセクションのトグルをオンにする③
- ヘッダーセクションにデータを入力
その他の設定を紹介(任意)
その他の設定を紹介します。任意です。
セル内のデータを中央寄せ、右寄せする
ツールバーのカラムの配置を変更からセル内のデータを中央寄せしたり右寄せしたりできます。
やり方はこちら↓。
- 編集中のテーブルブロックをクリック
- 寄せたい当該カラムをクリック
- ツールバーのカラムの配置を変更(3本線マーク)をクリック
- 寄せ方を選ぶ
- カラムを左寄せ
- カラムを中央配置
- カラムを右寄せ
数字のデータは右寄せと相性が良さそう！
スタイルを変える
スタイル(デザイン)を変えます。やり方はこんな感じ↓
- 編集中のテーブルブロックをクリック
- 右上の 設定ボタンを押す①
- パネルをブロックに切り替える②
- パネルをスタイル"に切り替える③
- 好きなスタイルを選択する④
選べるスタイルは利用中のテーマで異なります。各テーマのマニュアルをご参照ください。
「テーブルブロック」の基本的な使い方はここまでです。初心者の人はここまでで十分です。