Twenty Ten のメインメニューを変更する

ヘッダー部分の印象を大きく左右する、メインメニュー（グローバルナビゲーション）部分のデザイン変更について考えてみたいと思います。

まずは、この部分のhtmlがどのように出力されているのか見て見ることにします。「access」というdivで囲まれた部分が今回の変更したい部分です。

<div id="access" role="navigation">
   <div class="skip-link screen-reader-text"><a href="#content" title="コンテンツへ移動">コンテンツへ移動</a></div>
	<div class="menu">
            <ul>
              <li class="current_page_item"><a href="http://webourgeon.com/" title="ホーム">ホーム</a></li>
              <li class="page_item page-item-2"><a href="http://webourgeon.com/about/" title="ABOUT">ABOUT</a></li>
</ul></div>
</div><!-- #access -->

アクセシビリティに配慮

「skip-link、screen-reader-text」というクラス名がついた、「コンテンツへ移動」というのはスクリーンリーダーなどで、繰り返し同じメニューが読見上げられてしまう事を避けるためにつけられたリンクです。普通の状態ではテキストは隠されています。「アクセシビリティに配慮してある」、ということがいえると思います。

 <div class="skip-link screen-reader-text"><a href="#content" title="コンテンツへ移動">コンテンツへ移動</a></div>

メニュー部分のhtmlとクラス名

その下の「menu」というクラス名のついたdivで囲まれた部分がメインメニューのhtmlの例になります。メニューのアイテムがリストで出力されています。

<div class="menu">
            <ul>
              <li class="current_page_item"><a href="http://webourgeon.com/" title="ホーム">ホーム</a></li>
              <li class="page_item page-item-2"><a href="http://webourgeon.com/about/" title="ABOUT">ABOUT</a></li>
</ul></div>

「current_page_item」というクラス名がありますね。これが「ABOUT」のページでどのようになっているか見てみます。

<div class="menu"><ul><li ><a href="http://webourgeon.com/" title="ホーム">ホーム</a></li><li class="page_item page-item-2 current_page_item"><a href="http://webourgeon.com/about/" title="ABOUT">ABOUT</a></li></ul></div>

現在見ているページに「current_page_item」というクラス名がつくようになっています。

メインメニューのデザインを変更する

では、メニューのデザインを変更してみます。デフォルトでは背景が黒になっていますので、白い背景に薄いグレーの枠線をつけてみたいと思います。

デフォルトのCSSです。367行目当たりから始まっています。

/* =Menu
-------------------------------------------------------------- */

#access {
	background: #000;
	display: block;
	float: left;
	margin: 0 auto;
	width: 940px;
}
#access .menu-header,
div.menu {
	font-size: 13px;
	margin-left: 12px;
	width: 928px;
}

背景色を白く、枠線をつけて幅を調節します。

#access {
	background: #fffffe;
	border: 1px solid #ccc;
	width: 938px !important;
	width: 936px;
}
#access .menu-header,
div.menu {
        width: 928px!important;
	width: 926px;
}

文字色も調節します。現在のページは少し暗い色にして、強調してみました。

こんな感じになりました。あっさりしすぎな感じもしますが、一つの例という事で。。
是非これをもとに、背景画像を設定してみたり、色々と工夫して、魅力あるメニュー作りに挑戦してみて下さい。