ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ グローバルメニューにプルダウンメニューを追加する方法
投稿日: 2015/03/27 投稿者:webコラム
こんにちは、駆け出しライターのMAKIです。
今日のテーマは、グローバルメニューにプルダウンメニューを追加する方法、です。
グローバルメニューとプルダウンメニューは、上の画像を見ていただければ、何かわかると思います。
メニューとあるのがグローバルメニュー、サブメニューとあるのがプルダウンメニューです。
では、レッツトライ!
「ブログを書く」→「デザインの変更」→「CSSの編集」とクリックします。
「現在使用中のブログデザインCSS」の一番下に、次の文を追加してください。
/* ヘッダー下にグローバルメニューを設置する */
#wrap,.skinContentsArea{
position:relative;
}
#headerMenu{
position:absolute;
margin:0;
padding:0;
}
#headerMenu ul.menu{
margin:0;
padding:0;
list-style: none;
}
#headerMenu ul.menu li{
display:inline;
}
#headerMenu ul.menu li a{
display:block;
float:left;
margin:0;
padding:0;
white-space:nowrap;
overflow:hidden;
text-align:center;
}
#wrap,.skinContentsArea{
padding-top:40px;
}
#headerMenu{
top:0px;
left:0px;
width:980px;
}
#headerMenu ul.menu li a{
width:196px;
line-height:40px;
font-size:14px;
}
#headerMenu ul.menu li a{
color:#ffffff; /* 文字色(白) */
font-weight:normal; /* 太字(なし) */
text-decoration:none; /* 下線(なし) */
background-color:#434343; /* 背景色 */
background-image:url(); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */
color:#ffffff; /* 文字色(白) */
font-weight:normal; /* 太字(なし) */
text-decoration:none; /* 下線(なし) */
background-color:#555555; /* 背景色 */
background-image:url(); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
/* グローバルメニューにプルダウンメニューを追加する */
#headerMenu ul.menu>li{
display:block;
float:left;
overflow:hidden;
}
#headerMenu ul.menu li a{
float:none;
}
#headerMenu ul.submenu{
margin:0;
padding:0;
}
#headerMenu ul.submenu li{
display:block;
margin:0;
padding:0;
overflow:hidden;
}
#headerMenu ul.menu>li{
height:40px; /* ボタンの高さ */
background-color:#ffffff;/* IE7対応 */
background-image:url(); /* 背景画像 */
}
#headerMenu ul.menu>li:hover{
height:auto;
}
文字の色や背景色は、ご自分のお好みでどうぞ。
フリースペース編集に、次の文を追加してください。
<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><!--
--> <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><!--
--> <li><a href="#" target="_blank">サブメニュー5</a></li><!--
--> </ul><!--
--></li><!--
--><li><a href="#" target="_blank">メニュー4</a></li><!--
--><li><a href="#" target="_blank">メニュー5</a></li><!--
--></ul><!--
--></div>
メニューの名前は、ご自分のブログに合わせてください。
保存をクリックし、確認すると...。
はい、グローバルメニューとプルダウンメニューの出来上がりです。
行きたい場所にすぐに飛べるグローバルメニューとプルダウンメニューは、とっても便利。
記事が増えてきたなあと思ったら、ぜひトライしてみてください!
では、また〜^^