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

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

blog.hatena.ne.jp

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

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

デフォルトでの表の罫線。色がかなり薄い。

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;
}

幅が表の罫線に合わなかった。

試行錯誤2回目

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

www.tagindex.com

paulownia.hatenablog.com

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

横の罫線が色濃くなったが、縦の罫線は変わらなかった。

試行錯誤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;と記す事で、太さを調整できた。

表の罫線が色濃くなった。

表の罫線が色濃くなり、太さの調整が反映された。

-end-