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

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

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

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

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

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

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

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

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

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

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

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

表のセル幅の固定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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