ヘッダーメニューのボタン数を変える方法(V4)

ヘッダーメニューのボタン数を変える方法(V4)


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

こんにちは。

今回は、こちらのヘッダーメニューボタン数を変える方法をご紹介します。

こちらのヘッダーメニューでは、5つボタンのメニューを紹介しましたが、5つではボタンが足りないことが多々あると思いますので、今回はこのボタンを6つ~9つに増やすやり方をご紹介します。

ボタンを増やすときのためのCSS

ヘッダーメニューのボタン数を増やすと、それに合わせてボタンの幅を変更する必要がありますので、まずは、CSSでボタンの幅をボタン数に応じた幅に設定しておきましょう。

今回は、ヘッダーメニューがCSS編集用デザインの標準幅(980ピクセル)になるようにボタン幅を調整しますが、その際、どうしてもピッタリと割り切れないことが殆どですので、割り切れない端数の処理を第一ボタンの幅で調節することにします。

小数を使えば割り切れるものもありますが、ブラウザによって多少理解が異なるのか、ズレが生じる場合がよくあるのでこの方法にしました。

変更は、こちらのヘッダーメニュー用CSSの↓この部分を書き換えるか、

#headerMenu ul.menu li {
  width: 195px; /* ■ボタンの幅(第一ボタン以外) */
}
#headerMenu ul.menu>li:first-child {
  width: 196px; /* ■ボタンの幅(第一ボタン) */
}

若しくは、ユーザーCSSの末尾に追加して下さい。

ボタンが『6つ』場合
/* ヘッダーメニュー(V4) ボタン幅調整 (6つボタン)*/
#headerMenu ul.menu li {
  width: 163px; /* ■ボタンの幅(第一ボタン以外) */
}
#headerMenu ul.menu>li:first-child {
  width: 160px; /* ■ボタンの幅(第一ボタン) */
}

ボタンが『7つ』場合
/* ヘッダーメニュー(V4) ボタン幅調整 (7つボタン)*/
#headerMenu ul.menu li {
  width: 139px; /* ■ボタンの幅(第一ボタン以外) */
}
#headerMenu ul.menu>li:first-child {
  width: 140px; /* ■ボタンの幅(第一ボタン) */
}

ボタンが『8つ』場合
/* ヘッダーメニュー(V4) ボタン幅調整 (8つボタン)*/
#headerMenu ul.menu li {
  width: 122px; /* ■ボタンの幅(第一ボタン以外) */
}
#headerMenu ul.menu>li:first-child {
  width: 119px; /* ■ボタンの幅(第一ボタン) */
}

ボタンが『9つ』場合
/* ヘッダーメニュー(V4) ボタン幅調整 (9つボタン)*/
#headerMenu ul.menu li {
  width: 108px; /* ■ボタンの幅(第一ボタン以外) */
}
#headerMenu ul.menu>li:first-child {
  width: 108px; /* ■ボタンの幅(第一ボタン) */
}

フリースペースに増やすボタンのタグを追加する

次に、フリースペースのヘッダーメニュー用のタグに足りないボタンのタグを追記しましょう。

追加は、必要なボタンの数だけ、次のようにボタンの設定行を追加していくだけです(例は6つボタンの場合)。

<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><!--

--><li><a href="#" target="_blank">メニュー6</a></li><!--
--></ul><!--
--></div>

</ul>の行のすぐ上に追加していくと間違えにくいと思いますが、追加したい場所がそことは限りませんので、注意しながら必要な個所にボタンの設定を追加していってください。

表示を確認する

以上でボタン数の変更設定は完了です。

ブログを表示してヘッダーメニューが正しく表示されるか確認してみて下さい。

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

以上、ヘッダーメニュー(V4)のボタン数を変更するやり方をご紹介しました。

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

関連記事

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