サイドメニューのタイトルに背景画像

サイドバーのメニュータイトルに背景画像をつけます

サイドバーには横幅180pxと300pxの2種類がありますので





























このような2種類の画像を用意します（お持ち帰り自由）

まずは・・・　ジャマな枠を消します



/*メニューブロック背景枠を消す*/
.skinMenu{/*枠*/
background-color:transparent;
}
.skinMenuHeader{/*ヘッダー*/
background-color:transparent;
}
.skinMenuBody{/*枠内*/
background-color:transparent;
}




つぎに・・・
メニュータイトルに背景画像を入れます


/*サイドメニュータイトルに背景画像*/
.skinSubA .skinMenuHeader{/*300px*/
background-image:url(画像のURL);
height:28px;/*画像の高さ*/
padding:0;
background-repeat:no-repeat;
}
.skinSubB .skinMenuHeader{/*180px*/
background-image:url(画像のURL);
height:28px;/*画像の高さ*/
padding:0;
background-repeat:no-repeat;
}



つぎに・・タイトルの位置や文字色を画像に合わせます

/*サイドメニュータイトル文字*/
.skinMenuTitle{
color:#ffffff;/*文字色*/
padding:6px 0 0;/*上からの位置*/
text-align:center;/*中央寄せ*/
font-weight: bold;/*太字*/
display:block;
}

タイトル下が空きすぎていますのでスキマをなくします

/*メニュータイトルの下のスキマ*/
.skinMenuBody{
margin-top:0;
}