Genius Green

全くの初心者から立ち上げ、稼ぐブログを作るための備忘録をまとめています

ナビゲーションメニューを最上部の横幅いっぱいに表示するカスタマイズ方法

   

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

ナビゲーションメニューのカスタマイズ

 

最近のサイトで良く見かけるデザインで、やってみたいなと思うものがありました。

ページの最上部にメニューが並んでいて、メニュー項目の横幅はメインコンテナの内側に収まっているものの、背景色だけがページの横幅いっぱいまで広がっているもの。余計な余白も少なく、メインとなる記事の内容がすぐに目に飛び込んでくるということで、ユーザの利便性も高いのではと思い、カスタマイズしてみました。

今回は、ナビゲーションメニューを最上部に表示して、背景色を横幅いっぱいに表示する方法について、私が採用したやり方をご紹介します。

ナビゲーションメニューを最上部に表示するカスタマイズ

メニューのカスタマイズ方法は世の中にたくさんありますが、今回はページの最上部にメニューを表示する方法についてご説明します。ただ最上部に表示するだけでは、並び替えを行うだけで味気ないので、最近良く見られる背景色を横幅いっぱいまで広げることに挑戦しました。

なにげに背景色を広げる方法がたくさんあって、しっくりくるものを絞るのに少し時間がかかってしまいました。変更後のイメージについては、下図のとおり。メニュー カスタマイズ前このメニューを・・・

メニューを上部表示

こうしました。

ちなみに、テーマはStinger5を使用しています。その他のテーマの場合には少し書き方が違うかもしれませんが、基本的な考え方については同じです。

ナビゲーションメニューを上部に持ってくる

まずは、ナビゲーションメニューを上部に持ってきます。テーマの編集から「単一記事の投稿」を編集して、メニュー部分を<header>直下に持ってきます。

メニューを真ん中に表示するためのinnerを用意する

背景色を横幅いっぱいに広げても、メニュー項目の表示位置はメインコンテナ(Stingerの場合Wrapper)の幅に合わせたいため、navタグの中にnav-innerを用意します。

メニューを上部表示(nav-inner)

上の図の、枠で囲ったところがnav-innerです。先ほど上部に持ってきたナビゲーションメニューの中に、nav-innerを差し込みます。

スタイルシートの編集

スタイルシートは、もともとのnavタグと、今回新規に追加したnav-innerクラスをそれぞれ下記のとおり編集します。

何をしているかというと、navタグをネガティブマージンで左右に500px分だけはみ出させて、左に飛び出た分を中身(nav-inner)だけ500px分右に持ってきて、元の位置に戻すということをしています。そうすれば、背景色は左右画面いっぱい(正確には画面よりも更にいくらか飛び出る)に広げることができ、メニュー項目は中に収めることができます。

Stinger5の場合は、bodyからはみ出た部分は「overflow:hidden;」によって隠れるので特に問題ありませんが、他のテーマの場合は横に飛び出てスクロールが発生することがあるようです。その場合は、bodyタグに「overflow:hidden;」を設定して、中に収めるようにしましょう。

方法については、こちらのサイトを参考にしました。ありがとうございました。

最後にデザインの微調整

あとは、余計なpaddingをなくして上にぴっちり詰めたり、文字色を修正したりして、デザインを整えます。paddingを埋めたところは、headerとsitenameです。

何気に少しハマったところは、メニューの文字色の修正が「nav li a」ではできなかったので、その修正の仕方だけ忘れずにメモします。(基本的なことだったらすみません。なにぶん初心者なもので)

メニューの文字色などは「.menu li a」で指定します。上記は文字色を変えたのと、カーソルが当たると色が反転するように指定しました。

これでメニューの設定が完了です。

 

まとめ

今回はナビゲーションメニューを最上部に表示して、背景色を横幅いっぱいまで広げるカスタマイズの方法をご紹介しました。

デザインをカスタマイズすることはユーザの利便性を高めるだけでなく、サイトのオリジナリティが高まって自分自身の愛着が高まってきます。あまりにカスタマイズをやりすぎると、サイト構造を壊したりする可能性もあるので注意が必要ですが、適度なカスタマイズについてはトライしてみる価値ありです。

ぜひ自分自身のサイト作りを目指してください。

 - Wordpress