ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

ワードプレス テーブルブロックで表を作成する方法(おすすめCSSあり)

ワードプレスのブロックエディター(Gutenberg)のテーブルブロックを使って表を作成する方法を解説します。

この記事でわかること

・テーブルブロックで表を作成する
・列、行の挿入・削除
・文字の配置の変更
・作成したテーブルのスタイルの変更方法
・おすすめスタイルのCSS
・スマホ表示における設定と注意点

※できればパソコンまたはスマホなら横長でご覧ください。
途中作成途上の表がありますが、横長で見て頂くとわかりやすいためです。

テーブルブロックで表を作成する

基本となる手順と作成する表

  1. テーブルブロックを挿入する
  2. 必要ならばヘッダーラベルをONにする
  3. 文字を入力する
  4. 必要に応じて列や行を挿入・削除する
  5. 文字の配置を整える
  6. 表のスタイルを整える

今回は次のような表を作成します。

A社B社
サイズ(mm)230×100×100220×110×120
色のバリエーション2色
(白、黒)
3色
(白、黒、青)
価格2300円2500円

Gutenbergエディターを開けたところから始めます。

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

1.テーブルブロックをクリックして挿入

①画面左上の+マークをクリック
②”テーブル”ブロックを選択

テーブルブロックの挿入

2.カラム数(列数)と行数を指定して表を作成する

①カラム数、行数を入力
②”表を作成”をクリック

カラム数と行数の指定

今回は3×3の表にしてみました。

挿入後の表です。

挿入直後の表

表の一行目にヘッダーラベルをつける

ヘッダーセクションをONにすることで、一行目に表のヘッダーラベルをつけることができます

次のように画面右のパネル内の”表の設定”で操作します。

ヘッダーセクションをONにしてヘッダーラベルをつける

ヘッダーラベルが表の一行目となります。

似たような設定にフッターセクションのONがあります。行の一番下にラベルがつきます。
(”合計”とか”平均” なんかを記入するのには使えますね)

表に文字を入力する

表の各セルに文字を入力していきます。文字数に応じて自動的に列の幅が変わります

表に文字を入力する

セル内で文字を改行したければ、SHIFT+[Enter]で可能です

色のバリエーションのセルを2行に改行して実際にweb表示すると次の通りです。

A社B社
サイズ(mm)230×100×100220×110×120
色のバリエーション2色
(白、黒)
3色
(白、黒、青)
価格2300円2500円

列・行の挿入・削除と文字の配置

・列や行の挿入・削除
・入力した文字の配置変更

は次のようにブロック内ツールバーで可能です。

ツールバー内の行列の挿入削除および文字の配置ボタン

作成中の表を”カラムを中央寄せ”にしてweb表示させると次の通りです。

A社B社
サイズ(mm)230×100×100220×110×120
色のバリエーション2色
(白、黒)
3色
(白、黒、青)
価格2300円2500円

表のスタイルを整える

テーブルブロックの”スタイル”を使って整える

画面右のパネル内の”スタイル”で”デフォルト”以外に”ストライプ”を選べるようになっています。

スタイルの変更

実はここまでで作成した表は”デフォルト”設定です。
ストライプ”に変更してweb表示すると次のようになります。

A社B社
サイズ(mm)230×100×100220×110×120
色のバリエーション2色
(白、黒)
3色
(白、黒、青)
価格2300円2500円

デフォルト”ではセルに枠線がありましたが、”ストライプ”では枠線が消えて、行がストライプ状に塗られます。

ちなみに、色設定で色を変更できます。

色設定

ピンクに設定すると次のとおりです。

A社B社
サイズ(mm)230×100×100220×110×120
色のバリエーション2色
(白、黒)
3色
(白、黒、青)
価格2300円2500円

ストライプ状の塗色を変更できるわけではなく、ベースカラーの変更となります。少し微妙ですね。

表のスタイルはテーマによって若干異なる

実は、このスタイルは使用するテーマによって出来上がったデザインが若干異なります。

ちなみにここまでで表示した表は、このウェブチルサイトで使用しているテーマ”Luxeritas”での見映えです。

そこで、別に3つのテーマで表の見映え比較をしてみました。
取り上げたテーマは、”Twenty Seventeen”、”Twenty Nineteen”、”Lightning”です。
(文字を入力したまま、配置を整えるなどはしていない状態です)

”デフォルト”のスタイルでの比較
3つのテーマ比較”デフォルト”スタイル

Twenty Seventeenには表の外枠および縦の枠線がありません。
Twenty NinteenとLightningには各セルの枠線があるものの、線の太さなどスタイルが大きく異なります。

”ストライプ”スタイルでの比較
3つのテーマ比較”ストライプ”スタイル

Twenty Nineteenには各セルの枠線が残っていますが、残りの2つは外枠および縦の枠線がありません。

