サイドバーメニューブロックを画像に

今度はメニューブロック全部を画像にします・・

まずは画像を用意します

狭いサイド用の画像（横幅は180pxで作成します）

広いサイド用の画像（横幅は300pxで作成します）

サイドバーは表示数が限られていますので上と下の2枚で設定します

特に下の画像が短いと途中が表示されませんので余裕を持って作ってください

はじめにＣＳＳで元の枠などを消しちゃいます・・

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

次ぎに上画像と下画像をＣＳＳで設定します・・

/*サイド広300px*/
.skinSubA .skinMenu{
background-image:url(下の画像のＵＲＬ);/*下の画像*/
background-position:bottom;
background-repeat:no-repeat;
padding-bottom:20px;/*Ａ*/
}

.skinSubA .skinMenuHeader {
background-image:url(上の画像のＵＲＬ);/*上の画像 */
background-position:top;
background-repeat:no-repeat;
margin:0;
padding:30px 0 15px 20px;/*上Ｂ右(0) 下Ｃ左Ｄ*/
}
.skinSubA .skinMenuTitle{/*メニュータイトル*/
font-size:1.2em;/*文字サイズ(1.2em ＝ 1.2倍)*/
color:#ff00ff;/*メニュータイトルの文字色*/
font-weight:bold;/*太文字(太字にしない場合はこの行削除)*/
}
/*サイド狭180px*/
.skinSubB .skinMenu{
background-image:url(下の画像のＵＲＬ);/*下の画像*/
background-position:bottom;
background-repeat:no-repeat;
padding-bottom:20px;/*Ａ*/
}

.skinSubB .skinMenuHeader {
background-image:url(上の画像のＵＲＬ);/*上の画像 */
background-position:top;
background-repeat:no-repeat;
margin:0;
padding:30px 0 15px 20px;/*上Ｂ右(0) 下Ｃ左Ｄ*/
}
.skinSubB .skinMenuTitle{/*メニュータイトル*/
font-size:1.2em;/*文字サイズ(1.2em ＝ 1.2倍)*/
color:#ff00ff;/*メニュータイトルの文字色*/
font-weight:bold;/*太文字(太字にしない場合はこの行削除)*/
}

画像の下を調整します・・

padding-bottom:20px;/*Ａ*/　画像の下部分の模様が文字にかからないように調整します

※もし左右サイドにまったく別の画像を設定していた場合はそれぞれ調整します

次はメニュータイトル部分です
タイトルの表示位置を設定します

上の画像の色を変えて説明します・・

たとえば・・・

メニュータイトルを中央寄せにするときは・・

.skinSubA .skinMenuHeader {
background-image:url(画像のＵＲＬ);/ *上の画像 */
background-position:top;
background-repeat:no-repeat;
margin:0;
padding:30px 0 15px 0;/*上Ｂ右(0) 下Ｃ左Ｄ*/
text-align:center;
}

左Ｄを 0 にしてから　text-align:center;　を加えます