ほんとにほんとに久しぶりのカスタマイズ記事です。あんまり久しぶりすぎて、自分が何を書いていたのか、すっかり忘れてしまっていました。。

さて、「カスタムメニューウィジェットで自由度の高いメニューをつくる」という事で同じメニューを3通りのデザインにしてみる、という事で考えてきましたが、今回はこの3番目のデザイン。

実践編1、実践編2を読んでいただければ、
このデザインを実現しているCSSもわかっていただけるんじゃないかな〜、と思いまして。。

いきなり結論

はい、今回はいきなり結論ですよ〜〜。

じゃ〜〜ん！

/* *****************************************************
 *	デザイン3
 * *****************************************************/
#main .widget-area ul ul {
	
	margin-left:5px;

}
/*メニューに背景　*/
.widget_nav_menu{
   background: #E8F4DD;
}
/*メニュータイトル*/
.widget_nav_menu .widget-title{
   padding: 15px 0 25px 10px;
   color: #FFF;
   background: url(img/menu3-title-back.gif) no-repeat;
   
}
#main .widget-area .widget_nav_menu ul{
	margin-left: 0;
	_zoom: 1;  
    overflow: hidden; /*リストの一番上ボーダーを消す*/
}
/*リストボーダー*/
.widget-area .widget_nav_menu li {
	list-style: none;
	margin: -1px 5px 0 5px;	
	border-top: dotted 1px #98D685;
	background: url(img/menu3-list.gif) no-repeat;
	background-position: 0 10px;
	padding: 5px 0 5px 10px;	
}
.widget-area .widget_nav_menu li li{
    border: none;
    background: url(img/menu3-list-c.gif) no-repeat;
    background-position: 0 5px;
	padding: 5px 0 5px 15px;	
}
.widget_nav_menu a{
   color: #333;
   display: block;
   width: 200px;
}
.widget_nav_menu a:hover{
   color: #4EA44A;
}

そして素材はこちら！
menu3の素材詰め合わせをダウンロード

さて、皆さん、どのようになっているのかわかりましたか？
クラス名などhtmlの構造はカスタムメニューウィジェットで自由度の高いメニューをつくる(1）に書いてあります。

HTMLを見ながらCSSとあわせて理解できるようになると、WordPressに限らず、色々なテンプレートなどを自分好みにしてみよう、なんていうときにも役に立ちますよ！
ぜひぜひ解読にチャレンジしてみてください。

そしてやっぱり解説が欲しいなって方がいたらコメント下さいね。

という訳で、サイドバーのメニューついては今回で終わりにします。次は。。どこに進もうかな？