はてなブログの見出しのデザインをカスタマイズして枠で囲む

枠で囲みたい

はてなブログでは見出しはHTMLタグの以下で管理されているので

大見出し=h3
中見出し=h4
小見出し=h5

見出しのデザインをいじるためにはこのh(数字)をいじっていく必要があります。

私は見出しを囲むために以下の定義をデザイン＞CSSに入れています。

.entry-content h3 {
  padding: 6px 10px;
  border-left: 8px solid green;
  border-bottom: 1px solid black;
  color: #333;
  line-height: 1.5;
  background-color: #f5f5f5;
}

今回は横線を緑（Green）で下線を黒（Black）にしており、この線のの太さはpxの前の数字をいじれば変わります。
この数値やカラーをいじれば自由にカスタマイズできるので、ブロガーの方はぜひ自由にお使いください。