blog-RuinDig

短かったり長かったりする。Articles are my own.

はてなブログの公式テーマ「Smooth」の表の罫線の色や太さを調整できるCSS

このブログでは、はてなブログの公式テーマ「Smooth」を使っている。

blog.hatena.ne.jp

デフォルトでの表の罫線の色

デフォルト(初期状態)での表の罫線の色が薄かったので濃くしようとした。

f:id:edgeknight:20210117131304p:plainf:id:edgeknight:20210117131313p:plain
デフォルトでの表の罫線。色がかなり薄い。

CSSの試行錯誤を数回重ねた。色コードは以下を参考にした。

www.colordic.org

試行錯誤1回目

1回目は以下を参考にした。

www.nishishi.com

table {
   border-collapse: collapse;
   border: solid #a9a9a9;
}
table th, table td {
   border-style: solid;
   border-color: #a9a9a9;
}

f:id:edgeknight:20210117132206p:plainf:id:edgeknight:20210117132211p:plain
幅が表の罫線に合わなかった。

試行錯誤2回目

2回目は以下の2つを参考にした。

www.tagindex.com

paulownia.hatenablog.com

.table, tr, td, th {
border-style: solid;
border-color: #a9a9a9;
}

f:id:edgeknight:20210117132428p:plainf:id:edgeknight:20210117132231p:plain
横の罫線が色濃くなったが、縦の罫線は変わらなかった。

試行錯誤3回目・完成形

完成形となる3回目では以下を参考にした。

www.itjigoku.com

.entry-content table th {
border: 2px;
border-style: solid;
border-color: #a9a9a9;
}
.entry-content table td {
border: 2px;
border-style: solid;
border-color: #a9a9a9;
}

また、border: 2px;と記す事で、太さを調整できた。

f:id:edgeknight:20210117134707p:plainf:id:edgeknight:20210117134712p:plain
表の罫線が色濃くなった。

f:id:edgeknight:20210117151437p:plainf:id:edgeknight:20210117141449p:plain
表の罫線が色濃くなり、太さの調整が反映された。

-end-