【CSS+HTML】プラグインを使わずにWordPressで表を作り、デザインを変えて縞々カラーにする方法。

ワードプレスで、プラグインを使わないで表(テーブル)を作成し、見た目を変更する方法と、そのCSS

今回は、ワードプレスの記事中に表(テーブル)を「プラグインを使わずに」作成し、その見た目を変更する方法を説明します。対象となる読者はワードプレス初心者やHTML&CSSなどにあまり詳しくない初心者です。

目次


(1) 今回作る表(テーブル)デザインの完成イメージ

(2)表の作り方とHTMLとCSSのコードについて




(1) 今回作る表(テーブル)デザインの完成イメージ

まず、今回つくる表はこのようなものになります。

見出し1見出し2見出し3
データ11データ12データ13
データ21データ22データ23
データ31データ32データ33
データ41データ42データ43


各項目の見出し部分と、各データから構成されている表です。今回は、行(縦)が5つ、列(横)が3つの表にしてみました。

この表のデザイン上(外観上)のポイントは、



・各項目の見出しを作成

・各項目の文字をそれぞれの空間の中央に寄せて配置

・背景色を交互に設定し、縞々模様のようにしている

という3点です。

では、これら3点を満たす表を実際にワードプレスで作っていきます。




(2)表の作り方とHTMLとCSSのコードについて

①表の作り方とHTMLコード

まずワードプレスの記事作成画面から、行5で列3の表を作りましょう。

ワードプレス(WordPress)で表を作る方法



いつものようにワードプレスのエディタで記事を作る作業で、「ブロックの追加」をクリックして、

ワードプレス(WordPress)で表を作る方法



フォーマット項目にある、表のアイコンをクリック。

ワードプレス(WordPress)で表を作る方法



列数と行数を入力しましょう。今回は3列、5行です。これで表の枠が完成しました。

では、それぞれの項目欄に文字を入力していってください。

次に、この表のHTMLコードを見てみましょう。

ワードプレス(WordPress)で表を作る方法



できた表のどこでもいいのでクリックし、「・・・」が縦に並んでいるアイコンをクリックしましょう。すると上画像のような項目が登場します。そこで、「HTMLとして編集」を選びます。すると、このように表のHTMLコードが登場します。

<figure class="wp-block-table">
<table>
<tbody>
<tr><td>見出し1</td><td>見出し2</td><td>見出し3</td></tr>
<tr><td>データ11</td><td>データ12</td><td>データ13</td></tr>
<tr><td>データ21</td><td>データ22</td><td>データ23</td></tr>
<tr><td>データ31</td><td>データ32</td><td>データ33</td></tr>
<tr><td>データ41</td><td>データ42</td><td>データ43</td></tr>
</tbody>
</table>
</figure>



横にアルファベットが並んでいると見難いので、上のようにちょっと整形してみました。この作業は特に必要ありませんが、見やすくなります。

ここで、<tr>と</tr>によって構成されているパーツが5つあるのがわかると思います。その中の最初のパーツの、

<tr><td>見出し1</td><td>見出し2</td><td>見出し3</td></tr>



というパーツに着目しましょう。

これは「見出し」項目欄のパーツですが、実は、表のHTMLコード(タグ)では「見出し」は<td>ではなく、<th>にする必要があります。<td>は見出しではなく、実際のデータを表すタグとなります。

そこで、このパーツの<td>を<th>へ、</td>を</th>へ修正します。すると、以下のようになります。

<figure class="wp-block-table">
<table>
<tbody>
<tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
<tr><td>データ11</td><td>データ12</td><td>データ13</td></tr>
<tr><td>データ21</td><td>データ22</td><td>データ23</td></tr>
<tr><td>データ31</td><td>データ32</td><td>データ33</td></tr>
<tr><td>データ41</td><td>データ42</td><td>データ43</td></tr>
</tbody>
</table>
</figure>



あくまで編集したのは最初の<tr>~</tr>パーツだけで、他はいじっていません。

これで今回の表のHTMLは完成しました。

② CSSコード



では次にこの表のデザインを変えましょう。項目ごとに交互に背景色が入れ替わる、縞々模様のようなデザインへと変更します。それには、ワードプレスのテーマ編集から「追加CSS」機能を使い、独自のCSSを追加し、適用します。

今回のCSSは次のコードとなります。

.entry-content table{
  border-collapse:collapse;
  margin:0 auto;
  border:solid 1px #4e454a;
}


.entry-content th{
  font-size:;
  color:#FFFFFF;
  background-color: #4e454a;
  padding:20px 40px;
  text-align: center;
}

.entry-content td{
  padding:10px;
  text-align: center;
}



.entry-content tr:nth-child(2n+1) {
  background-color:#e6eae6;
}



これをこのままコピーして、追加CSSの欄にペーストしてください。追加CSSの欄は、ダッシュボードの「編集」→「カスタマイズ」→「追加CSS」で登場します。

上のコードにおける、padding、colorなどはみなさんの好みや、使用しているテーマの雰囲気にあわせていろいろ変更してみましょう。

各項目に「.entry-content」という文字を加えているのは、あくまで「各記事の本文中で」使われている表だけにこのCSSを適用させるためです。

こうしておかないと、もし本文以外の場所に表(テーブル)のタグ・コードが使われている場合には、それらの表にまでこのCSSが適用されてしまい、テーマの見た目が崩れてしまう可能性があります。それを避けるためです。

詳しい説明は省きますが、交互に背景色が入れ替わる縞々模様の設定は、

.entry-content tr:nth-child(2n+1) {
  background-color:#e6eae6;
}



という部分が担当しています。

上述のように、<tr>と</tr>で挟まれたパーツが5つあるわけですが、その奇数番(つまり2n+1)のパーツにだけ、背景色が#e6eae6となるよう指定しています。そのような指定を可能にするのが、「nth-child(2n+1)」というコードになります。

なお、最初のパーツである「見出し」部分が1番目となるので、本来ならばその背景色も「#e6eae6」という色になるはずですが、<th>タグに対するCSSは、<td>タグに加えられたCSSよりも優先されます。

よって1番目のパーツである部分(<th>タグを使っている部分)には、その<th>タグに対して設定した「#4e454a」というカラーが優先されます。

この「nth-child( )」はCSS上で疑似クラスと呼ばれる特殊な仕組みとなります。これについては今回は説明をしませんが、興味があれば調べてみてください。使い方を覚えると非常に便利で強力な武器となるでしょう。

ちなみに、偶数番の背景色を変えたい場合は、2n+1を、2nとすればOKです。

それではみなさん、楽しいワードプレスライフを。

One comment

  1. […] 上の画像で、テーブル内の各項目の背景色(白とグレー)が交互に登場していますが、これについては、過去記事「【CSS+HTML】プラグインを使わずにWordPressで表を作り、デザイン…をご覧ください。 […]

Comments are closed.