WordPressの表を完全解説!作成方法からカスタマイズまで

会社概要や料金表など、情報を整理して伝えたいときに有効なのが表です。

WordPressには標準で表作成の機能が搭載されています。
さらにプラグインの導入やCSSコードの記述によって、よりわかりやすい表を作成することも可能です。

今回はWordPressにおける表の作成・カスタマイズ方法について解説します。

WordPress工房はWordPress専門の制作サービスです。国内トップクラスの低価格と高品質。まずはお気軽にご相談ください。
≫サービス詳細を見てみる

目次

方法① WordPressの基本機能を使って表を作成する

WordPressには元から表(テーブル)の作成機能があります。
以下、表の作成方法になります。

STEP
ブロックエディタの「テーブル」を選択

WordPressの管理画面から表を挿入したい箇所で、ブロックエディタの「+」アイコンをクリックし「テーブル」を選択します。

「テーブル」を選択
STEP
表の作成

作成したいテーブルの行(横)・列(縦)を指定し「テーブルを作成」をクリックします。

表を作成
STEP
表の基本的な編集

STEP2で空の表が作成されました。
セルをクリックすることでテキストを入力することができます。

表の基本的な編集

また、ブロックエディタのアイコンをクリックすることで行・列の追加や削除も可能です。

表を編集
行・列の編集

方法② 表計算ソフトをから表をコピペする

以下のような表計算ソフトを使ってWordPress内に表を挿入することができます。

  • Googleスプレッドシート
  • Excel
  • Numbers

ここではGoogleスプレッドシートの画面を例に表の作成例を解説します。

STEP
表計算ソフト内の表をコピー

表計算ソフトを開き、表の範囲を指定して右クリックから「コピー」を選択します。
(表は前もって作成しておいてください)

表のコピー
STEP
コピーした表をWordPressに貼り付け

WordPress管理画面を開き、表を挿入したい箇所で右クリックして「貼り付け」を選択します。

右クリックで貼り付け

以上で表の挿入は完了です。
貼り付け後の表はWordPress内で自由に編集できます。

貼り付け完了

表計算ソフトでのデザイン(セル・文字の色や大きさなど)を反映させることはできません。
表のデザインを変更したい場合は、貼り付け後にWordPress内で調整しましょう。

補足:画像として表を挿入する

WordPress内で表を使う方法とは少しずれますが、画像にした表を貼り付ける方法もあります。

STEP
表のスクリーンショットをとる

表計算ソフトで表を作成し、スクリーンショットをとります。

STEP
WordPressに表を貼り付け

WordPressの開き、表を挿入したい箇所に画像を挿入します。

画像として貼り付け

以上で表の挿入は完了です。
挿入後に表を編集することはできませんが、表計算ソフトで作成したデザインをそのまま使用することができます。

画像の貼り付け後

方法③ プラグインを使って表を作成する

表作成におすすめのプラグインを2つ紹介します。
それぞれ特徴が異なりますので、見比べて必要な機能があるものを使ってみてください。

TablePress

TablePress

TablePressの特徴は、表にさまざまな機能を追加できる点です。
ページを見たユーザーは表内の検索や表示件数の調整といったことができます。
多くのデータを表として扱う方にとってかなり便利なプラグインだと言えます。

STEP
プラグインをインストールし有効化
TablePressインストール
STEP
表の作成

管理画面の「TablePress」から「新しいテーブルを追加」をクリックし、以下の編集画面から表を作成します。
表の作成が終わったら「変更を保存」をクリックし、ショートコードをコピーしておきます。

表の編集
STEP
表の貼り付け

STEP2でコピーしたショートコードを任意のページに貼り付けて完了です。
これで機能付きの表が表示されます。

TablePressの表

Flexible Table Block

Flexible Table Block

Flexible Table Blockの特徴は、表デザインのカスタマイズ性が高いことです。
クリック操作で以下のようなことができます。

  • セルの結合
  • テーブルのスクロール設定
  • 枠線のカスタマイズ
  • セルの高さ
  • セルの横幅
  • セルごとの色の調整
