WordPressの表をおしゃれに作る!テーブルブロックをカスタマイズしよう♪CSSコピペOK!

ブロックエディター/カスタマイズ・デザイン方法
  1. ホーム
  2. ブロックエディター
  3. WordPressの表をおしゃれに作る!テーブルブロックをカスタマイズしよう♪CSSコピペOK!

料金とかおすすめ商品の比較をする時は、エクセルみたいな表を作りたいですよね。
でも、WordPressで表を作るのってちょっと難しいと思いませんか?

そこで、簡単な表の作り方の解説と、おしゃれにデコれるCSSを紹介します!

例:テーブルブロックをそのまま使うとこうなります。↓

メニュー時間料金
フェイシャル60 min¥12,800
デコルテ30 min¥5,800
ボディ60 min¥15,800
フット40 min¥8,800

シンプルですよねぇ。なんかもうちょっとアレンジしたいところ。

これにCSSを足すだけで以下のようなデザインにできますよ!
サンプルはシンプル・フェミニン・グラデーションの3つ用意しました。

・シンプル

メニュー時間料金
フェイシャル60 min¥12,800
デコルテ30 min¥5,800
ボディ60 min¥15,800
フット40 min¥8,800

枠線の外側を太くして、青と白のしましまでメリハリをつけました。

・フェミニン

メニュー時間料金
フェイシャル60 min¥12,800
デコルテ30 min¥5,800
ボディ60 min¥15,800
フット40 min¥8,800

タイトル行を濃い色にして文字は白。内側の枠線を点線にして柔らかい印象にしました。

グラデーション

メニュー時間料金
フェイシャル60 min¥12,800
デコルテ30 min¥5,800
ボディ60 min¥15,800
フット40 min¥8,800

これは色で遊んでみました(笑)

コピペ・改変はもちろんOKなので、好きな色に変えて自由に使ってくださいね!

この記事で紹介するCSSは、テーマ「Twenty Twenty-One」と「Nishiki Pro」で動作確認しています。その他のテーマではサンプル通りにならない場合がありますのでご了承ください。

それでは作り方を解説します!

テーブルブロックとは

まず、テーブルブロックの基本機能をご説明しておきますね。

テーブルブロック基本機能

テーブルブロックは、ブロックの「テキストカテゴリー」の中にあります。

ブロックエディターのテーブルブロックの場所

/tableと入力しても呼び出せますよ。

テーブルブロックの呼び出し方

ブロックを呼び出すと、まずこんな入力欄が出ます。

テーブルブロックのセル数入力欄

ここに縦横何マスの表にするかを入力します。

カラム数・・・横のセルの数
行数・・・・・縦のセルの数

すると以下のようなからっぽの表ができます。

テーブルブロックサンプル

ここに内容を入力して表を作っていくというわけです。
これが普通の作り方なんですが・・・・正直ちょっとめんどくさい!

なのでもっと簡単な方法でいきましょう。
エクセルやスプレッドシートなどの表計算ソフトで先に表を作って、そのままコピペしちゃうんです。

スプレッドシートでの表作成例

エクセルからWordPressのエディターに貼り付けできるなんて意外ですよね。

こんな感じです↓(動画)

これ知ってると表作りがかなり楽になります♪ぜひやってみてください。

さて表が入力できたら装飾していきましょう。
まずはテーブルブロックの装飾機能をご説明します。

スタイル

テーブルブロックには「デフォルト」と「ストライプ」の2種類のデザインスタイルがあります。

テーブルブロックのスタイル設定

デフォルト

デフォルトは、このはじめのシンプルな状態のこと。

テーブルブロックのデフォルトスタイル例

ストライプ

スタイルを「ストライプ」に変えると枠線がなくなってフラットなしましまになります。

テーブルブロックのストライプスタイル例

いい感じですよね♪
でも、しましまの色は#f0f0f0の薄いグレーのみ。他の色が選べないのがちょっと残念なところです。

なので私はこの機能は使わず、CSSで好きな色を指定しています。

表の設定

「表の設定」では表のレイアウトについて、以下の3種類の設定ができます。

テーブルブロックの表の設定

これだけじゃよくわからないので、図解しますね。

