人気ブログランキングの応援
をして頂けると励みになります。
今回実際にプルダウンメニューを設置してみた感想は、
これは、とても役に立ちそうです。
お客様がブログを訪問して、メニューをみて、
しかも、そのメニューがプルダウンメニューになっていると、
興味のあるいろんなページに飛ぶことができますよね。
お客様は、興味の持てるページを探しやすくなり、
お客様にとても便利な機能だと思います。
それでは、さっそく、プルダウンメニューの設置方法を
解説していこうと思います。
【１】プルダウンメニューのHTMLを作成し、
アメブロのフリースペースに入力します。
下記の通り、入力してみました。
【２】次に、画像をアメブロにアップロードしました。
【３】最後に、CSS編集画面に入力しましょう。
私の場合は、次の通り、入力しました。
/*■■■■■■■■■■■ ここから■■■■■■■■■■*/
#wrap {
position: relative;/*--positionの基準をwrapに設定--*/
width: 950px;
}
/*--プルダウンメニュー：ここから--*/
ul.gnavi {
position: absolute;/*--メニューバーの位置の設定--*/
left:0px;/*--positionの基準wrapから左側0に位置を設定--*/
top:0px;/*--positionの基準wrapから上側0に位置を設定--*/
}
ul.gnavi li {
float:left;/*--メニューを横に配列--*/
}
ul.gnavi li:hover>ul{display:block}/*--プルダウンを表示--*/
ul.gnavi li a:hover{
background-color:#DBF0F9;/*--マウスオン時のプルダウン文字の背景色--*/
border-color:#45ADE4;/*--マウスオン時のプルダウン文字の背景枠の色--*/
border-width:1px;/*--マウスオン時の各プルダウンの背景枠の太さ--*/
border-style:solid;/*--マウスオン時の各プルダウンの背景枠の種類--*/
font:normal 14px Tahoma;/*--マウスオン時の各プルダウン文字の太さ・サイズ--*/
color: #444;/*--マウスオン時の各プルダウン文字の色--*/
text-decoration:none;/*--マウスオン時の各プルダウン文字の書式の取消--*/
}
ul.gnavi li.Menu{/*--メニュー画像の設定--*/
width:190px;/*--メニュー画像の横幅設定--*/
height:50px;/*--メニュー画像の縦長設定--*/
}
ul.gnavi li a.Menu{/*--メニュー画像の設定--*/
height:100%;/*--メニュー画像の高さの設定--*/
background-image:url(http://stat.ameba.jp/user_images/20110523/23/kiyo-customize/30/86/j/o0190005011247093876.jpg);/*--メニュー画像を背景画像として設定--*/
border-width:0px;/*--各メニュー画像の枠の太さを設定--*/
font:bold 16px Tahoma;/*--各メニュー文字の太さ・サイズ設定--*/
color:#ffffff;/*--各メニュー文字の色設定--*/
}
ul.gnavi li a.Menu:hover{/*--マウスオン時のメニュー画像の設定--*/
background-image:url(http://stat.ameba.jp/user_images/20110523/23/kiyo-customize/5c/f0/j/o0190005011247095530.jpg);/*--マウスオン時のメニュー画像を背景画像として設定--*/
font:bold 16px Tahoma;/*--マウスオン時の各メニュー文字の太さ・サイズ設定--*/
color:#4c4c4c;/*--マウスオン時の各メニュー文字の色設定--*/
}
ul.gnavi span{/*--spanで囲まれた部分の設定--*/
display:block;/*--正常表示--*/
background-image:url(http://stat.ameba.jp/user_images/20110523/23/kiyo-customize/2d/5b/g/o0007000711247079590.gif);/*--背景画像として▲画像の設置--*/
background-position:right;/*--背景画像右へ配置--*/
background-repeat: no-repeat;/*--背景画像の繰り返し禁止--*/
padding-top:15px;/*--メニュー文字と▲画像の配置：上部から15px--*/
}
ul.gnavi a{*--メニューバーの表示--*/
display:block;/*--プルダウンを表示--*/
background-color:#FFFFFF;/*--各プルダウンの背景色--*/
border-width:1px;/*--各プルダウンの背景枠の太さ--*/
border-color:#fff;/*--各プルダウンの背景枠の色--*/
border-style:solid;/*--各プルダウンの背景枠の種類--*/
text-align:center;/*--各メニュー文字の横位置--*/
text-decoration:none;/*--各メニュー書式の取消--*/
font:bold 14px Tahoma;/*--各プルダウン文字の太さ・サイズ--*/
color: #000;/*--各プルダウン文字の色--*/
text-decoration:none;/*--各プルダウン文字の書式の取消--*/
}
ul.gnavi ul{
display:none;/*--プルダウンを非表示--*/
background-color:#ffffff;/*--プルダウンの背景色--*/
border-width:1px;/*--プルダウンの背景枠の太さ--*/
border-style:solid;/*--プルダウンの背景枠の種類--*/
}
ul.gnavi ul li {
float:none;/*--プルダウンをメニュの下へ表示--*/
}
ul.gnavi ul a {
text-align:left;/*--プルダウン文字の左揃え--*/
padding:2px 5px 5px 10px;/*--各プルダウン文字の配置 余白上2px右5px下5px左10px--*/
}
ul.gnavi li li {
margin:2px 0px 0px 2px;/*--各プルダウン文字のマージン設定 余白上2px右0px下0px左2px--*/
}
#sub_a, #sub_b, #main {
padding-top: 60px;/*--#sub_a, #sub_b, #mainの余白上60pxを設定--*/
}
今回は、以上です。
最後まで読んでいただき、
ありがとうございました。
少しでもお役に立ちましたら、
応援お願いします!!