STEP
プラグインをインストールし有効化
Flexible Table Blockインストール
STEP
Flexible Table Blockを開く

ブロックエディタの「+」アイコンをクリックし「Flexible Table Block」を開きます。

Flexible Table Blockを開く
STEP
表の編集

カラム数・行数を入力して表を作成します。
テーブルにカーソルがある状態で画面右側タブの「ブロック」から表の編集が行えます。

Flexible Table Blockカスタマイズ

表の基本的なカスタマイズ

テーブルのスタイルを変更する

スタイルとは表の大まかなデザインのことです。

STEP
テーブルにカーソルがある状態で画面右側タブの「ブロック」をクリック
テーブルのスタイル
STEP
任意のスタイルを選ぶ
スタイル変更後

上図は「ストライプ」を選んだ場合のテーブルになります。
WordPressテーマによって選べるスタイルの数が異なります。

カラムの配置を変更する

カラム(縦列)の文字の並びをまとめて「左寄せ」「中央寄せ」「右寄せ」のいずれかに変更する方法です。

STEP
並びを変えたいカラム上にカーソルを置き、画像下の赤枠アイコンをクリック
カラムの配置
STEP
表示された配置から1つを選んでクリック
カラムの配置変更後

カラムではなく横一行の配置を変更するにはCSSを使用してください。

テキスト・背景の色を変更する

STEP
テーブルにカーソルがある状態で画面右側タブの「ブロック」をクリック
色の変更
STEP
「色」の「背景」または「テキスト」から任意の色を選択
色を選択

以下、色変更後のテーブルになります。

テキストの色を変更
テキストの色を変更
背景の色を変更
背景の色を変更

基本的にテーブル全体の色が変更されます。
テーブルの一部だけ色を変えたい場合はプラグインまたCSSを使用してください。

ヘッダー・フッターセクション

ヘッダーまたはフッターセクションはテーブルの最初または最後に挿入される行のことです。

STEP
テーブルにカーソルがある状態で画面右側タブの「ブロック」をクリック
「ブロック」をクリック
STEP
「設定」のヘッダーまたはフッターセクションの表示をオンにする
ヘッダーまたはフッターセクションの表示をオン

ヘッダーラベルはデフォルトで中央寄せになっています。

画像の挿入

テーブル内のセルには基本的に文字しか入力できませんが、インライン画像を使うことで画像を挿入することができます。

STEP
画像を挿入したい箇所にカーソルを置き、「さらに表示」のアイコンをクリック
さらに表示
STEP
インライン画像をクリックし、挿入する画像を選択
インライン画像

画像を選択したら挿入は完了です。

画像挿入
STEP
画像のサイズ調整

インライン画像をクリックすると幅を調整でき、これによって画像サイズの変更が可能です。

画像サイズ調整

表のセル幅を固定

WordPressで作成した表は、セル内の文字数に合わせて自動的に横幅の比率が調整されます。
以下に横幅を一律に保つ方法を解説します。

STEP
テーブルにカーソルを合わせる
セル幅未調整
STEP
設定の「表のセル幅を固定」をオンにする
表のセル幅を固定

より細かく横幅を調整する方法はこちらです。

【応用】CSSを使った表のカスタマイズ

ここではCSS(Webページ見た目を設定する言語)を使ってWordPressの表をカスタマイズする方法を解説します。

紹介するカスタマイズの多くはプラグインを使って再現することもできますが、すでにプラグインなしで表を作成済みの方やメンテナンス・セキュリティ面からプラグインをなるべく使いたくない方にとって役に立つかと思います。

また、CSSを使うといいましたが、基本的に紹介してあるコードをコピペするだけですので特別な知識は必要ありません。

表をスクロールさせてレスポンシブ対応させる

WordPressで作成した表をスマホで見ると、スマホの画面幅に合わせて表が小さくなるため見づらくなってしまいます。
Webサイトをスマホで見るユーザーが多いことを考えると必ず確認しておきたい項目です。

スマホで見た表

スマホでも表を見やすく(レスポンシブ対応)するには以下の方法があります。