このように、テーマによって若干の差とはいえ、ずいぶん見やすさが異なると思います。

企業サイトなどでデザイン重視の表ならば違うかもしれませんが、ブログなど情報を発信するからには、ユーザーが情報を読みやすい表であるべきと思います。

そういう意味で、Twenty Nineteenのように明確な枠線はあるべきでしょう。

カスタムCSSによるおすすめスタイルの提案

読み取りやすい表として次の条件とします。

  • 読みやすいようにストライプ状の背景塗りは入れる
  • 枠線はあること
  • ラベルとなる行や列の枠線は太めまたは濃い色に変える

この条件でできるだけテーマによる差が生じにくいよう、次のカスタムCSSを提案します。

/* 表の外枠線 */
.custom-table table {
    border: 2px solid #333;
    border-collapse: collapse;
}
/* ヘッダーラベル下のデフォルト線を削除 */
.custom-table thead {
    border: none;
}
/* 表の各セルの枠線 */
.custom-table thead th,
.custom-table tbody td {
    border: 1px solid #aaa;
}
/* 1列目右側の枠線 */
.custom-table thead th:first-child,
.custom-table tbody td:first-child {
    border-right: solid 2px #333;
}
/* ヘッダーラベル下の枠線 */
.custom-table thead th {
    border-bottom: solid 2px #333;
}

/* 偶数行に着色、奇数行は白 */
.custom-table tr:nth-child(odd) {
    background: #f8f5f2;
}
.custom-table tr:nth-child(even) {
    background: #fff;
}
適用の手順

①画面右のパネルの”高度な設定”の追加CSS欄に、”custom-table”と記述
(元々ある”is-style-regular”または”is-style-stripes”の記述は削除してください)

②カスタムCSSを子テーマのstyle.cssに記述
(子テーマのない場合、外観>カスタマイズ>追加CSSに記述、または、”Simple Custom CSS and JS”などのプラグインを使って記述してもよい)

カスタムCSSの適用手順

このようにすると、比較した3つのテーマも次の通りとなりました。

3つのテーマ比較custom-tableクラス付与後

Twenty Nineteenの枠線色が若干薄くなっていますが、テーマのCSSの中に詳細度が高く上書きしにくいCSSの記述があるためです。こういう場合は個別対応のCSSを書くか、各CSSの最後に!importantを付加するとよいでしょう。

とはいえ、ほぼ、どのテーマでも読みやすい表になりました。

もちろん、このLuxeritasで作成中の表でも次のようになります。

A社B社
サイズ(mm)230×100×100220×110×120
色のバリエーション2色
(白、黒)
3色
(白、黒、青)
価格2300円2500円

もし、今回のCSSで不要なスタイルがあれば、その部分だけ削除してください。

例えば、最初の列の右枠線を太くしたくない場合は、
/* 1列目右側の枠線 */のコメントの下にあるCSSを削除すればOKです。

スマホ表示設定と注意点

こうして作成した表ですが、スマホ表示では注意点があります。

ここまで作成してた表はパソコンでの表示だということです。

スマホ表示では表は横にはみ出す

スマホ表示の場合、表はデバイスの幅をはみ出して表示されます
はみ出た分は左右にスクロールして見ることができます。

スマホ表示の場合

はみ出さない設定もできる

画面右パネル内の”表の設定”で表のセル幅を固定”をONにすると、表はデバイス幅内に縮小されて表示されます。各列の幅が、デバイス幅に応じて均等に固定されるためです。

表のセル幅を固定をON

ただしこの場合、上記のように表が無理やり横に圧縮されるため、セル内の文字の改行などが読みにくいものとなってしまいます。

したがってこの方法を用いるならば、あらかじめセル内で改行をしておいて、不自然にならないように文字を入力しておく配慮が必要です。

でも実際はなかなか難しいですよね。なので、スマホ表示を重視するならば『なるべく横長の表は使わない』のがよいでしょう。

それでもはみ出す場合は、固定幅にせずに元の設定とし、左右にスクロールして読んでもらう、ということになります。

横長の表でもCSSを使ってうまくスマホ表示する方法はありますが、結局は個別対応でCSSを記述するしかありません。なので、ブログ記事のように情報の伝達に重きを置くページの場合は、左右にスクロールして読んでもらう、と妥協しましょう。

まとめ

Gutenbergのテーブルブロックを使用して表を作成する方法について解説してきました。

手順をもう一度おさらいすると、

  1. テーブルブロックを挿入する
  2. 必要ならばヘッダーラベルをONにする
  3. 文字を入力する
  4. 必要に応じて列や行を挿入・削除する
  5. 文字の配置を整える
  6. 表のスタイルを整える

となりますが、スタイルについては、準備されている2つのスタイルでうまくいかない場合、この記事紹介したカスタムCSSを使うのがおすすめです。

また、スマホ表示を考えるならば、なるべく横長の表は使わないことです。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる