WordPressでおしゃれな表を作る方法｜初心者向け完全ガイド

「WordPressでおしゃれな表を作りたい」と感じている方は多いのではないでしょうか。

ブログのデザインをもっと洗練されたものにするためには、表の作り方にも工夫が必要です。

ブログに表を使うメリットは、

• 情報が見やすい： たくさんの情報を整理して見やすく表示できます。
• 比較しやすい： 複数のものを比べて、違いが分かりやすくなります。
• 分かりやすい：文章だけでは分かりにくい情報も、視覚的に分かりやすくなります。

この記事では、WordPressで簡単におしゃれな表を作成する方法を、テーマ「SWELL」の機能や、プラグインを使った方法、さらにはコピペで使える便利なデザインまで詳しく紹介します。

また、レスポンシブ対応でスマホでも見やすい表を作成するコツもお伝えするので、ぜひ最後までご覧ください。

WordPressで表を作成する方法

WordPressでおしゃれな表を作成するには、主に4つの方法があります。

1. テーブルブロックを使う方法
2. エクセルからのコピペ
3. プラグインを使う方法
4. HTML/CSSで表を作成する方法

それぞれの方法にはとメリットとデメリットがありますので目的やスキルに応じて使い分けることが大切です。

方法1：テーブルブロックを使う

テーブルブロックは、WordPressの標準機能で簡単に表を作成できる方法です。

あらかじめ行と列の数を設定しておくだけで、自動的に表が生成されます。

表のデザインは限られていますが、シンプルな表を作るには十分です。

テーブルブロックの使い方

STEP

+ボタン

記事投稿画面左上の【+ボタン】（新しいブロックを追加するボタン）を押します。

STEP

テーブルを選択

左側のブロックから【テーブル】を選択します。

STEP

カラム数・行数

カラム数と行数を入力して【表を作成】をクリックすると表が挿入されます。

カラムは横方向の並び、行は縦方向の並びのことだよ。

方法2：Googleスプレッドシートからコピペする

Googleスプレッドシートやエクセルで作成した表をそのままWordPressに貼り付ける方法です。

既存の表がある場合、効率よく利用できますが、表計算ソフトでのデザイン（文字の色や大きさなど）は反映できないので注意が必要です。

Googleスプレッドシートからコピペする方法

STEP

Googleスプレッドシート

Googleスプレッドシートで表を作ります。

STEP

コピー

表を選んでコピーします。(Ctrl+C)

STEP

貼り付け

商品名	価格	評価
商品A	¥1,000	★★★★☆
商品B	¥2,000	★★★☆☆
商品C	¥3,000	★★☆☆☆

WordPressの投稿画面に貼り付けます。(Ctrl+V)

文字の色や背景色などのデザインは反映されないからコピー後にカスタマイズする必要があるよ。

方法3：プラグインを使う

プラグインを使うと、より高度なカスタマイズや機能を追加できます。

代表的なプラグインにはTablePressがあり、並べ替えやフィルタ検索機能を簡単に追加できます。

プラグインは便利だけど使いすぎると重くなるので、本当に必要なものだけ厳選して使ってくださいね。

方法4：HTML/CSSで表を作成する

HTMLとCSSを使って、自由にデザインした表を作成する方法です。

この方法を使うと完全にカスタマイズされた表を作成することができます。

少し難易度が高いけど、自由にデザインを調整できるため、特にこだわりたい場合には最適だよ。

WordPressでおしゃれな表を作成するには、自分のスキルレベルや目的に応じて適切な方法を選ぶことが重要です。

初心者はテーブルブロックから始め、高度なデザインが必要になったらHTML/CSSに挑戦してみましょう。

デザインのカスタマイズ方法

WordPressでおしゃれな表を作るには、テーブルブロックを使って基本的な表を作り、その後デザインをカスタマイズしていきます。

次の5つの方法を組み合わせることで、とてもきれいな表が作れます。

1. スタイルの変更
2. 文字色・サイズの変更
3. 背景色の変更
4. セル幅の固定
5. ヘッダーとフッターの設定

例えば、背景色を使うことで重要な部分を強調したり、セル幅を調整することで情報が詰まりすぎないようにすることができます。

ここではSWELLというテーマを使用して変更の方法を解説していきます。

スタイルの変更

表の枠線の色や太さを変えることで、表全体の雰囲気をガラリと変えられます。

例えば、シンプルで落ち着いた雰囲気にしたい場合は、細い線と薄い色を使いましょう。 一方、ポップな雰囲気にしたい場合は、太い線と明るい色を使うと良いです。

