« 横型カレンダー(休日表示)の設置 | メイン | 3匹目の世代交代 »

2006年07月05日

エントリータイトルに画像をつける

↑のクローバーの画像の設置方法です。

前のブログでは、自分の思いつきでテンプレートの表示される場所にimgタグを設定していました。

<h3 class="entry-header"><img src="画像のURL"><$MTEntryTitle$></h3>
という具合です。
ところが、ところが・・・
小粋空間さんの記事でCSSでエントリータイトルに画像を表示するを見てショック☆<( ̄□ ̄;)>☆ショック!
その方法は『文書構造とデザインの混在』と『転送バイト数の増加』という理由から“非推奨”と書かれているではないですか!!
そうなんだー。勉強になりました。
ということで今回はこの記事で紹介されているスタイルシートでエントリータイトル部分のスタイルを指定する方法にしました。
具体的にはスタイルシートのエントリータイトル部分
.entry-header {
margin: 15px 0 0;
color: #444444;
font-size: 12px;
font-weight: bold;
padding-left: 17px;
background: url(画像のURL) no-repeat 0px 0.2em;

}
青色の部分を追記します。("17px"や"0.2em"は画像の大きさによって適宜調整)