昨日のカスタマイズで、ヘッダーのタイトルを画像のみにする対応を実施したところ、
ヘッダーがアッサリし過ぎてしまいました。
そこで、今日はナビゲーションメニューを、少々いじって、見た目を引き締めたいと思います。
やったこと
今日のカスタマイズは、見た目を引き締めるためだけなので、
手っ取り早くできる所だけ。
- ナビゲーションの背景を濃いめに変更。
- 反面、文字色、区切り線が見えなくなるので、白系に。
- マウスカーソルが当たった時に、表示を変える。
- TOPの削除（ついでにｗｗｗ）
といった感じです。
スタイルシートとヘッダーのコードを少し触るだけなので、非常に簡単ですね。
ナビゲーションのデザイン変更
ナビゲーションのデザイン変更は、スタイルシートを少し変更するだけなので、やり方を書くまでも無い程度ですが、一応記載しておきます。
まずは、背景色の変更から。
//背景
#navi-in {
background: #2e2e57;
}次に、区切り線の色を変更します。
//区切り線
#navi-in li {
<略>
border-left-color: #ffffff;
<略>
}マウスカーソルが当たった時の色も指定しておきます。
//フォーカス時の色指定
#navi-in li:hover {
background: #2c6677;
}リンクの文字色を変更します。
//リンクの文字色指定
#navi-in li a {
<略>
color: #ffffff;
<略>
}マウスカーソルが当たった時のデコレーションをオフにしました。（デフォルトではアンダーラインになってますね）
//デコレーションオフ
#navi-in li a:hover {
text-decoration: none;
}
ナビゲーションメニュー自体のデザインカスタマイズ は、以上です。
デフォルトで表示されている「TOP」のリンクを削除
こちらはheader.phpの変更ですが、こちらも3行ほどコードを削除するだけですね。
//TOPリンクの削除
<!--pcnavi-->
<div class="smanone">
<div id="navi-in">
消す→ <ul>
消す→ <li> <a href="<?php echo home_url();?>" title="トップページ">TOP</a> </li>
<?php wp_nav_menu(array('theme_location' => 'navbar'));?>
消す→ </ul>以上で完成です。
これで、全体が少し引き締まった印象になりました。
もちろん、ナビゲーションバーについては、まだまだイジる要素が多分にありますが、今日の所は、ひとまずＯＫとしました。
以上、参考になれば幸いです。＾＾
