WordPressを利用してホームページを作成する際に料金表などの表を作りたい人もいるのではないでしょうか。
今回は「WordPressブロックエディタ（Gutenberg）」を使い「表(テーブル)」を作る方法を解説します。
(※)本記事では、WordPress5.6、無料テーマLightningを利用した環境で説明しています。
(関連記事)WordPress表プラグインTablePress
シンプルな表・テーブルが作成できれば十分な場合は「ブロックエディターのテーブルブロック」でも対応できますが、TablePressという表作成プラグインを利用すると、標準的な表に加えて、並べ替えやフィルタリングなど便利な機能を表に追加することもできます。
TablePressの使い方については「【TablePressの使い方】WordPress表作成プラグイン」をご参照ください。
もくじ
(関連記事)ブロックエディターの使い方について
本記事では、カラムブロックの使い方に絞って説明していますが、エディターの使い方全体を勉強したい方は「【徹底解説】WordPressブロックエディターの使い方」を合わせてご参照ください。
列数・行数を指定して表(テーブル)を作成する
今回はWordPressの表ブロックを利用して下記の表を作成していきます。
まず、ブロック追加「＋」をクリックして「表」を選択します。
「列数」「行数」をそれぞれ指定します。ここでは初期状態「列数：2」「行数：2」で表を作成します。※列数・行数に関しては後からでも追加変更できます。
2列2行の表が作成されました。
中身を入力していきます。
右上のアイコンをクリックしましょう。右に表ブロックのメニューバーが表示されます。
「表の設定」の「ヘッダーセクション」を選択すると、表の一番上にヘッダー行が表示されます。
表にヘッダーの行が追加されました。ここではヘッダー（１行目）に相当する文言「セミナー名」「参加費用」を入力します。
これで、基本的な表が作成できました。
行・列を追加・削除する
作成した表に対してあとから行数や列数を増やしたり減らしたりすることができます。
次に、行や列を編集してみましょう。
列を追加する
ここでは先ほど作成した表に対して、一番右に列を追加していきます。
2列目(参加費用の列です。行数はどこでも構いません)のマウスのカーソルを合わせておき（クリックしておき）、表の編集アイコン＞列を右に挿入をクリックします。
参加費用列の右に新しい「列」が作成できました。
3列目に中身の文言を入力します。ここでは例として3列目に開催形式を入力しました。
行を追加する
次に行を追加する例を説明します。
3行目(HTML・CSSセミナーの行。列はどこでも構いません)にカーソルを合わせ(クリックして)、表の編集アイコン＞行を下に挿入をクリックします。
4行目が追加されました。
4行目に中身の文言を入力します。ここでは、例として4行目に「ブログ入門セミナー」という内容を追加しました。
行・列を削除する
同様のやり方で、追加した行や列を削除することもできます。削除したい列や行にカーソルを合わせて「表の編集」から列や行を削除できます。
表(テーブル)の中の文字・スタイルを装飾する
表の中の、セル内の文字を装飾することができます。ここからは、よく使う文字の装飾・スタイルの変更について説明していきます。
取り消し線を入れる
ここでは、ブログ入門セミナーのに参加費用「5000円」を選択して「取り消し線」を入れます。
取り消し線が入力されました。
文字色を設定する
次に、5000円の下に「→初開催キャンペーン3,000円」と追記して、赤文字にしてみましょう。「→初開催キャンペーン3,000円」を選択して文字色を選択します。
赤色を選択して、文字を赤くしましょう。
「→初開催キャンペーン3,000円」部分が赤色文字になりました。
太文字にする
つぎに、「→初開催キャンペーン3,000円」を太文字にします。該当部分を選択した状態で太文字「B」をクリックします。
「→初開催キャンペーン3,000円」が赤い太文字になりました。
行揃えを変更する
行揃えアイコンをクリックすると、「左揃え」「中央揃え」「右揃え」を列ごとに変更することができます。
表のスタイルを変更する
右側メニューから表のスタイルが設定を変更することもできます。
■表のスタイルの変更
表のスタイルをオリジナル(HTMLの編集など)にしたい場合
表ブロックのオリジナルデザインに編集したい場合は詳細アイコン＞HTMLとして編集することができます。
表ブロックのHTMLの編集画面。クラス名やCSSスタイルなど入力できます。
ただし、表ブロック＞HTMLとして編集から戻ると、表ブロックとしては編集ができなくなってしまうことに注意が必要です。「ブロックのリカバリーを試行」から表ブロックにリカバリーするか(編集した内容はリセットされます)、HTMLに変換またはクラシックブロックに変換する必要があります。
HTMLやCSSで編集できる人は、表ブロックをクラシックブロックなどに変換して運用すると良いでしょう。
他には、「Table Press」などのプラグインを利用して表を作る方法もあります。
まとめ
まとめです。今回は、WordPressのブロックエディターで表を作成する方法を解説しました。
テーブル(表)ブロックを利用すると、HTMLを知らない人でも簡単に料金表などの表を作成できるので便利です。
ただし、現状表のデザイン変更が少し不便な場合があります。その場合はカスタムHTMLで表を入力したり追加CSSで編集したり、「Table Pressなどのプラグインを活用したりなど代替案を考える必要があります。
今回は以上になります。最後までご覧いただきありがとうございました。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
