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





アメブロカスタマイズの松本です。

こんにちは。

今回は、アメブロにヘッダーメニュー(グローバルメニュー、グローバルナビ、横メニュー等とも呼ばれます)を設置する方法です。

設置すると、ブログ内の全てのページの目立つ位置に表示されますので、ブログ訪問者に是非とも知らせたい記事の案内などに威力を発揮してくれます。

このヘッダーメニューに関しては、今までにも何種類か(大まかに数えて3種類)ご紹介したことがあるんですが、今回ご紹介するヘッダーメニューは、新デザインの特徴を生かしてキレイにカスタマイズしやすいよう工夫してみました。

例えば下の画像のようなメニューなんかも、比較的簡単に作成できます。



これから、発展的なカスタマイズ方法も含めて何回かに分けてヘッダーメニューに関する方法をご紹介しようと思っていますが、今回はその第一回目で、さらなるカスタマイズためのベースとなる、冒頭の画像のようなごく基本的なヘッダーメニューを設置する方法をご紹介します。



CSSにヘッダーメニューのための設定をする



では、まず、ユーザーCSSにヘッダーメニューのための設定を追加しましょう。

ユーザーCSSについてわからない場合はこちらを参照してください。

(まず最初にCSSの設定をしますが、これだけではヘッダーメニューは表示されませんので、必ず次項のフリースペースの設定も実施して下さい)

では、以下のようなコードをユーザーCSSの末尾に追加して保存しましょう。

/***************************************
  ヘッダーメニューを設置する(V4)
  by わざめーば http://ameblo.jp/wazameba/
***************************************/

/* ▼ 通常は変更不要 (ここから) ▼ */
.skinContentsArea {
  position: relative;
}
#headerMenu, #headerMenu ul,
#headerMenu li, #headerMenu a {
  margin: 0;
  padding: 0;
  background-color: transparent;
}
#headerMenu {
  position: absolute;
  line-height: 1.0;
  overflow: visible;
}
#headerMenu ul.menu {
  list-style: none;
  overflow: visible;
}
#headerMenu ul.menu:after {
  display: block;
  clear: both;
  content: ".";
  height: 0px;
  overflow: hidden;
  visibility: hidden;
}
#headerMenu ul.menu li {
  position: relative;
  display: block;
  float: left;
  overflow: visible;
}
#headerMenu ul.menu>li {
  border-style: none none none solid;
}
#headerMenu ul.menu>li:first-child {
  border: 0 none;
}
#headerMenu ul.menu li a {
  display: block;
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  background-repeat: repeat;
  background-position: center center;
}
/* ▲ 通常は変更不要 (ここまで) ▲ */
/* ▼ メニューカスタマイズ (ここから) ▼ */
.skinContentsArea {
  padding-top: 55px; /* ■設置スペース確保 */
}
#headerMenu {
  top: 0px; /* ■上下位置調整 */
  left: 0px; /* ■左右位置調整 */
}
#headerMenu ul.menu li {
  font-size: 14px; /* ■文字サイズ */
  height: 50px; /* ■ボタンの高さ(上下枠線を含む) */
  line-height: 50px; /* ■ボタンの高さ(上下枠線の内側) */
}
#headerMenu ul.menu li {
  width: 195px; /* ■ボタンの幅(第一ボタン以外) */
}
#headerMenu ul.menu>li:first-child {
  width: 196px; /* ■ボタンの幅(第一ボタン) */
}
#headerMenu ul.menu>li {
  border-width: 1px; /* ■区切り線の太さ */
  border-color: #ffffff; /* ■区切り線の色 */
}
#headerMenu ul.menu li a {
  color: #ffffff; /* ■文字色[白](通常時) */
  font-weight: normal; /* ■太字[なし](通常時) */
  text-decoration: none; /* ■下線[なし](通常時) */
  background-color: #0044cc; /* ■背景色[濃い青](通常時) */
}
#headerMenu ul.menu li a:hover {
  color: #ffffff; /* ■文字色[白](オンマウス時) */
  font-weight: normal; /* ■太字[なし](オンマウス時) */
  text-decoration: underline; /* ■下線[あり](オンマウス時) */
  background-color: #66aaff; /* ■背景色[薄い青](オンマウス時) */
}
/*▲ メニューカスタマイズ (ここまで) ▲ */


上記コードは、素のCSS編集用デザインの場合は特に何も変更する必要はありません。

旧デザインの場合は、二箇所ある「.skinContentsArea」を「#wrap」に変更した上で、各値を必要に応じて修正して下さい。

ですが、事前のカスタマイズ状況によっては設定を変更する必要がある可能性も考えられますので、コード内の注釈を参考に、必要に応じて適宜修正してみて下さい。



フリースペースにヘッダーメニューの内容を定義する



次に、フリースペースにヘッダーメニューの内容を設定していきましょう。

設定内容は、以下のようなコードになります。

<div id="headerMenu"><!--
--><ul class="menu"><!--
--><li><a href="#" target="_blank">メニュー1</a></li><!--
--><li><a href="#" target="_blank">メニュー2</a></li><!--
--><li><a href="#" target="_blank">メニュー3</a></li><!--
--><li><a href="#" target="_blank">メニュー4</a></li><!--
--><li><a href="#" target="_blank">メニュー5</a></li><!--
--></ul><!--
--></div>


#」と「メニュー?」と書いてある行が、ヘッダーメニューの各ボタンの設定になります。

#」の部分には、そのメニューボタンをクリックした時にジャンプする先のページのURL(アドレス)を設定します(「#」を消して)。

また、「メニュー?」の部分には、そのメニューボタンに表示したい表示内容(文字列)を設定します。

なお、表示内容は自動的に複数行表示はされませんので、メニューボタンの幅に収まる簡潔な内容にするようにしましょう。



表示確認をする



以上で設定は完了ですので、ブログを表示してヘッダーメニューが設置されたかどうかを確認してみて下さい。

表示は、F5キーを押す(Windowsの場合)などして、最新の状態を読み込んだ上で確認するようお願いします。

うまく設定できていれば、5つボタンの青いシンプルなヘッダーメニューが表示される筈ですが、もし表示されない場合は、どこかで失敗していると思われますので、もう一度設定を見直してみて下さいね。

なお、今後、

・ボタン数の変更
・サブメニューの追加
・デザインのさらなるカスタマイズ

等についてもご紹介していく予定ですので、どうぞお楽しみに。

以上、アメブロにヘッダーメニュー(グローバルナビ)を設定する方法をご紹介しました。

よかったら参考になさってくださいね。




関連記事


CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ



コメント(28)