Xeoryカスタマイズ！ヘッダー下のナビゲーションメニュー編

ブログを最初に開いたとき、まずどこを見ますか？

ちょっと前まで、私はヘッダー画像に目が行ってたんですが、いまはヘッダーというよりも割と小さめのロゴを左上に置いてるだけのサイトが多いですよね。
それか、このブログのように画面の幅いっぱいの画像を使ってるのが多いかな。

ヘッダー画像って昔ほど重要視しなくなってきた気がします。
画面の幅いっぱいのヘッダーも、結局は背景画像と同じ感覚というか、作りこんだ画像ではなく写真をちょっと加工しただけだったりしますよね。
作りこまれた画像よりも、シンプルなほうがスマートに見える。

スポンサーリンク
[ad]

グローバルナビはブログの顔

私はどこをまず見るかというと、ヘッダー付近のグローバルナビゲーションです。

これが初期設定のままだったり、崩れてたりすると、素人くさく感じてしまうんですよね。
逆に、きちんと成型されてすっきりと見やすいナビゲーションメニューだと、なかなかやるな！って思っちゃいます。
まぁ私がwebデザインをやってるから、そういう視点で見てるだけなんですけどね。

で、Xeory Baseも、初期設定ではこのように、左寄せで仕切りもないメニューなんです。

これをコンテンツ幅いっぱいに、均等割で作りたいと思いました。

そしてこのコードに書き換えました。

/* —————————————-
* gloval nav
—————————————- */

#gnav-container .clearfix:after {
display: none;
}

#gnav {
margin-top: -1px;
background: #fff;
border-top: 0px;
border-top: 1px #efefef solid;
border-bottom: 1px #efefef solid;
font-size: 14px;
}
#gnav ol, #gnav ul {
list-style: none;
display: table;
table-layout: fixed;
width: 100%;
box-sizing: border-box;
border-left: 1px solid #efefef;
margin: 0;
}
#gnav span {
font-size: 12px;
color: #231B8F;
font-weight: normal;
}

#gnav .sub-menu {
z-index: 10;
font-size: 14px;
margin: 0;
}

#gnav li {
border-right: 1px #efefef solid;
text-align: center;
display: table-cell;
float: none;
padding: 10px 0px;
border-bottom: 3px transparent solid;
margin-bottom: -3px;
}

#gnav li.current-menu-item a {
border-top: none;
}

#gnav li.current-menu-item, #gnav li.current-menu-parent {
border-bottom: 3px #231B8F solid;
}

#gnav li a {
display: block;
border-top: none;
border-bottom: 3px transparent solid;
padding: 0px;
color: #2B2D2D;
background: #fff;
text-decoration: none;
width: auto;
text-align: center;
font-weight: normal;
-webkit-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}

#gnav li:hover {
border-top: none;
border-bottom: 3px #231B8F solid;
}

#gnav li a:hover {
border-top: none;
}

gnaviに関する記述を、上記のコードに書き換えました。

しかし、このコードに書き換えただけでは、どうしてもこの変なラインが消えなかったんです。

そこで、この私にとっては難解なcssとじっくりと向き合うことにしました。

すると、なんだこれは？

ここらへんが怪しい。

消そう！！

というわけで、消去ｗ

でも変更されない。

もおお

画面がうまくリロードされないとき

cssの編集してたら、画面を再読み込みしてもどうにも変更が反映されないときってありませんか？

そういうときは、Ｆ5押したら再読み込みできます。ウィンドウズの場合はね。

マックは知りません。
と言おうと思ったけど、調べました。

コマンドキーとRボタンを押すんだそうです。

それでも変わらないときあるんですよね。
firefoxの場合は、ブラウザのメニューで「履歴」をクリックして、「履歴の消去」を出すと、キャッシュとかクッキーとか項目が出るので、キャッシュを消去します。

それでも変更されないときは、cssの編集がミスってるだけかとｗ

私はどんなことをしても変更されなかったので、いったんブログ内の個別ページに飛んで、そっからhomeをクリックしてみたら、変更されてました～ｗ

こういう気まぐれな更新はやめてほしいですよね。

というわけで、無事にこのようなきれいなデザインになりました。

で、まだ課題があるんです。
その課題をクリアできたら、このメニューに色を付けることができるので、また解決次第追記します。