SWELLではあらかじめ４つのスタイルが用意されているよ。

スタイルの変更方法

1. 変更したいテーブルを選択します。
2. 右側のサイドバーで【スタイル】（白黒の円の方）をクリックします。
3. 【デフォルト】【ストライプ】【シンプル】【二重線】のか中から好みのスタイルを選びます。

文字色・サイズの変更

表の文字の色やサイズを変えることで、読者に伝えたい情報を強調できます。

例えば、商品の価格や特徴など、特に知ってほしい情報を太字で大きく表示したり、別の色で表示したりすると効果的です。

文字色の変更方法（一括）

この方法ではテーブル内のすべての文字色やサイズが変更されます。

1. 変更したいテーブルを選択します。
2. 右側のサイドバーで【スタイル】（白黒の円の方）－【テキスト】の順にクリックします。
3. お好みの色を選択します。
4. サイズを選択すると文字の大きを変更できます。

文字色の変更方法（個別）

この方法では個別の文字色やサイズを変更できます。

1. 変更したい箇所を選択します。
2. 上部バーで太さ、サイズ、色を変更します。

背景色の変更

表の行や列に異なる背景色をつけることで、情報を整理し、見やすくするできます。

たとえば、奇数行と偶数行の色を交互に変える「ストライプ」は、行ごとの区切りがはっきりし、読みやすくなります。

背景色の変更方法（一括）

この方法ではテーブル内のすべての背景色が変更されます。

1. 変更したいテーブルを選択します。
2. 右側のサイドバーで【スタイル】（白黒の円の方）－【背景】の順にクリックします。
3. お好みの色を選択します。

背景色の変更方法（個別）

この方法では個別のセルの背景色を変更することができます。

1. 変更したい箇所を選択します。
2. 上部バーでセル背景をクリックします。
3. 色を選択します。

SWELLではカラー以外にも〇や✖などのアイコンを背景にできます。

比較表などで使うと便利だよ。

背景色を変更することで、視覚的なメリハリをつけられます。

セル幅の固定

表の幅が自動で調整されてしまうと見づらいです。

セル（表の一つ一つの枠）の幅を固定しておくと、表全体が均等に整ったデザインになります。

価格表や日付など、一貫したフォーマットで表示したい場合に有効です。

セル幅の固定方法

1. 変更したいテーブルを選択します。
2. 右側のサイドバーで【表のセル幅を固定】をONにします。

ヘッダーとフッターの設定

表の最初の行をヘッダー、最後の行をフッターとして設定すると、見出しや合計金額などの重要な情報がわかりやすくなります。

ヘッダーは表のタイトル、フッターは表のまとめの部分として使うことが多いです。

ヘッダーとフッターを上手く使うと、読者が必要な情報を見つけやすくなります。

ヘッダーとフッターの設定方法

1. 変更したいテーブルを選択します。
2. 右側のサイドバーで【ヘッダーセクション】【フッターセクション】をONにします。

SWELLデフォルトのテーブル

SWELLではデフォルトで５種類の表が用意されています。

ブログで使う機会が多い表が最初から用意されているよ。

自分の好みに色などを変更することも可能です。

• メリット・デメリット
• 料金プラン比較表
• 商品比較表
• 商品比較表2
• 商品比較表3

メリット	デメリット
メリット メリット メリット メリット	デメリット デメリット デメリット デメリット

スクロールできます

	フリープラン 0円	プレミアムプラン 1000円/月
機能A
機能B
機能C	制限あり
機能D
機能E
機能F
	無料ではじめる	購入はこちら

スクロールできます

	商品A	商品B	商品C
機能A	少し古い	普通	最新機能
機能B	非対応	制限付き	使用可
性能A	200[単位]	500[単位]	1000[単位]
性能B	500[単位]	1000[単位]	800[単位]
デザイン	普通	良い	微妙
価格	5,000円	10,000円	15,000円
	購入する	購入する	購入する

スクロールできます

	商品A	商品B	商品C
機能A	少し古い	普通	最新版
機能B	非対応	制限付き	使用可
性能A	200[単位]	500[単位]	1000[単位]
性能B	500[単位]	1000[単位]	800[単位]
デザイン	普通	良い	微妙
価格	5,000円	10,000円	15,000円
	購入する	購入する	購入する

スクロールできます

