【WordPress】投稿ページTableのCSS変更方法【オリジナルテーマ】

SIM

WordPressオリジナルテーマで表のCSSを変更して見やすくする方法を紹介します。

方法自体は、Chromeのデベロッパーツールで表のクラス属性を特定して、そこにCSSを当てていくイメージです。

一番上の行の色を変える

イメージ的には下記画像のような表にします。初期設定ではグレー色はついておらず、太文字でもありません。

表の一行目のCSSセレクター

下記CSSのセレクタのうち「.single-post」と「 .wp-block-table」はWordPressが割り当てたクラス属性です。その他は私が付けたクラス属性になります。

// 表の１行目
.single-post .l-main .l-section .wp-block-table tr:first-of-type{
  background-color: fw.$line-gray;
  font-weight: 600;
}

ここでは、セレクタの詳細度を上げるために、下記のように書いています。

表１行目をCSSで装飾

下記のようにbackground-colorとfont-weightのプロパティで背景色と文字の太さを変更しています。

// 表の１行目
.single-post .l-main .l-section .wp-block-table tr:first-of-type{
  background-color: fw.$line-gray;
  font-weight: 600;
}

さいごに

以上、WordPressオリジナルテーマの投稿ページで表の装飾をCSSで行う方法でした。

SIM

基本、CSSセレクターを間違えな帰ればミスなく実装できる重ます。