【編集】 base.css

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

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

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

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

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

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

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

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

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

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

確認してみると・・

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

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

HTMLで変更する方法

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

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

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

確認してみると・・

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

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

黄色に変更した部分は

となります。

要するに、thタグに

style=“background-color:カラーコード

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

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