ブログのちから

副業やマネタイズ方法、アクセス解析やSEO、Wordpress、SNSの活用、ビジネス書の書評、育児、ダイエットなどを中心にお届けしてます。

Stinger3カスタマイズ;ナビゲーションメニューの印象を変える。

      2014/08/07

ナビゲーションバー

昨日のカスタマイズで、ヘッダーのタイトルを画像のみにする対応を実施したところ、

ヘッダーがアッサリし過ぎてしまいました。

 

そこで、今日はナビゲーションメニューを、少々いじって、見た目を引き締めたいと思います。

 

SPONSERD LINK

やったこと

今日のカスタマイズは、見た目を引き締めるためだけなので、

手っ取り早くできる所だけ。

  • ナビゲーションの背景を濃いめに変更。
  • 反面、文字色、区切り線が見えなくなるので、白系に。
  • マウスカーソルが当たった時に、表示を変える。
  • TOPの削除(ついでにwww)

といった感じです。

スタイルシートとヘッダーのコードを少し触るだけなので、非常に簡単ですね。

 

ナビゲーションのデザイン変更

ナビゲーションのデザイン変更は、スタイルシートを少し変更するだけなので、やり方を書くまでも無い程度ですが、一応記載しておきます。

まずは、背景色の変更から。

次に、区切り線の色を変更します。

マウスカーソルが当たった時の色も指定しておきます。

リンクの文字色を変更します。

マウスカーソルが当たった時のデコレーションをオフにしました。(デフォルトではアンダーラインになってますね)

ナビゲーションメニュー自体のデザインカスタマイズ は、以上です。

 

デフォルトで表示されている「TOP」のリンクを削除

こちらはheader.phpの変更ですが、こちらも3行ほどコードを削除するだけですね。

以上で完成です。

 

これで、全体が少し引き締まった印象になりました。

もちろん、ナビゲーションバーについては、まだまだイジる要素が多分にありますが、今日の所は、ひとまずOKとしました。

 

 

以上、参考になれば幸いです。^^

SPONSERD LINK

 - stinger3 ,

最後までお読み頂きありがとうございます!

よければシェアしてみませんか?
  • このエントリーをはてなブックマークに追加
  • Pocket
  • 470 follow us in feedly
SPONSERD LINK

  関連記事