本記事は広告が含まれる場合があります WordPressエディター操作

【WordPressテーブルブロック】表の作り方・編集方法

WordPressを利用してホームページを作成する際に料金表などの表を作りたい人もいるのではないでしょうか。

今回は「WordPressブロックエディタ(Gutenberg)」を使い「表(テーブル)」を作る方法を解説します。
表ブロックの表示例
 

(※)本記事は2023年7月時点で更新した内容です。無料テーマLightningを利用した環境で説明していますが、ご利用の環境によって画面が異なる場合がありますのでご了承ください。

 

(関連記事)ブロックエディターの使い方について

ブロックエディター の概念

本記事では、テーブルブロックの使い方に絞って説明していますが、エディターの使い方全体を勉強したい方は「【徹底解説】WordPressブロックエディターの使い方」を合わせてご参照ください。

 

列数・行数を指定して表(テーブル)を作成する

今回はWordPressの表ブロックを利用して下記の表を作成していきます。
表ブロックのサンプル

 

まず、ブロック追加「+」をクリックして「表」を選択します。
表ブロックを追加

 

「列数」「行数」をそれぞれ指定します。ここでは初期状態「列数:2」「行数:2」で表を作成します。※列数・行数に関しては後からでも追加変更できます。
「列数」「行数」をそれぞれ指定して表を作成

 

2列2行の表が作成されました。
表が作成された

 

中身を入力していきます。
表に中身を入力

 

右上のアイコンをクリックしましょう。右に表ブロックのメニューバーが表示されます。ブロックの設定表示アイコン

 

「settings」タブにある「ヘッダーセクション」を選択すると、表の一番上にヘッダー行が表示されます。
ヘッダーセクションの切り替えボタン

 

表にヘッダーの行が追加されました。ここではヘッダー(1行目)に相当する文言「セミナー名」「参加費用」を入力します。
テーブルブロックにヘッダーセクションを追加したもの

 

これで、基本的な表が作成できました。

 

行・列を追加・削除する

作成した表に対してあとから行数や列数を増やしたり減らしたりすることができます。

次に、行や列を編集してみましょう。

 

列を追加する

ここでは先ほど作成した表に対して、一番右に列を追加していきます。
一番右に列を追加

 

2列目(参加費用の列です。行数はどこでも構いません)にマウスのカーソルを合わせておき(クリックしておき)、表の編集アイコン>列を右に挿入をクリックします。
「列を右に挿入」をクリック

 

参加費用列の右に新しい「列」が作成できました。
参加費用列の右に新しい「列」が作成された

 

3列目に中身の文言を入力します。ここでは例として3列目に開催形式を入力しました。
例として3列目に開催形式を入力

 

行を追加する

次に行を追加する例を説明します。
一番下に行を追加

 

3行目(HTML・CSSセミナーの行。列はどこでも構いません)にカーソルを合わせ(クリックして)、表の編集アイコン>行を下に挿入をクリックします。
表の編集アイコン>行を下に挿入

 

4行目が追加されました。
4行目が追加されました

 

4行目に中身の文言を入力します。ここでは、例として4行目に「ブログ入門セミナー」という内容を追加しました。
4行目に「ブログ入門セミナー」という内容を追加

 

行・列を削除する

同様のやり方で、追加した行や列を削除することもできます。削除したい列や行にカーソルを合わせて「表の編集」から列や行を削除できます。

 

表(テーブル)の中の文字・スタイルを装飾する

表の中の、セル内の文字を装飾することができます。ここからは、よく使う文字の装飾・スタイルの変更について説明していきます。

 

取り消し線を入れる

ここでは、ブログ入門セミナーの参加費用「5000円」を選択して「取り消し線」を入れます。
「5000円」を選択して「取り消し線」をクリック

 

取り消し線が入力されました。
取り消し線が入力されました

 

文字色を設定する

