ヘッダーメニューのカスタマイズ例(ニコンイメージング風?)

ヘッダーメニューのカスタマイズ例(ニコンイメージング風?)


アメブロカスタマイズのわざめーばです。

こんにちは。

僕のデジタル一眼レフの愛機ニコンD5200のページを見ていたら、そのページのメニューバーがシンプルで使いやすそうでした。

で、

「こんなメニューバーもいいよなぁ」

と思ったので、こちらのヘッダーメニューをカスタマイズする形で作ってみました。

全く同じにすることもできますが、それはそれで問題があるような気もするので敢えてそこまでしていません。

でも、概ね似た感じになりました。

ニコンイメージング風?ヘッダーメニューの作り方

では、参考までに、どのように作成したかをご紹介しますね。

やった内容は、

1.基本のヘッダーメニューを設置
ヘッダーメニュー(グローバルナビ)を設置する方法(V4)

2.ボタン数を「9個」に変更
ヘッダーメニューのボタン数を変える方法(V4)

3.必要なサブメニューを追加
ヘッダーメニューにサブメニューを付ける方法(V4)

4.更にユーザーCSSに以下の内容を追加
/***********************************************************
  ヘッダーメニュー(V4)のカスタマイズ (ニコン風?)
  http://ameblo.jp/wazameba/entry-11801246131.html
************************************************************/

/* メニューバー */
#headerMenu {
  border: 1px solid #ccc; /* 外側枠線 */
  width: 978px; /* 枠線を付けたので幅を2px減らす */
  padding: 8px 4px; /* 内側に余白 */
  border-radius: 5px; /* 角丸にする */
  background: #fafaf9; /* 背景色(グラデ非対応用) */
  background: linear-gradient( /* グラデーション */
    to bottom,
    #fafaf9 0%,
    #ededea 50%,
    #e9e8e5 51%,
    #e8e7e4 100%
  );
}
#headerMenu ul.menu {
  float: left;
  border-right: 1px solid #fff; /* 最右ボタン右側ラインのハイライト */
}
/* ボタン領域 */
#headerMenu ul.menu>li, #headerMenu ul.menu>li:first-child {
  width: auto; /* ボタン幅自動 */
  padding: 0px 8px; /* ボタンの左右内側に余白 */
  height: 19px; /* ボタンの高さ */
  border-left: 1px solid #fff; /* ボタン左側ラインのハイライト */
  border-right: 1px solid #c7c7c7; /* ボタン右側ラインのシャドー */
}
#headerMenu ul.menu>li:first-child {
  border-left: 0 none; /* 第一ボタン左側はラインなし */
}
/* ボタンの文字 */
#headerMenu ul.menu>li>a, #headerMenu ul.menu>li:first-child>a {
  padding: 0px 8px; /* 文字の左右に余白 */
  font-size: 12px; /* 文字サイズ */
  line-height: 19px; /* 一行の高さ */
  color: #333; /* 文字色 */
  background: transparent; /* 文字背景を透明化 */
}
/* ボタンの文字(オンマウス時) */
#headerMenu ul.menu>li>a:hover {
  margin: -3px 0px 0px 0px; /* 3ピクセル上へずらす */
  padding: 0 7px; /* 文字両側の余白を変更 */
  line-height: 23px; /* 行の高さを変更 */
  text-decoration: none; /* 下線なし */
  color: #4D4D4D; /* 文字色 */
  background: #FFE600; /* 文字背景色 */
  border: 1px solid #FFEE56; /* 文字周辺に枠線 */
  border-color:#FFEE56 #D6C200 #D6C200 #FFEE56; /* 枠線の色 */
  border-radius: 5px; /* 枠線を角丸に */
}
/* サブメニュー */
#headerMenu ul.submenu, #headerMenu ul.submenu li {
  border-color: #CCCCCC; /* 枠線の色 */
}
#headerMenu ul.menu li:hover ul.submenu {
  left: 10px; /* 表示位置 横位置 */
  top: 20px; /* 表示位置 縦位置 */
}
/* サブメニューのボタン */
#headerMenu ul.submenu li, #headerMenu ul.submenu>li:first-child {
  width: 200px; /* 幅 */
  height: auto;  /* 高さ */
  padding: 7px; /* 内側に余白 */
  background: #fff; /* 背景色 */
}
/* サブメニューのボタンの文字 */
#headerMenu ul.submenu li a, #headerMenu ul.submenu>li:first-child a {
  padding: 0px 8px 0px 18px; /* 文字両端に余白 */
  font-size: 12px; /* 文字サイズ */
  line-height: 19px; /* 一行の高さ */
  text-align: left; /* 左寄せ */
  white-space: normal; /* 改行可能にする */
  word-break: break-all; /* ワードラップを解除 */
  color: #333; /* 文字色 */
  background: /* 文字背景 */
    url("https://stat100.ameba.jp/mypg/img/common/icon_common.png?v20140128")
    no-repeat scroll 10px -1395px transparent
  ;
}
/* サブメニューのボタンの文字(オンマウス時) */
#headerMenu ul.submenu li a:hover {
  text-decoration: none; /* 下線なし */
  color: #4D4D4D; /* 文字色 */
  background-color: #FFE600; /* 文字背景色 */
}

という感じです。

コードのコメント(注釈)を参考にして頂ければ、色変更なども比較的簡単に出来ると思いますので、よかったら、こちらを参考にきれいなヘッダーメニューを作って設置してみて下さいね。

関連記事

ヘッダーメニュー(グローバルナビ)を設置する方法(V4)
ヘッダーメニューのボタン数を変える方法(V4)
ヘッダーメニューにサブメニューを付ける方法(V4)
CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