【WP(Gutenberg)の表をデザイン】プラグイン不要!! CSSのみでOK!!

PC, WordPress

表のカスタマイズ テーブルの上のコーヒー

WPのバージョンがGutenbergになってから、その使い方に慣れていない方も多いかと思います。私自身もその一人で、表のカスタマイズ方法についてGoogle検索しても、旧バージョンでのやり方が多く出て来ます。今回はGutenbergで挿入した表のカスタマイズ方法を紹介します。

スポンサーリンク

HTMLの表の仕組み

まずは表の仕組みについて、簡単に確認しましょう。WPで表をデザインするには、少しだけHTMLの知識が必要になります。

表のカスタマイズ 未アレンジ

例えば上のような表をエディタから挿入し、HTMLで表示させるとこうなります。

<table class="wp-block-table">
 <tbody>
  <tr>
   <td>名前</td><td>ザトウクジラ</td><td>コウノトリ</td><td>ネコ</td>
  </tr>
  <tr>
   <td>住処</td><td>海</td><td>山</td><td>不明</td>
  </tr>
  <tr>
   <td>体重</td><td>30,000 kg</td><td>5 kg</td><td>4 kg</td>
  </tr>
  <tr>
   <td>特徴</td><td>大型哺乳類</td><td>夫婦で子育て</td><td>バランス抜群</td>
  </tr>
 </tbody>
</table>

表の要素としては、tbody(table body)、tr(table row)、td(table data)があります(本来はth(table header)があるのですがGutenbergの表ではないので今回は割愛します)。

言葉だけではわかりにくいので、それぞれが表のどの部分を表しているか、下を見て下さい。

HTMLの表の見方

trが行で、tdがセル(各データ)だと覚えてもらえればOKです。そして、列数=tdの数になります。

では、これを踏まえた上で表のアレンジを行いましょう。

CSSで表をアレンジ

ここでは、下の表を…

表のカスタマイズ 未アレンジ

次のようにアレンジしてみます。

表のカスタマイズ 最初のセル色を変える

このアレンジはCSSへの記述で可能ですが、CSSを書く前にどうやって反映させるかの確認をしましょう。と言っても難しいことはなく、これは表を挿入すると画面の右にある高度な設定へクラス名(ここではtableとしています)を書くだけでOKです。

表の高度な設定
WPの編集画面にある表の高度な設定

これを踏まえた上でCSSを書きます。

基本的にnth-child(n)でOK

表のアレンジは、nth-child(n)という疑似クラスで簡単に行うことが出来ます。nth-child(n)のnの部分はn番目という意味です。 例えば、1行目ならtr:nth-child(1)、1列目ならtd:nth-child(1)という記述をします。

では、first-rowというクラス名に割り当てて書いてみます。最初の行の色を変えるならCSSに

.first-row tr:nth-child(1){background-color:#009933;}

と書きます。すると、表は下のようになります。

表のカスタマイズ  列を緑にする

文字の色が見にくいので、白+太字にしましょう。先ほどのCSSに2行目を追加しました。

.first-row tr:nth-child(1){background-color:#009933;}
.first-row tr:nth-child(1) td{color:#fffafa;font-weight:bold;}

表のカスタマイズ  文字を白にする

見やすくなりましたね。次は、1列目の色を変えます。CSSの3行目に、td:nth-child(1)で1列目を指定します。

.first-row tr:nth-child(1){background-color:#009933;}
.first-row tr:nth-child(1) td{color:#fffafa;font-weight:bold;}
.first-row td:nth-child(1){background-color:#a7d28d;}

これにより、1列目の色が下のように変わりました。

表のカスタマイズ 1列目の色を変える

ですが、"名前"のセルまで色が変わってしましましたね。これは、trよりもtdの方が優先されるからです。1列目の色は揃えたいので、さらに1行CSSを下のように加えます。

.first-row tr:nth-child(1){background-color:#009933;}
.first-row tr:nth-child(1) td{color:#fffafa;font-weight:bold;}
.first-row td:nth-child(1){background-color:#a7d28d;}
.first-row tr:nth-child(1) td:nth-child(1) {background-color:#009933;}

tr:nth-child(1) td:nth-child(1)は1行目×1列目のセルを指定します。これにより、表が下のように完成しました。

表のカスタマイズ 最初のセル色を変える

この他によく使うアレンジとして、

奇数行はtr:nth-child(odd)

偶数行はtr:nth-child(even)

で指定が出来ます。background-colorでセルの色を変えたりすれば、見やすい表が作成できますね。

オリジナルのフォーマットをいくつか作ってCSSに入れておけば、場面によって使い分けやすくなります。サイトの個性を出すためにも、表のアレンジも頑張っちゃいましょう!!

PC, WordPress

Posted by 管理人