・表のセル幅を固定

まず、「表のセル幅を固定」をonにすると以下のように変わります。

テーブルブロックの表のセル幅を固定した例

セルの幅って、中に入っているテキストによって自動的に調整されるんですよね。だからサンプルの表だと「時間」一番横幅が狭くなります(上の表)。

この時「表のセル幅を固定」を有効にすると、全部横幅が同じになります(下の表)

横幅を揃えたい時はここを使ってみてくださいね。

・ヘッダーセクション

2つめはヘッダーセクションです。これはよく使います。
今回紹介するCSSでも使うので、ここは有効にしておいてください。

有効にすると、表の一番上に「ヘッダーラベル」という行が追加されます。タイトルらしくちょっとデザインが強調されています。(theadタグで追加されてます)

テーブルブロックのヘッダーセクション挿入例

※一行目の「メニュー」「時間」「料金」をヘッダーにしたいですが自動的には変わってくれません。「ヘッダーラベル」というところにテキストをコピーして、開いた行を1つ削除して使います。

・フッターセクション

フッターも同様に、有効にすると一番下にデザインが強調された行が追加されます。(tfootタグで追加されます)

テーブルブロックのフッターセクション挿入例

計算の合計とかに使えそうですね!

テーブルブロックの色設定

色の設定は、テーブルの文字と背景の色を指定できます。

「テキスト」・・・文字・枠線の色が変わります。
「背景」・・・・・全体の背景色が変わります。

テキストの色を変えると、罫線の色も同じ色に変わるテーマもありますのでご注意ください。

大石
大石

テストで使ったTwenty Twenty-Oneは線も同じ色になっちゃいました。

タイポグラフィ

テーブルブロックのタイポグラフィ設定例

タイポグラフィは文字ですね。文字の大きさ、高さ、間隔など細かく設定できます。

高度な設定

「追加CSSクラス」に自分で作ったCSSのクラス名を入力すると反映されます。

テーブルブロックの高度な設定

この記事ではは3種類のCSSをご紹介します。

使いたいデザインのクラス名を、この「追加CSSクラス」に追加してください。

クラス名

・シンプルデザイン・・・simple-table
・フェミニンデザイン・・fem-table
・グラデーション・・・・grad-table

テーブルデザインCSS 3種

あとは以下の、使いたいデザインのCSSを「追加CSS」にコピペするだけです!

シンプルデザイン

メニュー時間料金
フェイシャル60 min¥12,800
デコルテ30 min¥5,800
ボディ60 min¥15,800
フット40 min¥8,800

シンプルデザインにするときは↓のCSS。

/*-------- 色指定 ---------*/
:root {
  --s-text:#2f496e; /*文字の色*/
  --s-line:#2f496e; /*線の色*/
  --s-bg1:#eaf4fc; /*ストライプ背景の色*/
}

.simple-table{
color:var(--s-text);	
background-color:white;
border:2px solid var(--s-line);
}

.simple-table thead{
border-bottom:2px solid var(--s-line);	
}

.simple-table th, .simple-table tr:nth-child(even){
background-color:var(--s-bg1);
}

.simple-table table td ,.simple-table table ,.simple-table table th {
text-align:center;
border-color:var(--s-line);
}

フェミニンデザイン

メニュー時間料金
フェイシャル60 min¥12,800
デコルテ30 min¥5,800
ボディ60 min¥15,800
フット40 min¥8,800

フェミニンデザインにするときは↓のCSS。

/*-------- 色指定 ---------*/
:root {
  --f-text:#998671;/*文字の色*/
  --f-line:#e29399;/*線の色*/
  --f-bg1:#e29399;/*タイトル行の背景色*/
  --f-bg2:#fef4f4;/*ストライプの背景色*/
}

.fem-table table{
color:var(--f-text);
text-align:center;
border:2px solid var(--f-line);	
background-color:white;
}

.fem-table table th{
border:1px dotted white;	
text-align:center;
}

.fem-table thead{
border-bottom:1px solid var(--f-line);
}

.fem-table table td{
border:1px dotted var(--f-line);	
text-align:center;
}

.fem-table thead{
color:white;
}

