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.net/" title="ホーム">ホーム</a></li>
              <li class="page_item page-item-2"><a href="http://webourgeon.net/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.net/" title="ホーム">ホーム</a></li>
              <li class="page_item page-item-2"><a href="http://webourgeon.net/about/" title="ABOUT">ABOUT</a></li>
</ul></div>

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

<div class="menu"><ul><li ><a href="http://webourgeon.net/" title="ホーム">ホーム</a></li><li class="page_item page-item-2 current_page_item"><a href="http://webourgeon.net/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;
}

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

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

Twenty Ten のメインメニューを変更する」への5件のフィードバック

  1. ナツコ

    いつか、メインメニューを画像にする方法もお願いしたいです!
    マウスを合わせると位置がずれるように指定するという、よくあるCSSスプラウトで。
    idやclassがの拾い方が間違っているのか、うまく表示されません…。

    この下のアヒルちゃんかわいいですね。思わずポチ+フォローしてしまいました。

    返信
    1. webourgeon 投稿作成者

      ナツコさん

      コメント&記事のリクエスト&フォローありがとうございます♪

      このブログの一番上のメニューやフッターもカスタムメニューを使っていて、
      全部画像に置き換えているんですよ。
      アヒルちゃんもそうです。
      RSSのアイコンもメニューの一部だけ画像に置き換える、という方法で表示しています。

      この方法、今度記事にしてみますね。

      返信
  2. ピンバック: Twenty Ten のメインメニューの色を変更 | webdtta

  3. オダ

    はじめまして。このたび、Twentytenのサイトを作っておりますオダと申します。
    いつも、参考にさせて頂いております。

    この度も記事を参考させて頂き制作しているのですが、
    どうしてもメニューバーの色を上手く変更出来ません。。。 薄緑色に変更する為にbackground: #fffffe;の部分を変更しているのですが白以外の色にならない事で困っております。

    アドヴァイスを頂ければ幸いです。宜しくお願い致します。

    twentytenのverは1.4です。

    返信
    1. webourgeon 投稿作成者

      オダさん、はじめまして。

      メニューバーの色の変更をしたいということですが、
      どの部分にどのように記述していらっしゃいますか?

      書いている場所が違っているのか、
      他の記述と競合して無効になってしまっているかの
      どちらかのような気がします。

      差支えなければ具体的にどのように記述されているのか教えていただければ
      もう少しわかるかもしれません。

      または、Firebugのようなツールを使ってCSSがどのように効いているか調べるという方法もありますので、
      確認してみてはいかがでしょうか。

      返信

コメントをどうぞ♪