カスタムメニューウィジェットで自由度の高いメニューをつくる　実践編　その1

カスタムメニューウィジェットで自由度の高いメニューをつくる(1）でサイドバーにカテゴリーやページ、任意の場所へのリンクなどを混在させたメニューの作り方と、それがどのように出力されるのか、という事を見てみました。

今日は前回作ったメニューにどのようにCSSでデザインを当てはめていけばよいのか、実際に作りながら考えていこうと思います。ついでに、デザインをCSSで表現するために、どんな考え方をするのか、という例もご紹介。一粒で2度おいしいこの企画、楽しみながら読んでいただけたらうれしいです。

サンプルメニュー

前回作ったメニューがこちら。Twenty Tenのデフォルトで表示しています。

今回ご用意したサンプルはこちらの3種。

デザイン1はどんなページにもあいそうなシンプル系、デザイン2はちょっとシックな感じのサイトにいいかな、デザイン3はちょっとかわいい感じで、ショップなんかにどうでしょう？という感じで作ってみました。

このようなデザインがあった時、どうやって実現するか？今回はWordPressですので、あらかじめ決められたクラス名などを使いますが、いちから考えていくときの参考にもなると思います。ぜひ一緒に考えてみて下さい。

「コピペするから結論だけ教えてよー。」っていう方はぐぐ〜〜っと下の方に一式用意してありますので、そちらをどうぞ。

メニューを左に

今回のサンプルは、3種ともメニューを左に、コンテンツ部分を右にするために、以下のCSSを当てはめてあります。こちらはすべて共通です。
この考え方はTwenty Tenのレイアウトを変える(3)〜サイドバーを左にするに書いてあります。

#container {
	float: right;
	margin: 0  0 0 -240px;
}
#content{
	margin: 0 0 0 280px;
}
#primary { 
    float: left; 
}

デザイン1

デザイン1です。

メニューに少し濃いグレーと薄いグレーの2重の背景色がついています。メニューのタイトルはさらに濃いグレーで囲まれていますね。

親には矢印、子には三角矢印がついています。それぞれのひとまとまりごとにボーダーで区切られています。

CSSの設定

これをCSSで組んでみましょう。全体の流れはこんな感じです。

2重の背景色はボーダーで

背景が2色になっているように見えますが、外側の濃いグレーをボーダーで作ってしまえば簡単です。
メニューの囲みは「widget_nav_menu」でしたね。薄いグレー#F2F2F2を全体の背景色に、#E7E7E7で5pxの幅のボーダーで囲みます。

.widget_nav_menu{
   background: #F2F2F2;
   border: solid 5px #E7E7E7;
}

メニュータイトルの変更

メニュータイトルは文字色が#FFFの白、背景色が#CBCBCBの少し暗いグレーです。
上下左右たっぷりと余白がとってあるので、paddingを20pxにします。

.widget_nav_menu .widget-title{
   padding:20px;
   color: #FFF;
   background: #CBCBCB;
}

リストマークを画像に変える

次にリストマークを画像にします。まず、list-style: none　でもともとのリストマークを消し、background: url(img/menu1-list.gif) でリストマークを背景画像として表示させます。background-positionやpaddingなどを使ってちょうど良い場所に表示させましょう。

.widget-area .widget_nav_menu li {
	list-style: none;
	background: url(img/menu1-list.gif) no-repeat;
	background-position: 0 8px;
	padding: 5px 0 5px 15px;	
}

子アイテムは違う画像に

このままですと、子アイテムも同じマークがついてしまうので、小さい矢印にします。
画像の大きさが違いますので、background-positionやpaddingも再調整します。

.widget-area .widget_nav_menu li li{
    background: url(img/menu1-list-c.gif) no-repeat;
    background-position: 0 11px;
    padding: 5px 0 5px 7px;	
}

アイテムごとに区切り線

リストの上に薄いグレー#DDDで1pxのボーダーを入れます。子アイテムには入れないので、border: noneで上書きして消してしまいます。

.widget-area .widget_nav_menu li {		
	border-top: solid 1px #DDD;	
}
.widget-area .widget_nav_menu li li{
    border: none;
}

一番上のボーダーを消す

このままでは一番上（タイトルとの境目）にもボーダーが入ってかっこわるいので、消してしまいましょう。overflowとマイナスのマージンを使います。