商品	特徴	価格	評価
商品A	xxxが便利 xxxもできる xxxはできない	1000円
商品B	xxxが便利 xxxもできる xxxはできない	1000円
商品C	xxxが便利 xxxもできる xxxはできない	1000円

WordPressでおしゃれな表を作成する方法はたくさんあります。

スタイル、文字、背景色、セル幅、ヘッダー・フッターなど、いろいろな部分を変えることで、あなただけのおしゃれな表が作れます。

少しずつ試してみて、自分好みの表を作ってみてください。

コピペで使えるおしゃれな表のデザイン例

コピペで使えるおしゃれな表のデザイン例です。ご自由にお使いください。

以下の手順に従って設定してください。

※このCSSは、「SWELL」というテーマで動作確認をしています。他のテーマでは確認をしておりませんのでご了承ください。

コピペの方法

STEP

WordPressの管理画面にログイン

WordPressの管理画面で【外観】→【カスタマイズ】の順に進みます。

STEP

追加CSSをクリック

【追加CSS】をクリックします。

STEP

コピーした【CSS】を貼り付け

使用したいデザイン例からコピーしたCSSを貼り付けます。

STEP

コピーした【追加CSSクラス】を貼り付け

記事投稿ページでカスタマイズしたい表を選択して、右側の【高度な設定】をクリック、【追加CSSクラス】にデザイン例からコピーした追加CSSクラスを貼り付けます。

CSSと追加CSSクラスを間違わないように注意してね。

STEP

保存

右上の【下書き保存】で保存したらページを表示してデザインが反映されているか確認します。

ブルー系のテーブル

枠線と背景色を使ったデザイン

table-blue01

figure.table-blue01>table {
	border-collapse:collapse;
	border:2px solid #0094c8;
}/*テーブル線の色*/
figure.table-blue01>table th{
	background-color: #0094c8;
	border:1px solid #ffffff;
}/*ヘッダー背景色、線の色*/
figure.table-blue01>table td{
	background-color: #c1e4e9;
	border:1px solid #0094c8;
}/*背景色、線の色*/

ストライプのデザイン

table-blue02

figure.table-blue02>table {
	border-collapse:collapse;
	border:2px solid #0094c8;
}/*テーブル線の色*/
figure.table-blue02>table th{
	background-color: #0094c8;
	border:1px solid #ffffff;
}/*ヘッダー背景色、線の色*/
figure.table-blue02>table tr:nth-child(odd){
	background-color: #f5f5f5;
}/*奇数行の背景色*/

横線のみデザイン

table-blue03

figure.table-blue03>table{
	border-collapse:collapse;
}
figure.table-blue03>table th{
	background-color: #0094c8;
	padding: 10px;
	border: none;
}/*ヘッダー背景色*/
figure.table-blue03>table td{
	padding: 10px;
	border-bottom: solid 1px #ccc;
	border-left: none;
	border-right: none;
}/*線の色*/

ピンク系のテーブル

枠線と背景色を使ったデザイン

table-pink01

