アメブロ 旧CSSデザイン プルダウン付きグローバルメニューの作り方

ameblo2

最近お客様の要望で、アメブロ旧CSSデザインでグローバルメニューのプルダウンを作りましたので、シェアしたいと思います。

アメブロ プルダウン付きグローバルメニューの作り方

menu

グローバルメニュー設置方法として大きく2つあります。
タグでの色指定・画像指定。
今回は最も簡単なタグ指定の方法について載せてみます。

サイドバーでフリースペースを掲載する

アメブロ→設定・管理→サイドバーの配置設定でフリースペースを加えます

ameblo

リンク先をフリースペースに入力します。

設定・管理→フリースペースにグローバルメニューのタグを入れます

<div id="headerMenu"><!--
--><ul class="menu"><!--
--><li><a href="#">メニュー1</a></li><!--
--><li><a href="#">メニュー2</a></li><!--
--><li><a href="#">メニュー3</a></li><!--
-->  <ul class="submenu"><!--
-->  <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><!--
-->  </ul><!--
--></li><!--
--><li><a href="#">メニュー4</a></li><!--
--><li><a href="#">メニュー5</a></li><!--
--></ul><!--
--></div>

改行するとナビがずれるので、改行せずに入力してください。

メニューが4つの方は、<li><a href=”#”>メニュー5</a></li>は削除しましょう。
「#」にリンク先のURLを、「メニュー」のところは表示したい文字を入れます。
サブメニューは必要な数に合わせてたし引きしてください。

ポイント:プルダウンにしたいメニューの次に太字で記載した内容を入れることです。

ブログデザインCSSをスクロール

/*
*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*

(4) その他、拡張

*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*
*/

/* その他、拡張があれば記述 */

と記載があるところの下に下記をコピペします。

/* ここからグローバルメニュー */
.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: 60px; /* 設置スペース */
}
#headerMenu {
top: 10px; /* 上下位置調整 */
left: 0px; /* 左右位置調整 */
}
#headerMenu ul.menu li {
font-size: 14px; /* 文字サイズ */
height: 50px; /* ボタンの高さ */
line-height: 50px; /* ボタンの高さ */
}
#headerMenu ul.menu li {
width: 188px; /* ボタンの幅(第一ボタン以外) */
}
#headerMenu ul.menu>li:first-child {
width: 188px; /* ボタンの幅(第一ボタン) */
border-width: 1px; /* 枠線の太さ */
border-style: solid; /* 枠線の種類 */
border-color: #87cefa; /* 枠線の色 */
}
#headerMenu ul.menu>li {
border-color: #87cefa; /* 区切り線の色 */
border-width: 1px; /* 枠線の太さ */
border-style: solid; /* 枠線の種類 */
margin: 0 2px;
}
#headerMenu ul.menu li a {
color: #555555; /* 文字色 */
font-weight: normal; /* 太字 */
text-decoration: none; /* 下線 */
background-color: #f0f8ff; /* 背景色*/
}
#headerMenu ul.menu li a:hover {
color: #555555; /* 文字色(オンマウス時) */
font-weight: normal; /* 太字(オンマウス時) */
text-decoration: underline; /* 下線(オンマウス時) */
background-color: #f0f8ff; /* 背景色(オンマウス時) */
}
/*メニューカスタマイズ 終了 */

ここまでは通常のグローバルメニューです。

メニューの数が5つの場合、メニューとメニューの間を開けているので
一つあたりのメニューの横幅は188pxくらいです。(ちょっと隙間が空きます)
プルダウンの場合、さらに下に下記を追加します。

/*サブメニューここから */
#headerMenu ul.submenu {
position: absolute;
top: -99999px;
z-index: 99999;
}
/* ここまで */
/* サブメニューカスタマイズ */
#headerMenu ul.submenu {
}
#headerMenu ul.menu li:hover ul.submenu {
left: 20px; /* 横位置(親メニューボタンの左端から) */
top: 35px; /* 縦位置(親メニューボタンの上端から) */
}
#headerMenu ul.submenu li {
border-top: 1px solid #ffffff; /* ボタン区切り線(上側) */
border-width: 1px; /* 枠線の太さ */
border-style: solid; /* 枠線の種類 */
border-color: #87cefa; /* 枠線の色 */
}
#headerMenu ul.submenu li:first-child {
border: 0 none; /* 第一ボタンの区切り線(上側) */
border-width: 1px; /* 枠線の太さ */
border-style: solid; /* 枠線の種類 */
border-color: #87cefa; /* 枠線の色 */
}
/*サブメニューカスタマイズ終了 */

赤字になっているところは、本体設定です。リンク色や背景色の設定になります。
原色大辞典などを見て、文字色と背景色を変更しておきましょう。

完成図

menu

こんな感じで作ることができます。

ぜひ試してみてくださいね!