WordPress テーブル(表)ブロックの使い方・表の作り方

WordPress

WordPress テーブル(表)ブロックの使い方を徹底解説

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

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

(※)本記事では、WordPress5.6、無料テーマLightningを利用した環境で説明しています。
 


 

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

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

 

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

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

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

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

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

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

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

「表の設定」の「ヘッダーセクション」を選択すると、表の一番上にヘッダー行が表示されます。
表の一番上にヘッダー行を表示する
 

表にヘッダーの行が追加されました。ここではヘッダー(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円」部分が赤色文字になりました
 

太文字にする

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

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

行揃えを変更する

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


 

表のスタイルを変更する

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

■表のスタイルの変更


 

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

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

Swell独自の設定項目

 

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

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

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

ただし、表ブロック>HTMLとして編集から戻ると、表ブロックとしては編集ができなくなってしまうことに注意が必要です。「ブロックのリカバリーを試行」から表ブロックにリカバリーするか(編集した内容はリセットされます)、HTMLに変換またはクラシックブロックに変換する必要があります。
表ブロック>HTMLとして編集から戻ると、表ブロックが壊れる
 

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


 

他には、「Table Press」などのプラグインを利用して表を作る方法もあります。
TablePressプラグイン
 

まとめ

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

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

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

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

 

弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

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

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

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


 

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

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

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-, ,