次に、5000円の下に「→初開催キャンペーン3,000円」と追記して、赤文字にしてみましょう。「→初開催キャンペーン3,000円」を選択してハイライトを選択します。
「ハイライト」をクリック

 

赤色を選択して、文字を赤くしましょう。
文字色を赤色に変更する

 

「→初開催キャンペーン3,000円」部分が赤色文字になりました。
「→初開催キャンペーン3,000円」部分が赤色文字になりました

 

太文字にする

つぎに、「→初開催キャンペーン3,000円」を太文字にします。該当部分を選択した状態で太文字「B」をクリックします。
、「→初開催キャンペーン3,000円」を選択して太文字「B」をクリック

 

「→初開催キャンペーン3,000円」が赤い太文字になりました。
「→初開催キャンペーン3,000円」が赤い太文字になった

 

行揃えを変更する

行揃えアイコンをクリックすると、「左揃え」「中央揃え」「右揃え」を列ごとに変更することができます。

 

※WordPress6.2.2時点では、特定のセルだけの行揃えを変更することはできません。

 

表のセル幅(列幅)を固定する

表のセル幅(列幅)は、1行の文字数によって、自動的に伸縮設定されます。幅を固定したい場合は、「Settings」タブにある「表のセル幅を固定」を選択します。右メニューバー>表のセル幅を固定

 

■セル幅の固定

 

表のスタイルを変更する

右側メニューの「Styles」タブから表のスタイルを変更することもできます。
右メニューバー>表のスタイル設定

 

■表のスタイルの変更


 

表の列幅の調整がうまくできない場合

WordPressの表のセル幅(列幅)は、1行の文字数によって、自動的に伸縮設定されます。

残念ながらWordPress6.2時点でWordPress標準機能でテーブルの列幅を任意の割合で調整することはできません

代わりにテーマによっては独自項目があります。

下記は「Swell(スウェル)」という有料テーマの表ブロックです。テーマによっては、独自のスタイルや設定項目が追加されている場合があります。
Swell独自のスタイル
 
Swell独自の設定項目
 

幅調整機能がないテーマでどうしても調整がしたい方は、後述のHTMLに変換などしてCSSなどで幅調整する必要があります。
 

表のスタイルをオリジナル(HTMLの編集など)にしたい場合

表ブロックのオリジナルデザインに編集したい場合は詳細アイコン>HTMLとして編集することができます。
表ブロック>HTMLとして編集

 

表ブロックのHTMLの編集画面。クラス名やCSSスタイルなど入力できます。
表ブロック>HTMLとして編集

 

ただし、表ブロック>HTMLとして編集から戻ると、表ブロックとしては編集ができなくなってしまうことに注意が必要です。

CSSで引き続き編集・スタイル調整する場合はクラシックブロックに変換(またはHTMLに変換)する必要があります。※「ブロックのリカバリーを試行」から表ブロックにリカバリーすると編集した内容はリセットされるため注意。
表ブロック>HTMLとして編集から戻ると、表ブロックが壊れる

 

HTMLやCSSで編集できる人は、表ブロックをクラシックブロックなどに変換して運用すると良いでしょう。

 

他には、「Table Press」などのプラグインを利用して表を作る方法もあります。
TablePressプラグイン
 
TablePressの使い方については「【TablePressの使い方】WordPress表作成プラグイン」をご参照ください。

 

まとめ

まとめです。今回は、WordPressのブロックエディターで表を作成する方法を解説しました。
表ブロックの表示例

 

テーブル(表)ブロックを利用すると、HTMLを知らない人でも簡単に料金表などの表を作成できるので便利です。

ただし、現状WordPress6.2時点では幅調整を始め表のデザイン変更が少し不便な点があります。

その場合はカスタムHTMLで表を入力したり追加CSSで編集したり、Table Pressなどのプラグインを活用したりなど代替案を考える必要があります。

 

今回は以上になります。最後までご覧いただきありがとうございました。

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-WordPressエディター操作
-