カテゴリー
プログラム 社内SE

WordPress twenty- twentyのテーブル変更

WordPress twenty-twentyでこのブログを書いているのだが、付属のテーブルを少しだけおしゃれに外枠をなしにすることにした。

テーブルをブロックで作成した際に、[追加CSSクラス]に[is-style-regular my-style-stripes]とすると以下のような外枠なしの表ができる。

人生項目 内容
プログラム 仕事のために仕方なくやっている
家事 家族のために仕方なくやっている
DIY 家族のために仕方なくやっている
囲碁 ここ数年打っていない。打つ相手もいない。。。
サンプル

やり方は[外観]-[テーマエディター]でstyle.cssを選択し以下のCSSを最後に追加する。(もしくは、[外観]-[カスタマイズ]で左側ペインの[追加CSS]に追加。)

.my-style-stripes table{
	border:none;
}
.my-style-stripes table tr{
	border:none;
}
.my-style-stripes table tbody tr:nth-child(odd) {
	background: #dcd7ca;
}
.my-style-stripes table thead th {
	border-top:none;
	border-right: none;
	border-left: 1px solid #6d6d6d;
	border-bottom: 2px solid #6d6d6d;
}
.my-style-stripes table tbody td{
	border-top:none;
	border-right: none;
	border-left: 1px solid  #6d6d6d;
	border-bottom: 1px solid  #6d6d6d;
}
.my-style-stripes table thead th:first-child, .my-style-stripes tbody td:first-child{
	border-left: none;
}
.my-style-stripes tbody tr:last-child td {
	border-bottom: none;
}