WordPressのブロックエディタで表を作ろう!表(テーブル)ブロックの使い方

WordPressのブロックエディタで表を作ろう!表(テーブル)ブロックの使い方
さとしん

皆さんは記事の中で表を使っていますか…?

ひたすら文字が並んでいる文章よりも、表を使って表現されている方が分かりやすいと感じたことがありますよね。

たとえば…
  • 製品の仕様を比較する表
  • メリットデメリットを表現する表
  • サービスの価格表

WordPressのブロックエディタでは、簡単に表を作成することができる「表ブロック」が用意されています。

比較をするときには、表でまとめてあげるのが鉄板…!
この記事の内容まとめ
  • 表ブロックの基本的な使い方
  • テーマやプラグインで拡張される表のデザイン紹介

WordPressのテーマによっては、表ブロックの機能やスタイルが追加されていて、かなり使い勝手が向上しているものもあります。

さとしん

特に、スマホでも見やすい様に考慮されているテーマはありがたいです…!

目次

表ブロックの基本的な使い方

早速ブロックエディタ、表ブロックの使い方を解説していきます。

STEP
メインコンテンツエリアで+ボタンをクリック
ブロックの使い方
STEP
表を探してクリック
表ブロックの使い方-1
STEP
カラム数、行数を入力して「列の作成」ボタンをクリック

カラムは横方向、行は縦方向です。

表ブロックの使い方-2
STEP
各セルの中に必要項目を入力
表ブロックの使い方-3

見出し行の設定や装飾の変更は後述します。

これで、基本的な表ブロックの使い方は以上です。

ちなみに、ブロックエディタでは、段落ブロック内に「/ + ブロック名」を入力することでブロックを検索して呼び出すことができます。

表ブロックの場合は、以下の名称でブロックを呼び出すことができます。

  • /table
  • /テーブル
さとしん

覚えておくと便利ですよ…!

見出しの挿入はサイドバー「表の設定」から

サイドバー「表の設定」で表の要素を編集することができます。

設定できる内容は以下の3種類です。

  • 表のセル幅の固定
  • ヘッダーセクション
  • フッターセクション
表ブロックの使い方-4

表のセル幅の固定

通常はセル内の文字数に合わせて、セルの幅が変動していきます。

文字数に関係なく、セルの幅を一定にしたい場合は、この項目にチェックをいれましょう。

テキストがセル幅に収まりきらない場合は、自動で改行されます。

表ブロックの使い方-5

ヘッダーセクションとフッターセクション

表の1番上の行(ヘッダー)と下の行(フッター)が、他の行と違うスタイルになります。

例えば、表の項目名をヘッダーに、表の合計の数値をフッターに入力する。といった使い方ができます。

表ブロックの使い方-6

表のスタイルは2種類から選択

WordPress標準の機能として、2種類のスタイルが準備されています。

  • デフォルト
  • ストライプ

サイドバーの「スタイル」から以下の2種類が選択できます。

表ブロックの使い方-8

実際には以下の様に、表のデザインが変わります。

表ブロックの使い方-7

また、同様にサイドバーの「色設定」から、見出し(ヘッダーセクション)以外の背景色を一括で設定することができます。

表ブロックの使い方-9

特定セルだけ色を変えることは、現状のブロックエディタの標準仕様ではできません。

ブロックツールバーから行、列の追加や削除ができる

列や行の追加、削除はブロックツールバー「表の編集」から編集が可能です。

表ブロックの使い方-10

セル内のテキストの配置も「カラムの配置の変更」で設定できます。

表ブロックの使い方-11

また、セル内のテキストには一通りの装飾が可能です。セルの中に画像も配置することができます。

表ブロックの使い方-12

テーマ『SWELL』の表ブロックはデザイン豊富でスマホ表示への対応が凄い!

WordPressテーマ『SWELL』
SWELL』公式サイト

WordPress本体側で用意されている表ブロックですが、WordPressテーマや関連プラグインを使うことによって、便利機能が追加されたり、選択できるデザインを増やすことができます。

ブロックエディタ完全対応のWordPressテーマ『SWELL』では、追加のプラグインなど不要で、テーマを適用するだけで表ブロックの機能が拡張されます。

さとしん

SWELLの表ブロックは便利機能が盛りだくさんです…!

まず、SWELLの表ブロックでは以下2種類のスタイルが追加されます。

  • シンプル
  • 二重線
SWELLの表ブロック

また、1番左側の列を見出し風のデザインに変更することも可能です。

SWELLの表ブロック-2

セル幅の設定の自由度が高い

SWELLの表ブロックは、列ごとに最低限確保したいセル幅を指定することができます。

SWELLの表ブロック-3

WordPress標準の表ブロックでは、セル幅を固定するかどうかの設定しかできませんでした。

これだと、セル幅を固定させない場合、セル内の文字数次第で、列の幅に大きく差ができてしまいます。

これを防ぐために、周りのセルのコンテンツに関係なく、必ず確保したいセルの幅を数値で指定することができます。

スマホ表示への対応も豊富

比較表などを作っていると、列数が増えて、横長の表になることも多いです。

そんな時に、スマホだとかなり見にくい表になってしまうこともあります。

SWELLでは、スマホで見た時のレイアウトが以下の3種類から選択できます。

  • 縦並びにする
  • テーブルヘッダーを固定表示する
  • 横にスクロールさせる

縦並び

SWELLの表ブロック-4

横にスクロールさせる

SWELLの表ブロック-5

縦並びにすることで、通常横並びになる列を縦に並べて表示することができます。

また、横にスクロールは、スマホ画面からはみ出した部分を、スクロールすることで表示できるようになります。

しかも、スクロールできる表の時には「スクロールできます」というコメントが自動で表示されます。

さとしん

今はスマホからの閲覧者が多いので、この機能は本当に助かります…!

表をうまく組み込んで分かりやすいコンテンツを作っていきましょう

何かを比較したり、複数の項目を並べて表示したいときに表を作ることはとても重要です。

ブロックエディタの「表ブロック」は簡単に使えるので、使い方も必ず覚えておきたいです。

また、今の時代はサイト訪問者もスマホから閲覧する割合が多いと思います。

横に長くなりがちな表は、スマホから見にくくなってしまうことも多いです。

スマホから見た時の表のレイアウトにも配慮されているテーマやプラグインを使うことは、訪問者のためにも効果的です。

今回紹介した『SWELL』の表ブロックは、現状の表ブロックの中でも圧倒的に高機能で使いやすいと感じています。

WordPress標準の表ブロックでは少し物足りないと感じる場合は、『SWELL』の導入もぜひ検討して見てください。

ブロックの細かい機能ひとつひとつもテーマ選びの判断材料になると思っています。

ブロックエディタで楽しくコンテンツを作っていきましょう。

最後まで読んでいただきありがとうございました!

WordPressのブロックエディタで表を作ろう!表(テーブル)ブロックの使い方

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

この記事を書いた人

WordPressが好きで毎日触って勉強しています。ブロックエディタが好きです!WordPressやブロックエディタに馴染めず困っている人の役にたてたら嬉しいなぁと思いながら、このサイトを運営しています!

目次
閉じる