株式会社火燵(こたつ)は、成果や売上にこだわる方のための動画マーケティング会社です。動画コンサルティング・動画制作・WEBマーケティング・動画制作内製化支援ならお任せください。

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

その他

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

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

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

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

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

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

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

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

プラスボタンから「テーブル」ブロック選択
エディタ画面の「ブロックを追加」から「テーブル」ブロック選択
左上のプラスボタンからメニューを開いて「テーブル」ブロックを選択
画面左上プラスボタンからメニューを開き「テーブル」ブロック選択
  1. 挿入するテーブルのカラム数と行数を記入します。
    テーブルブロックの挿入画面
    カラム数は、列数のことです。
    テーブルのカラムと行
  2. 記入できたら、「表を作成」をクリックして挿入しましょう。
  3. 挿入できました。
    テーブルブロック挿入完了
テーブルの操作方法(アニメーション)
テーブルの挿入方法

スタイルを変更する

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

テーブルスタイル
デフォルト
枠線のみのスタイル
ストライプ
枠線を消して奇数行の背景色を変える
テーブルスタイルの切り替え(アニメーション)
テーブルのスタイル選択

配置変更

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

配置を変更メニュー

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

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

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

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

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

表の設定

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

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

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

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

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

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

色設定

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

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

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

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

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

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

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

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

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

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

カラフルなテーブルの例

行と列の追加・削除

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

表の編集メニュー

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

結合セルのある表

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

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

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

表のキャプション

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

表のキャプションエリア

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

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

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

画像を挿入する

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

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

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


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

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

WordPressレクチャーシリーズ一覧

「その他」の関連記事


新着記事