このテクニックはCSS HappyLifeというCSSのことがとてもよくわかるブログの「とっても使えるoverflowプロパティ。その使い方色々。」に紹介されています。「02 リストの最初だけborderを消す」というところです。とっても分かりやすいので、ぜひ読んで見てくださいね。

.widget-area .widget_nav_menu ul{
	margin-left: 0;
	_zoom: 1;  
    　overflow: hidden; /*リストの一番上ボーダーを消す*/
}
/*リストボーダー*/
.widget-area .widget_nav_menu li {
　　margin: -1px 5px 0 5px;		
}

メニュータイトル下に区切り

メニューのタイトル下とメニューアイテムの一番上の間に背景が見えているような区切りがあります。これをメニューの外側と同じようにボーダーで作ります。

.widget_nav_menu .menu  {
	border-top: solid 5px #E7E7E7;
}

リンクのクリックできるエリアを広げる

ハイ！！これ大事です。試験にでます。（嘘ですゴメンナサイ）

これは、デザインとは関係がないのですが、普通にテキストにリンクしてある状態ですと、そのテキストの部分しかクリックできません。テキストが短かったりするとしっかりカーソルをあわせなくてはいけないので、ちょっと大変です。見ている人にやさしくないですね。ほんのちょっとの手間ですので、ぜひやってみて下さい。こういうちょっとした事が再訪につながるんですよ。

インライン要素である＜a＞タグにそのまま幅を設定しても認識されないのでdisplay: blockでブロックにしてから、幅を持たせます。

.widget_nav_menu a{
   display: block;
   width: 200px;
}

文字色を変える

リンクの文字色は基本的にはブラウザのデフォルトや、それに近い青にしておく事が好ましいのですが、ここはメニューですので、デザインにあわせて文字色も変えましょう。#333に、マウスを上に重ねた時（hover）をオレンジ色に変えます。

.widget_nav_menu a{
   color: #333;
}
.widget_nav_menu a:hover{
   color: #FF6600;
}

CSSのまとめ

はい、どうでしょうか。今までの設定を一つにまとめました。

/* *****************************************************
 *	デザイン1
 * *****************************************************/
/*メニューに背景色　ボーダーで囲む*/
.widget_nav_menu{
	background: #F2F2F2;
	border: solid 5px #E7E7E7;
}
/*メニュータイトル*/
.widget_nav_menu .widget-title{
	padding:20px;
	color: #FFF;
	background: #CBCBCB;
}
/*タイトル下　メニュー始まりにボーダー*/
#main .widget-area .widget_nav_menu .menu  {
	border-top: solid 5px #E7E7E7;
}

#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: solid 1px #DDD;
	background: url(img/menu1-list.gif) no-repeat;
	background-position: 0 8px;
	padding: 5px 0 5px 15px;	
}
.widget-area .widget_nav_menu li li{
    border: none;
    background: url(img/menu1-list-c.gif) no-repeat;
    background-position: 0 11px;
	padding: 5px 0 5px 7px;	
}
.widget_nav_menu a{
	color: #333;
	display: block;
	width: 200px;
}
.widget_nav_menu a:hover{
	color: #FF6600;
}

＊所々で#main から指定している部分はもとのCSSをうまく上書きするためです。

ここまでの考え方が分かっていただければ、色違いのメニューなんかはすぐできてしまいますね。

という訳で。。。。

素材もサービス

じゃん！

色違いの矢印素材もご用意しました。ありがちな素材ですが、今回の設定そのままなら、背景としての位置調整が（多分）いらないはずです。よろしければあわせてダウンロードして色違いメニューに挑戦してみて下さい。
素材は背景が明るい色の透過gifになっています。

中身はこんな感じです。

デザイン1のパターンで使える素材を詰め合わせしました
デザイン1の素材をダウンロード

まだまだ続くよ

デザインサンプルの一つ目で、すっごく長くなってしまったので、2番目、3番目については、また続きという事で。

あー。「次回に続く」って多すぎる気もしますが、どうしても長くなっちゃうんですよね。手っ取り早く結論のサンプルコードと素材だけおいておけばいいのかな、とも思うのですが、色々やってみたいけど、難しくてうまくいかない、という人のためになれればなぁ。。と思っているので、このスタイルでがんばりたいと思っています。

でも、どうなんでしょ。長過ぎ。。。ですか？？