はてなブログの見出しh2のデザインを変更する

前回の記事を投稿した時に、見出しのh2とh3のデザインが似てることに気付きました。

前回の記事のスクリーンショット（デザイン変更前）

上の画像において、「試したこと」がh2で「ソースコード」がh3なのですが、 同じデザインに見えるため「試したこと」が本文のない見出しのように見えてしまいます。
実際は、フォントサイズが異なっているようですが、明確に違いを出したいので、 はてなブログの「デザインCSS」を変更して、h2のデザインを変えました。

前回の記事のスクリーンショット（デザイン変更後）

上の画像が変更後です。 h2とh3の違いが明確になったと思います。

デザインCSSのコード

変更前

/* <system section="theme" selected="alpha2"> */
@import "/css/theme/alpha2/alpha2.css";
/* </system> */

/* <system section="background" selected="default"> */
/* default */
/* </system> */

変更後

/* <system section="theme" selected="alpha2"> */
@import "/css/theme/alpha2/alpha2.css";
/* </system> */

/* <system section="background" selected="default"> */
/* default */
/* </system> */

.entry-content h2 {
    padding-left: 0.5em;
    border-left: solid 8px #63c4ec;
    border-bottom: solid 2px #63c4ec;
}

補足

デザインCSSのセレクタをh2 とすると下線の変更が反映されず元の点線のままになってしまいます。
テーマCSSでは、記事の見出しのデザインを.entry-content h2で設定されているので、 デザインCSSのセレクタもそれに合わせて.entry-content h2とします。