STEP
カスタムHTMLを開く

ブロックエディタの「+」アイコンをクリックし「カスタムHTML」を開きます。

カスタムHTML
STEP
レスポンシブ対応用のCSSコードを記述

カスタムHTML内に以下のコードをコピペします。

<style>
 table {
  white-space: nowrap;
  overflow-x: scroll;
 }
</style>

記述したコードの意味は以下です。
「white-space: nowrap; 」は、セル内の文字列が折り返されない
「overflow-x: scroll;」は、はみ出した要素をスクロールさせる

STEP
反映完了

以上でレスポンシブ対応は完了です。
画面サイズが小さくなっても表をスクロールして見られるようになります。

表のスクロール

横幅を細かく調整する

WordPressの基本機能では、表の横幅は「セル内の文字数による自動調整」または「一律の横幅」の2通りしかありません。
ここでは自由に横幅を調整する方法を解説します。

STEP
カスタムHTMLを開く

ブロックエディタの「+」アイコンをクリックし「カスタムHTML」を開きます。

カスタムHTML
STEP
CSSコードを記述

カスタムHTML内に以下のコードを参考に記述します。

<style>
  table tr td:nth-child(1) {
    width: 50%;
  }
  table tr td:nth-child(2) {
    width: 20%;
  }
  table tr td:nth-child(3) {
    width: 30%;
  }
</style>

「width」は、テーブル全体に対して何%の横幅を使用するかを表します。

「tr td:nth-child()」は、左から何番目のセルに対して「width」を適用させるかを表します。
上記の例では「nth-child(3)」までしか記述していないので、左から3番目のセルの長さまでしか調整できません。
4列目、5列目と列が増える場合は「nth-child(4)」「nth-child(5)」の記述も必要になります。

STEP
反映完了

以上で横幅の調整は完了です。
以下の画像は表の横幅を左から50%・20%・30%の比率に調整したものになります。

横幅の調整

特定の列の色を変える

STEP
カスタムHTMLを開く

ブロックエディタの「+」アイコンをクリックし「カスタムHTML」を開きます。

カスタムHTML
STEP
CSSコードを記述

カスタムHTML内に以下のコードを参考に記述します。

<style>
  table tr td:nth-child(1) {
    background: gold;
    color: red;
  }
</style>

「background」は背景、「color」はテキストの色を指定します。
(色はカラーコードを使用)

「tr td:nth-child()」は、左から何番目の行に対して「background」や「color」を適用させるかを表します。
上記の例では「nth-child(1)」なので1列目に対して色の変更が適用されます。

STEP
反映完了

以上で特定の列の色の調整は完了です。
STEP2のコードを反映させた表は以下になります。

特定の列の色

特定の行の色を変える

STEP
カスタムHTMLを開く

ブロックエディタの「+」アイコンをクリックし「カスタムHTML」を開きます。

カスタムHTML
STEP
CSSコードを記述

カスタムHTML内に以下のコードを参考に記述します。(今回は)

<style>
  table tr:nth-child(1) {
    background: gold;
    color: red;
  }
</style>

「background」は背景、「color」はテキストの色を指定します。
(色はカラーコードを使用)

「tr:nth-child()」は、上から何番目の行に対して「background」や「color」を適用させるかを表します。
上記の例では「nth-child(1)」なので1行目に対して色の変更が適用されます。

STEP
反映完了

以上で特定の行の色の調整は完了です。
STEP2のコードを反映させた表は以下になります。

特定の行の色

まとめ

今回は表の作成・カスタマイズについて解説しました。

簡単な表を作成するだけであればWordPressの標準機能で十分ですが、見やすい表を作りたい場合はプラグインやCSSなどが必要になってくることが多いです。
とはいってもどちらも難しくはないので試しにつかって慣れておくとよいでしょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

WordPress制作の専門家

WorePressサイト制作実績300件。
企業ホームページからショッピングサイトまでを低価格帯にて作ることを得意としています。
高品質かつ低価格でのサイト制作をご希望の方はお気軽にご相談ください。


目次
閉じる