wordpressサイト立ち上げの覚書 その⑨ 見出しH4の装飾

wordpressに乗り換えてサイトを作った覚書です。

味気なかったH4見出しの先頭にマーク画像を挿入してみた

↑この見出しのことです。

ついでに背景色も設定。画像はあまりデザインに凝ると、一応技術系なので賑やか過ぎになるかも。

CSSの変更だけで完了。もともとのボーダーを消し、背景色と画像を挿入。

background-positionにcenterを指定したので、見出しが複数行でもセンター配置になることを確認。画像はモノクロPNGファイルを作り（アイキャッチ画像のもの）、例によってPECO STEPさんで透明色追加。

.entry h4 {
    clear: both;
    font-size: 1.1em;
    font-weight: 800;
    /* border-bottom: 1px dotted #776C61; */
    padding: 3px 10px 3px 40px;
    margin: 20px 10px 15px 10px;
    color:white;
    background-color: #5e828b; /* H4 装飾 */
    background-repeat: no-repeat;
    background-position: 5px center;
    background-image: url(img/H4_Mark1_45.png); 
    background-size: 23px 23px;
}

ちなみに画像の出どころは？

以上