.fem-table th{
background-color:var(--f-bg1);
}

.fem-table tr:nth-child(even){
background-color:var(--f-bg2);
}

グラデーションデザイン

メニュー時間料金
フェイシャル60 min¥12,800
デコルテ30 min¥5,800
ボディ60 min¥15,800
フット40 min¥8,800

グラデーションデザインにするときは↓のCSS。

/*-------- 色指定 ---------*/
:root {
  --g-text:#fff;/*文字の色*/
  --g-line:#fff;/*文字の色*/
  --g-bg1:#E6F7FA; /*グラデーション1色*/
  --g-bg2:rgb(40,175,204,.3);/*グラデーション2色*/
  --g-bg3:rgb(40,175,204,.5);/*グラデーション3色*/
  --g-bg4:rgb(40,175,204,.6);/*グラデーション4色*/
  --g-bg5:rgb(40,175,204);/*グラデーション5色*/
}

.grad-table{
color:var(--g-text);	
font-weight:bold;
text-align:center;
}

.grad-table table th{
border:1px solid white;	
color:var(--g-bg5);	
text-align:center;
}

.grad-table table td{
border:1px solid var(--g-line);	
text-align:center;
}

.grad-table th{
background-color:var(--g-bg1);
}

.grad-table tr:nth-child(1){
background-color:var(--g-bg2);
}

.grad-table tr:nth-child(2){
background-color:var(--g-bg3);
}
.grad-table tr:nth-child(3){
background-color:var(--g-bg4);
}
.grad-table tr:nth-child(4){
background-color:var(--g-bg5);
}

※ グラデーションのデザインの場合、タイトル行の文字は一番濃いグラデ色と同じにしています。

色の変え方

それぞれの「/*——– 色指定 ———*/ 」の下に、黄色くマーキングしてあるところが色番号です。

/*-------- 色指定 ---------*/
:root {
  --s-text:#2f496e; /*文字の色*/
  --s-line:#2f496e; /*線の色*/
  --s-bg1:#eaf4fc; /*ストライプ背景の色*/
}

どこの色か説明も書いてあるので、変更したい部分の黄色くマーキングされた色番号を、好きな色の番号に書き換えてお使いください。番号はWEB色見本(https://www.colordic.org/)などで確認できますよ。

ご利用時の注意

よくありそうなご質問のお答えです。

CSS入れても何も起こらない時は

念の為、コピペミスがないか確認してみてください。
CSSのクラス名がちょっとでも違っていると認識しません。たとえば「fem-table」なのに「.fem-table」と.が入っているだけでもダメなんです。

うまくいかない時は、お手数ですが
①「高度な設定」の追加CSSに入力した文字が1文字でも違っていないか?
②「テーブルブロック」の「高度な設定」に入力しているか?を今一度確認してみてください。
(テーブルブロックではない他のブロックに入れていた、というケースが多いです)

タイトルだけ色がつかない時

テーブルのタイトル部分は「ヘッダーセクション」を使っています。ヘッダーセクションが有効になっていないとヘッダーに色がつきません。こちらのヘッダーセクションの設定をご確認ください。

指定してない他の色が混ざる時、ほか

他の色が混ざる時は、このCSSとは別にテーブルにデザイン指定がされている可能性が高いです。お使いの環境により異なるので一様にご説明が難しいですが、テーマやプラグイン、またはCSSなど原因をお調べいただく必要があります。

このCSSは、デフォルトテーマ「Twenty Twenty-One」と「Nishiki Pro」(このテーマ)に合うように作っています。申し訳ありませんが他のテーマでは使えない場合がありますのでご了承ください。

他のテーマをお使いの方から、「うまくいかない!」と問い合わせが多くて困っております。
CSSはあくまで「Nishiki Pro」用だということで、参考程度にしていただけますようお願いします。

バージョン情報

この記事は2022年9月17日に書きました。

執筆時のWordPressのバージョン:6.0.2
使用テーマ:
・Nishiki Pro バージョン: 1.0.297
・Twenty Twenty-Oneバージョン: 1.6

環境やバージョンが異なる場合、うまく表示されない場合がありますのでご注意ください。