figure.table-pink01>table {
	border-collapse:collapse;
	border:2px solid #f2a0a1;}
figure.table-pink01>table th{
	background-color: #f2a0a1;
	border:1px solid #ffffff;
}/*ヘッダー背景色*/
figure.table-pink01>table td{
	background-color: #fff9fc;
	border:1px solid #f2a0a1;
}/*背景色*/

ストライプのデザイン

table-pink02

figure.table-pink02>table {
	border-collapse:collapse;
	border:2px solid #f2a0a1;
}/*テーブル線の色*/
figure.table-pink02>table th{
	background-color: #f2a0a1;
	border:1px solid #ffffff;
}/*ヘッダー背景色、線の色*/
figure.table-pink02>table tr:nth-child(odd){
	background-color: #f5f5f5;
}/*奇数行の背景色*/

横線のみデザイン

table-pink03

figure.table-pink03>table{
	border-collapse: collapse;
}
figure.table-pink03>table th{
	background-color: #f2a0a1;
	padding: 10px;
	border: none;
}/*ヘッダー背景色*/
figure.table-pink03>table td{
	padding: 10px;
	border-bottom: solid 1px #ccc;
	border-left: none;
	border-right: none;
}/*線の色*/

ベージュ系のテーブル

枠線と背景色を使ったデザイン

table-beige01

figure.table-beige01>table {
	border-collapse:collapse;
	border:2px solid #ead7a4;
}/*テーブル線の色*/
figure.table-beige01>table th{
	background-color: #ead7a4;
	border:1px solid #ffffff;
}/*ヘッダー背景色、線の色*/
figure.table-beige01>table td{
	background-color: #fffcf9;
	border:1px solid #ead7a4;
}/*背景色、線の色*/

ストライプのデザイン

table-beige02

figure.table-beige02>table {
	border-collapse:collapse;
	border:2px solid #ead7a4;
}/*テーブル線の色*/
figure.table-beige02>table th{
	background-color: #ead7a4;
	border:1px solid #ffffff;
}/*ヘッダー背景色、線の色*/
figure.table-beige02>table tr:nth-child(odd){
	background-color: #f5f5f5;
}/*奇数行の背景色*/

横線のみデザイン

table-beige03

figure.table-beige03>table{
	border-collapse: collapse;
}
figure.table-beige03>table th{
	padding: 10px;
	background-color: #ead7a4;
	border: none;
}/*ヘッダー背景色*/
figure.table-beige03>table td{
	padding: 10px;
	border-bottom: solid 1px #ccc;
	border-left: none;
	border-right: none;
}/*線の色*/

おすすめのテーブル作成プラグイン

プラグインを使うと、WordPressの標準機能だけではできない高度なデザインや機能を追加できます。

特にTablePressというプラグインは、シンプルで使いやすく人気です。

TablePressとは？

TablePressは、WordPressで表を作成するための無料プラグインです。

表作成のプラグインの中で最も人気があり、高い評価を得ています。

初心者でも直感的な操作で表を作成できます。

プラグインを使うメリットとデメリット

プラグインを使うとでおしゃれな表を簡単に作成できますが、デメリットもあるのでよく理解した上で使用しましょう。

レスポンシブデザインに対応したテーブルの作成方法

スマホでサイトを閲覧する人が増えているため、表を作る際はレスポンシブデザインへの対応は必須です。

SWELLやプラグインを使えば、簡単にレスポンシブ対応の表を作ることができます。

レスポンシブデザインとは？

レスポンシブデザインとは、スマートフォンやタブレット、パソコンなど、様々な大きさの画面で見やすく表示される仕組みのことです。

画面の大きさに合わせて、表の見た目が自動的に調整されるので、どんな端末でも読みやすくなるよ。

例えば、パソコンでは横長の表が見やすいですが、スマートフォンだと縦長の表の方が見やすいです。レスポンシブデザインを使うと、そういった調整を自動的にしてくれるのです。

レスポンシブ対応した表を作成したい場合、以下の方法があります。

• SWELLの機能を使う
• プラグインを使う
• CSS、メディアクエリを使う

SWELLならレスポンシブ対応も簡単

SWELLにはレスポンシブ対応の表を作成できる機能があります。

下のような横に長い表の場合、普通に作成すると途中で切れてしまいますが、SWELLならスクロール表示が簡単にできます。

横スクロールの設定方法

1. 変更したいテーブルを選択。
2. 右側のサイドバーで【横スクロール設定】を選択。
3. 下記項目を設定。

• 横スクロール設定
  なし、スマホのみ、パソコンのみ、スマホとパソコンから選択
• テーブル全体の幅
  任意の幅に設定
• １列目を左端に固定する
  チェックを入れると１列目は固定されて、２列目以降がスクロールします。

SWELLを使うと、誰でも簡単にレスポンシブな表が作れるので、初心者におすすめです。

プラグインでレスポンシブ対応する方法

WordPressには、表をレスポンシブ対応させるプラグインがたくさんあります。

「TablePress」などのプラグインを使うと、難しいコードを書かなくても、簡単に表をレスポンシブ対応させることができます。

CSSで・メディアクエリでレスポンシブ対応する方法

メディアクエリ（画面の大きさを判断する仕組み）というCSSの機能を使うと、スマホやタブレットなど、それぞれの画面サイズに合わせて、表のデザインを調整できます。

例えば以下のコードは、画面の幅が480ピクセル以下になったとき、表の各セルを縦に並べて表示します。

@media screen and (max-width: 480px) {
  td, th {
    display: block;
  }
}

CSSは少し難しいので、中・上級者向けだよ。

WordPressでレスポンシブデザインに対応した表を作るには、SWELLなどテーマの機能、CSSやメディアクエリ、またはプラグインを活用する方法があります。

特に、SWELLの機能を使えば初心者でも簡単にレスポンシブな対応した表を作成できます。

WordPressでおしゃれな表を作る方法｜初心者向け完全ガイド　まとめ

記事のポイントのまとめです。