WordPressで表を挿入する方法【初心者向け/WordPressの使い方】

みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。

今回は、WordPressで表を挿入する方法をお伝えいたします。

テーブルブロックアイコン

データや比較などの表を記事に入れたいときは、「テーブル」ブロックを使いましょう。このブロックでは、簡単な表を作成できます。

エクセルやGoogleスプレッドシートで作成した表を入れたい場合は、コピーペーストすれば挿入できます。ただし、セルに適用していた色や文字装飾は、すべて消えてしまいます。ご注意ください。

表をGoogleスプレッドシートからWordPressにコピーペースト(アニメーション)

テーブルブロックを挿入する

「テーブル」ブロックを選択します。

プラスボタンから「テーブル」ブロック選択
エディタ画面の「ブロックを追加」から「テーブル」ブロック選択
左上のプラスボタンからメニューを開いて「テーブル」ブロックを選択
画面左上プラスボタンからメニューを開き「テーブル」ブロック選択
挿入するテーブルのカラム数と行数を記入します。
テーブルブロックの挿入画面

カラム数は、列数のことです。

テーブルのカラムと行
記入できたら、「表を作成」をクリックして挿入しましょう。
挿入できました。
テーブルブロック挿入完了
テーブルの操作方法(アニメーション)
テーブルの挿入方法

スタイルを変更する

表のデザインは、右メニューバーから2種類より選べます。

テーブルスタイル
デフォルト

枠線のみのスタイル

ストライプ

枠線を消して奇数行の背景色を変える

テーブルスタイルの切り替え(アニメーション)
テーブルのスタイル選択

配置変更

ブロックメニューから、表全体の配置を左寄せ、中央揃え、右寄せにできます。

配置を変更メニュー

もう一度選択すると解除され、横幅いっぱいに配置されます。

表の配置変更(アニメーション)

列内の文字位置も、ブロックツールから変更できます。デフォルトだと左寄せですが、中央や右寄せにもできます。

テキストの配置を変更
カラムのテキストの配置を変更(アニメーション)

ただし、エクセルのように個別セルでの文字配置変更はできません。あくまで列ごとのみです。

表の設定

右メニューバーから、以下の3つを設定できます。

表の設定メニュー
  • 表のセル幅を固定
  • ヘッダーセクション
  • フッターセクション

表のセル幅を固定」は、各列の幅を統一してくれます。
セルによって文字数が違う表で、幅がアンバランスになる場合にオススメです。

ヘッダーセクション」と「フッターセクション」は、項目名を記述するための行を新しく追加します。
「ヘッダーセクション」は表の一番上に、「フッターセクション」は一番下に追加されます。

行数が長い表なら、「フッターセクション」に「ヘッダーセクション」の項目名と同じ文言を入れるのをオススメします。これなら、一番上の行がスクロールで隠れても、それぞれの列が何なのかが分かります。

長い表のヘッダーとフッターのセクションに同じ項目名を入れた例(アニメーション)

色設定

テーブルの色設定メニュー

右メニューバーから、表全体の文字や背景の色を変更できます。

文字色を変更すると、枠線も同じ色になります。

テキスト色を変更したテーブル

背景色は、「デフォルト」スタイルだと表全体が変わります。

背景色を変更したデフォルトスタイルのテーブル

「ストライプ」スタイルの場合は、ヘッダーとフッター、偶数行の背景色が変わります。

背景色を変更したストライプスタイルのテーブル

他にもセルや列、行ごとに背景色を変えたいところですが、2021年8月現在のGutenbergではできません。これが、エクセルから表をコピペしたときに、色が消える理由です。

そのため、このような色つきテーブルは作れません。

カラフルなテーブルの例

行と列の追加・削除

ブロックツールバーにある、表のようなアイコンからは、行や列の追加、削除ができます。

表の編集メニュー

ですが、エクセルのように行や列、セルの結合はできません

結合セルのある表

このような結合セルがある表を、エクセルからコピーペーストすると崩壊します。

結合セルのある表をGoogleスプレッドシートからWordPressにコピーペースト(アニメーション)

結合しない表に整えてから、コピーペーストしましょう。

表のキャプション

表の下にある小さなテキストエリアには、説明が入れられます。

表のキャプションエリア

必須ではありませんが、画像ブロックと同じく、この表が何なのか分かるように記述しておきましょう。

表のキャプション文字装飾(アニメーション)

文字装飾も使えます。詳しくは下記ページをご覧ください。

画像を挿入する

セル内に画像を入れたい場合は、「インライン画像」を使用しましょう。

テーブルにインライン画像を挿入(アニメーション)

「インライン画像」の挿入方法については、こちらの「インライン画像を挿入」の項目をご覧ください。


以上、表の挿入や編集方法を解説しました。

その他のブロックについての解説は、WordPressレクチャーからご覧ください。

関連の事業・サービスの詳細はこちら!
動画を活用した完全成果報酬型のWebコンサルティング
WordPressのログイン画面と投稿管理画面
WordPressの使い方 シリーズ
火燵でも利用しているCMS「WordPress」の使い方です。

ただいま、多くのお問い合わせをいただいております。電話対応スタッフが不在の時は、折り返します。

受付時間 平日10:00~17:00(土日祝除く)

東京オフィス
香川オフィス