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

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

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

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

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

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

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

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

この記事では、デフォルトの表ブロック(テーブルブロック)の使い方に加えて、かなり機能が強化されているWordPressテーマ『SWELL』の表ブロックの特徴についても紹介していきます。

さとしん

使い方を覚えて効果的な表を作っていきましょう…!

目次

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

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

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

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

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

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

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

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

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

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

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

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

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

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

表ブロックでは、セルの結合はできません。

どうしても結合が必要な場合は、クラシックブロックを使うなど、別の方法を検討する必要があります。

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

表のセル幅の固定

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

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

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

表ブロックの使い方-5

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

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

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

表ブロックの使い方-6

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

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

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

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

表ブロックの使い方-8

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

表ブロックの使い方-7

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

表ブロックの使い方-9

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

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

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

表ブロックの使い方-10

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

表ブロックの使い方-11

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

表ブロックの使い方-12

テーマ『SWELL』の表ブロックはPC表示、スマホ表示ともに超高機能!

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

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

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

さとしん

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

SWELLの表ブロックは、デフォルトの表ブロックから以下の点が強化されています。

  • 表スタイルの追加
  • セル幅の設定の自由度が高い
  • 横長の表で横スクロールができる
  • 表の1行目と1列目を固定表示できる

それぞれ紹介していきます。

SWELL独自のスタイル、設定が追加される

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

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

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

SWELLの表ブロック-2

さらに、スマホ表示の時に表を縦並びで表示することができます。

通常の表示

SWELLの表ブロック-2

縦並びの表示

SWELLの表ブロック-3

上の例だと分かりにくいですが、セルの中の文章が長い時などに縦並び表示を使うと便利です。

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

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

SWELLの表ブロック-3

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

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

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

以下の画像の、上がデフォルトの表、下がSWELLの表です。下の表では最低限維持する幅を「約10%」に設定しています。

SWELLの表ブロック
さとしん

SWELLの表では、左側の列が改行されずに表示されました…!

横長の表で横スクロールができる

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

そんな時に、画面の中に収めようとしてとても窮屈な表になってしまいます。

SWELLでは、PC、スマホ表示ともに表を横にスクロールすることができます。

更に以下の表のように、スクロールできる表の場合「スクロールできます」というコメントが自動で表示されます。

スクロールできます
No.項目1項目2項目3項目4項目5項目6
1テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
2テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
横に長い表はスクロールできる
さとしん

画面内に収める必要がないので窮屈感が無くなります…!

表の1行目と1列目を固定表示できる

また、表の1行目と1列目を固定表示することができます。

表の1番上の行を固定

No.項目1項目2
1テキストテキストテキストテキスト
2テキストテキストテキストテキスト
3テキストテキストテキストテキスト
4テキストテキストテキストテキスト
表の1番上を固定

表の1番左の列を固定

スクロールできます
No.項目1項目2項目3項目4項目5項目6
1テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
2テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
表の1番左の列を固定

横長の表や縦長の表で、スクロールする場合に、見出しの行が見えなくなってしまうことがあります。

そんな時に、見出し行を固定してあげると、より見やすい表になります。

このように、SWELLの表ブロックはものすごく便利な機能が追加されているので、かなり重宝しています。

さとしん

他の有名なブログテーマでは、ここまで高機能な表は無いはずです…!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この記事を書いた人

WordPressとSWELLが好きな20代のブロガー。
ブロックエディターに出会ってWordPressが楽しくなりました。
WordPressのこと、SWELLのこと、ブロックエディターのことを熱く語るブログです。

目次
閉じる