メニュータイトルもブロックも全部を画像で

今度は全部を画像でおこないます

メニュータイトルの上の画像をそれぞれ作ります・・
手抜きですみません（お持ち帰り画像が用意できません)・・

なんせパソコンの調子が・・・
作成した画像データの入っているDディスクをBIOSからして認識しません(T_T)

下の画像は

サイドバーですから表示される限度がありますからそれほど長くする必要はありませんが・・

短いと上画像と下画像の間に隙間ができる場合があります・・

始めにＣＳＳでメニュータイトルや枠を消します

/*サイドバーブロック*/
.skinMenuHeader{
background-color:transparent;/*元のメニューヘッダー背景を消す*/
}
.skinMenu{
background-color:transparent;/*元のブロック枠を消す（注）*/
}
.skinMenuHeader{
margin: 0;
padding: 0;
text-indent:-9999px;/*メニュータイトルを消す*/
background-position:center;
background-repeat:no-repeat;
}
.skinMenuBody{
background-color:transparent;/*枠内の背景色*/
}

次は下の画像を配置します

サイドの幅の広い（横幅300px）ほうと狭い（横幅180px）ほうがありますから注意します

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

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

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

下の画像が出来たらそれぞれのメニュータイトル画像(上画像)を設定します

.recentEntriesMenu .skinMenuHeader{/*最新の記事*/
background-image:url(画像のURL);
height:65px;/*画像の縦*/
}
.calendarMenu .skinMenuHeader{/*カレンダー*/
background-image:url(画像のURL);
height:65px;/*画像の縦*/
}
.themeMenu .skinMenuHeader{/*テーマ*/
background-image:url(画像のURL);
height:65px;/*画像の縦*/
}
.archiveMenu .skinMenuHeader{/*月別*/
background-image:url(画像のURL);
height:65px;/*画像の縦*/
}
.rankingMenu .skinMenuHeader{/*ランキング*/
background-image:url(画像のURL);
height:65px;/*画像の縦*/
}
.bookmarkMenu .skinMenuHeader{/*ブックマーク*/
background-image:url(画像のURL);
height:65px;/*画像の縦*/
}
.favoriteMenu .skinMenuHeader{/*お気に入りブログ*/
background-image:url(画像のURL);
height:65px;/*画像の縦*/
}
.profileMenu .skinMenuHeader{/*プロフィール*/
background-image:url(画像のURL);
height:65px;/*画像の縦*/
}
.readerMenu .skinMenuHeader{/*このブログの読者*/
background-image:url(画像のURL);
height:65px;/*画像の縦*/
}
.recentCommentMenu .skinMenuHeader{/*最近のコメント*/
background-image:url(画像のURL);
height:65px;/*画像の縦*/
}