賢威7.1のテーブルヘッダーの背景色を変更する

【編集】　base.css

賢威には、最初から綺麗なテーブルが標準で装備されています。
下のコードを投稿するだけで、テーブルが完成します。

<table>
<thead>
<tr>
<th></th>
<th>項目名</th>
<th>項目名</th>
</tr>
</thead>
<tbody>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
</tbody>
</table>

	項目名	項目名
項目名が入ります	項目内容	項目内容
項目名が入ります	項目内容	項目内容
項目名が入ります	項目内容	項目内容

あとは、項目名や項目内容など、書き換えするだけです。

しかし、テーブルによっては、ヘッダーの色や文字の色などを変更したい場合があります。
今回は、テーブルヘッダーの色を変更する方法を解説します。

賢威7.1のテーブルヘッダーの背景色を変更する

変更するのは①の背景色と②の背景色。

これは、base.cssにちょっとコードを付け加えるだけで変更できます。

Base.cssを編集して変更する方法

わかりやすいように、①の背景をオレンジ色(#ffff00)に、②の背景を黄色(#ff4500)にしてみます。

子テーマのbase.cssに以下のコードを付け足します。

/*テーブルヘッダーの背景色*/
th {
	background-color: #ffff00;
}
thead th{
	background-color: #ff4500;
}

確認してみると・・

賢威7.1のテーブルヘッダーの背景色を変更する

それぞれ、background-color:の後のカラーコードを変えるだけで、背景色を変更できます。

HTMLで変更する方法

base.cssを編集すれば簡単にヘッダーカラーを変更出来るのですが、全てのテーブルに反映されてしまいます。
テーブルによってヘッダーカラーを変更したい場合もあります。

ヘッダーカラーをテーブルごとに色を変えたい場合は、cssを編集しなくとも、HTMLソースに少し付け足すだけで変更できます。

最初のHTMLコードを以下のように書き換えます。

<table>
<thead>
<tr>
<th style="background-color: #ff4500"></th>
<th style="background-color: #ff4500">項目名</th>
<th style="background-color: #ff4500">項目名</th>
</tr>
</thead>
<tbody>
<tr>
<th style="background-color: #ffff00">項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th style="background-color: #ffff00">項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th style="background-color: #ffff00">項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
</tbody>
</table>

確認してみると・・

	項目名	項目名
項目名が入ります	項目内容	項目内容
項目名が入ります	項目内容	項目内容
項目名が入ります	項目内容	項目内容

オレンジ色に変更した部分のコードは

<th style="background-color: #ff4500"></th>
<th style="background-color: #ff4500">項目名</th>
<th style="background-color: #ff4500">項目名</th>

黄色に変更した部分は

<th style="background-color: #ffff00">項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th style="background-color: #ffff00">項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th style="background-color: #ffff00">項目名が入ります</th>

となります。

要するに、thタグに

style＝“background-color:カラーコード”

として、お好きなカラーコードに書き換えれば良いわけです。

以上、テーブルのヘッダーカラーを変更する方法の解説でした。