アメブロをかわいくカスタマイズ
③
グローバルメニューの作り方
グローバルメニューとは、上のブログの赤く線を引いた所
UＲＬのついた表示方法です！
これがあれば…ブログに来てくれた方が見やすいし
ホームページも今より良くなりますよ
グローバルメニューの作り方
ＣＳＳ編集から
/* その他、拡張があれば記述 */
の下に
/* グローバルメニューの追加 */
#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:45px;
}
#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:#FF66FF;
font-weight:normal;
text-decoration:none;
background-image:url(ここに背景のＵＲＬ);
background-repeat:repeat;
}
#headerMenu ul.menu li a:hover{
color:#FF66FF;
font-weight:normal;
text-decoration:underline;
background-image:url(ここに背景のＵＲＬ);
background-repeat:repeat;
}
上の黒文字を貼り付けて下さい。
(かっこ内)は２か所とも好きなＵＲＬを貼り付けて下さい。
２か所→１つめのＵＲＬ表示は、通常の表示画像です！
２つめのＵＲＬ表示は、マウスで触れると表示される画像です！
背景は幅１９６ｐｘ×高さ５０ｐｘで作りました…
文字の大きさもfont-size：14ｐｘ；の所で変更
できます（後で変更します）
※今のところ文字表示は出てきませんので
プレビューで背景が出ていたら保存して下さい。
この次に、ブログ管理
左のサイドバーのフリースペース編集へ入り
ここに
<div id="headerMenu"><!--
--><ul class="menu"><!--
--><li><a href="ここに場所のＵＲＬ"><font color="#66CCFF"><b>ここに表示のコメント</b></font></a></li><!--
--><li><a href="ここに場所のＵＲＬ"><font color="#66CCFF"><b>ここに表示のコメント</b></font></a></li><!--
--><li><a href="ここに場所のＵＲＬ"><font color="#66CCFF"><b>ここに表示のコメント</b></font></a></li><!--
--><li><a href="ここに場所のＵＲＬ"><font color="#66CCFF"><b>ここに表示のコメント</b></font></a></li><!--
--><li><a href="ここに場所のＵＲＬ"><font color="#66CCFF"><b>ここに表示のコメント</b></font></a></li><!--
--></ul><!--
--></div>上の黒文字をコピーして貼り付けて下さい。
５つのここに場所のＵＲＬとここに表示のコメントがあります。
それぞれ５に表示したいコメントとその場所のＵＲＬを
貼り付けて下さい。
文字の色はcolor="♯66CCFFとなっています。
♯6ケタをお好きな色の英数に変更して下さい。
最後に保存をして
これでグローバルメニューが出来ました～
文字の大きさが調整したい方はＣＳＳ編集へ
戻り、font-size：14ｐｘ；の所でプレビューを
見ながら変更して保存です！！
- おしゃれなWebサイトテンプレート集/山口 有由希
- ￥2,604
- Amazon.co.jp