メニューバーを可愛くする。

結果から言ってしまおう。
採寸を誤り不格好になって終わってしまった(笑)

また近日中に作り直したいと思う←

今日はタイトルの通りメニューバーのカスタマイズ方法を。

使うのは簡単なHTMLの知識とCSSの知識だけ！
僕の場合はメニュー項目を新規で追加したり削除したりすることが無いので予め画像を作成することでメニューバーをカスタマイズしてしまった！

使ったのはこの子。
widthが960pxとのことだったので高さを考えずに横幅だけ意識した馬鹿が僕である。笑

header.phpに以下のコードをベタ書きした。

<div id="wrap">
 <nav>
    <ul>
      <li class="nav_info"><a href="http://mokabuu.com" title="Basic Info">Basic Information</a>
      <li class="nav_acappella"><a href="http://mokabuu.com/a-cappella" title="acappella">acappella</a>
      <li class="nav_sla"><a href="http://mokabuu.com/sla"  title="sla">sla</a>
      <li class="nav_vp"><a href="http://mokabuu.com/voice-percussion" title="voice-percussion">voice-percussion</a>
      <li class="nav_it"><a href="http://mokabuu.com/it" title="computer">computer</a>
      <li class="nav_diary"><a href="http://mokabuu.com/diary" title="diary">diary</a>
    </ul>
 </nav>
</div>

このように予め用意したアクセス先を直書きにしている。
きっともっと効率の良い方法があると思うが、Heightの事を考えない程見切り発車した僕にはこれが限界だった。笑

次にCSS。
style.cssを編集する。

#wrap nav {
	margin: 20px 0 20px;
	width: 100%;
	height: 画像の高さpx;
}

nav li {
	display: block;
	float: left;
	width: １個１個の項目の幅px;
	height: 画像の高さpx;
	text-indent: -9999px;
}

nav li a {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	
	background: url(画像のURLまたはパス);
}

nav li.nav_info a { background-position: 0px 0px; }
nav li.nav_acappella a { background-position: -160px 0px; }
nav li.nav_sla a { background-position: -320px 0px; }
nav li.nav_vp a { background-position: -480px 0px; }
nav li.nav_it a { background-position: -640px 0px; }
nav li.nav_diary a { background-position: -800px 0px; }

こんな感じで書いている。
ちなみに僕は１ブロック160pxの幅で設定したので0,160,320,480,640,800となっている。160ずつ増えているのはそのためだ。

とまあ、見切り発車の割には上手い事やりくりしてメニューをカスタマイズすることが出来た。

意外に簡単なHTMLとCSSの知識だけで世の中どうにかなるものである。笑

最後にheader.phpの

<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->

をコメントアウトしたら完成だ。

この程度のカスタマイズでも「やってみたい！」って方は是非お試しください。

最後まで読んでいただきありがとうございます。もしこの記事を気に入って頂けたようであればシェアをお願い致します。非常に励みになります。