記事の背景を変更 # 12,Feb,2007 Monday - 15:38 # |[ブログカスタマイズ]テンプレート

随分とデザインを考えるのに時間が掛かりました。
半分はサボっていたのですが・・・（汗

くどさは解消されませんでしたが取りあえず形にはなったかと。
これ以上いじっているといつまでも本題に入れなくなりそうなのでこのデザインでいきます。

フォントの色や形はいじりますが背景はコレに決定です。

今回も以下の手順で設定しました。

管理画面
↓
管理画面の設定
↓
[テンプレート作成/編集]の方式でテンプレートメーカ使用を選択
↓
テンプレート作成/編集
↓
TOPブロックの背景画像部の参照ボタンから画像を選択
↓
HTML編集のプレビューで確認してOKだったら、画像をアップロード（上部のボタン）

ただ、例によって記事のフッターの編集項目がないので自分でスタイルシートの以下の部分に追記。

.EntryFooter {
height: 45px;
text-align:center;
padding: 13px 0px 0px 0px;
font-size:12px;
background-color:#FFFFFF;
background-image:url('http://file.○○○.blog.shinobi.jp
/△△△.gif');
background-repeat:no-repeat;
}

タイトル部分と記事部分、フッター部分で画像を分けているのですが、IEとFirefoxとでは表示のされ方が違うという現象が起きました。
IEだとタイトル画像と記事部分の画像の間におかしなスペースが発生、Firefoxだとスペースは発生しないが設定したpaddingに合わせてブロックが大きくなってしまいました。

そこで苦し紛れの改善策。

今までタイトルスペースの高さと幅を固定していたのですが、それを除去。
タイトル部分に入る文字のpadding設定を共通のものとIE専用のものと両方用意しました。

.EntryTitle {
text-align: left;
font-size:14px;
margin: 0px 0px;
padding: 13px 10px 12px 60px;
_padding: 13px 10px 15px 60px;
background-color:#ffffff;
background-image:url('http://file.○○○.blog.shinobi.jp
/×××.gif');
background-repeat:no-repeat;
}

赤字の部分がそうですが、アンダーバーの無いのが共通設定で、アンダーバーがあるのがIE専用の設定です。

俗に言うCSSハック・・・で良いですよね？（汗