Bloggerの日付ヘッダー（h2）に画像を使う記述

いつも通り…

テンプレートのバックアップをしてから…

「HTMLの編集]で投稿（Posts）セクションに…

h2.date-header を探します…

テンプレートによって記述は様々かと思いますが…

何はともあれ…記述を…

h2.date-header {
background: url(画像URL) no-repeat;
border: 0;
margin: 0;
padding: 0 0 0 10px;
line-height: 30px;
color: #2222FF;
text-align: left;
letter-spacing: 1px;
font-size: 14px;
font-weight: bold;
}

ご自身で用意した画像に合わせて…

アジャストしてネン…

当サイトでは 490x30 のサイズです…

日付表示位置は padding で調整しています…

ここで…

h2.date-header とは別に h2 も…

Posts や Headings セクションで…

定義しているテンプレートもあると思いますが…

h2 で margin を指定してあると…

サイドバーとメインの…

始まりの位置がズレル場合もあるので…

注意が必要です…

オイラの使用テンプレートでは…

Headings セクションの h2 で…

margin が指定されていたので…

h2 {
margin: 1.5em 0 .75em;
font: $headerfont;
line-height: 1.4em;
text-transform: none;
letter-spacing: .2em;
color: $sidebarcolor;
}

この記述ごと削除してあります…

まぁ…このあたりはお好みで…（￣ー￣）邪笑

アッと…「テンプレートを保存」もお忘れなく…

現在は以下の方法で表示しています…

 【CSS3】Bloggerの記事タイトルと日付ヘッダーをパステル調の立体的リボンでデザインする

Blogger Tips Current-Label : Blogger Template Customize