WEBサイト制作

WordPress 表(テーブル)ブロックの使い方~実際に作ってみよう!

WordPressのブロックエディタ(Gutenberg/グーテンベルク)の投稿で「表」を作る方法を解説します。

表」=「table」
「表」はHTML的には「table」になります。
ブロックエディタでテーブルを作る方法の解説です。

以前のクラシックエディタで表を作る方法とは異なっています。表の作成だけに関して言うと、以前のエディタの方が細かな設定ができますが、ブロックエディタは徐々に機能も追加されて使いやすくなっています。ブロックエディタで表を作る機会は今後増えてくると思うので、使い方をマスターしておきましょう。

今回は、実際に表を作りながら、機能や作成方法をご紹介していきます。
ステップ1として、まずはこちらを作ります。

表(イメージ)
※表のサンプルです

ステップ2では、ステップ1の表を編集してこちらを作ります。

表(イメージ)
※表のサンプルです

銀座久兵衛の料金を引用しています。食べたいですね。。金額などはあくまでサンプルとして捉えてくださいね。
では、解説していきます。

列数・行数を指定して表を作成する

「見出し」や「段落」などを作る要領で「表」を選択します。

表を選択(イメージ)

「列数」「行数」をそれぞれ指定します。

表の行・列数を指定(イメージ)

今回は、表のヘッダー部分(表のサンプルの「メニュー」「料金」箇所)は列・行数には入らないので、「列数:2」「行数:3」で表を作成します。

表(イメージ)

2列3行の表が作成されました。メニュー名と金額を入れていきます。表下部のキャプションに注意書きを入れます。

表(イメージ)

表のどこかにカーソルがある状態にすると、表の設定画面が右側に出てきます。「ヘッダーセクション」を選択状態します。

表のヘッダー挿入(イメージ)

表にヘッダーの行が追加されました。「メニュー」「料金」と入力します。

表(イメージ)

<HTMLの解説>
ヘッダーセクションを追加すると次のようなソースになります。
<table><thead><tr><th>〇</th><th>〇</th></tr></thead>・・・</table>
フッターセクションを追加すると次のようなソースになります。
・・・<tfoot><tr><td>〇</td><td>〇</td></tr></tfoot></table>

表のセル(カラム)の左寄せ・中央配置・右寄せにする

表のセル(カラム)の文字の位置を調整することができます。今回は「カラムを中央配置」します。

表のセンター揃え(イメージ)

※現在(2020/6)のブロックエディタでは、1箇所だけ右寄せにしたいなどの設定ができません。列ごとの設定になっています。

表(イメージ)

最後に、段落ブロックで「寿司懐石」と入れて表のタイトルとしました。プレビューで見てみましょう。

表(イメージ)

ステップ1はこれで完成です。
次より、さらに表をブラッシュアップしていきます。

行・列を追加/削除する

先ほど作った表を少し修正していきます。
一度作った表について、行・列の追加、行・列の削除が行えます。

表の行列の追加・削除(イメージ)

今回は「右に列を追加」してみます。

表(イメージ)

右側に1列追加されました。「特別料金」を入力します。

表(イメージ)

表のなかの文字を装飾する

セル内の文字を装飾することができます。
もともとあった「料金」列の金額にカーソルをあてて「取り消し線」を入れます。

表の文字スタイル変更(イメージ)

「特別料金」の列の金額にカーソルをあてて「文字色」を選択。赤色にします。

表の文字スタイル変更(イメージ)

このようになりました。

表(イメージ)

プレビューで見てみましょう。

表(イメージ)

うまく表示されていますね。ちょっとお得に見えますね!?
これでステップ2も完成です。

最後にいくつか表の細かな設定方法を紹介します。

セル幅を固定する

表のなかの文字量によって、表のセル幅は自動的に伸縮されます。これはこれで便利ですが、幅を固定したい場合もあります。その際は、「表のセル幅を固定」を選択します。

表のセル幅固定(イメージ)

列の幅が均等になりました。

表(イメージ)

※使用しているWordPressのテンプレートによって、ユーザー画面上どう見えるかが異なる場合があります。

表の背景を装飾する

ストライプのデザインが用意されています。右側の設定画面から変更します。

表のスタイル(イメージ)

背景色の変更もできます。右側の設定画面から変更します。

表の背景色変更(イメージ)

※現在(2020/6)のブロックエディタでは、表全体の背景色の指定になります。特定セルだけ背景色を変える設定はできません。

WordPressのブロックエディタ(Gutenberg/グーテンベルク)で表を作成する方法を解説しました。ブロックエディタはまだまだ発展途上なので、表の機能も修正・追加がどんどん行われると思います。紹介した機能がすでに変更されてる場合もあるのでご了承ください。

Share