Bloggerでガジェットに画像を使った枠線を付ける記述

以前に書いた…

 Bloggerでバック・ナンバーと読者ガジェットの見出し(h2)に画像を使う記述

…の記事時点から…

サイドバーの見出し画像を変えたので…

ついでに…枠線も画像で作りました…

記述のみで表示した場合と…

画像を使った場合の違いは…

虫眼鏡で見ないと判らんッ…

でも…まぁ…凝った画像を使いたい方も居るだろうし…

で…書いておきます…

画像は１か所に１個しか使えませんので…

使える画像は２個(たぶん…)

更に…記事内容量に応じて…

縦（ｙ方向）に画像を伸ばさなければなりません…

なので 当サイトでは…

上部枠線は見出し（h2）下部で代用して…

そこに左右枠線画像を繋げ…

記事分だけ ｙ 方向に伸ばし…

下部枠線画像で閉じています…

メンドクサイですが…枠線無しではなく…

border-top を記述すると…

レンダリングエンジンによっては…

border-bottom まで表示されて…

下部枠線がダブルになってしまったため

苦肉の策です…

あくまで…自作の凝った画像を使いたい方用です…

一応… 当サイトのシンプルな左右枠線の作り方も…

210(サイドバーの横幅) x 50(ご自身の加工しやすい大きさ)で…

枠線に使用したい色の画像を用意…

もう１枚…文字部分を透過させるため…

枠線の太さを差し引いた違う色の画像を用意…

当サイトは 2px の枠線なので…

210-2x2=206 で 206x50 です…

２枚の画像を中央合わせで重ね…

210x1 のサイズにトリミングして…

gif のオプティマイザで…

２枚目の色を透過指定して出力で完成…

因みに下部枠線は…

210x50/208x49/206x48 サイズで３枚の画像を…

中央&上合わせで重ね(３枚目は透過色)…

210x5 のサイズでトリミングしています…

最後になりましたが…

見出し(h2)も含めた CSS の記述です…

.sidebar h2 {
background:url(見出し画像URL) left no-repeat;
border:none;
line-height:45px;
color:#2222FF;
text-align:center;
letter-spacing:1px;
font-size:14px;
font-weight:bold;
}
.sidebar .widget { 
background: url(左右枠線画像URL) repeat-y;
border:none;
margin:0;
padding:0;
}
.sidebar .widget-content { 
background: url(下部枠線画像URL) no-repeat bottom;
margin-bottom:2em;
padding:.5em;
border:none;
}

2010.02.06 追記

見出し(h2)に指定していた背景色を外しました…
コレにより…枠線を上まで伸ばしました…
Internet Explorer では…エントリータイトルを表示設定にすると…
枠線画像を最後まで読み込めないようです…
遅過ぎますッ
Google Chrome では問題無しです…

2010.03.24 追記

現在はリニューアルして…
border-left / border-right / border-bottom
…の…各プロパティで指定しています…

Tips Universal Header Main Footer Current-Label : Sidebar