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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

表のセル幅の固定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

No.	項目1	項目2	項目3	項目4	項目5	項目6
1	テキストテキスト	テキストテキスト	テキストテキスト	テキストテキスト	テキストテキスト	テキストテキスト
2	テキストテキスト	テキストテキスト	テキストテキスト	テキストテキスト	テキストテキスト	テキストテキスト

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

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

表の1番上の行を固定

No.	項目1	項目2
1	テキストテキスト	テキストテキスト
2	テキストテキスト	テキストテキスト
3	テキストテキスト	テキストテキスト
4	テキストテキスト	テキストテキスト

表の1番左の列を固定

No.	項目1	項目2	項目3	項目4	項目5	項目6
1	テキストテキスト	テキストテキスト	テキストテキスト	テキストテキスト	テキストテキスト	テキストテキスト
2	テキストテキスト	テキストテキスト	テキストテキスト	テキストテキスト	テキストテキスト	テキストテキスト

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

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

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

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

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

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

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

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

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

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

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

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

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

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