アメブロスキンにないメニューを作る
最近良く見かけるカスタマイズされたアメブロには、
必ずといっていいほど設置されているグローバルメニュー。
どこに飛ばすのかは別として、カッコイイですよね！
ＣＳＳ編集用デザインのスキンをお使いならば簡単ですから、
新ＣＳＳに対応した方法を紹介します。
まず、下記のコードをフリースペースに追記します。
↓ ここから
<div id="headerMenu"><!--
--><ul class="menu"><!--
--><li><a href="#" target="_blank">MENU１</a></li><!--
--><li><a href="#" target="_blank">MENU２</a></li><!--
--><li><a href="#" target="_blank">MENU３</a></li><!--
--><li><a href="#" target="_blank">MENU４</a></li><!--
--><li><a href="#" target="_blank">MENU５</a></li><!--
--></ul><!--
--></div>
↑ ここまで |
『
#』の文字の所に、ボタンクリック時にジャンプするページのURLを書き
(
#を消して)
『
MENU １』～『
MENU ５』には、そのボタンに表示する文字を書きます。
次に、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:#3366ff; /* 背景色(濃い青) */
background-image:url(); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */
color:#ffffff; /* 文字色(白) */
font-weight:normal; /* 太字(なし) */
text-decoration:underline; /* 下線(あり) */
background-color:#698fff; /* 背景色(薄い青) */
background-image:url(); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
/*◆↑↑↑ 色・文字装飾・背景など ◆*/ |
横幅980ピクセルのブログに5つボタンのメニューを設置する場合の
コードですので、条件が異なる場合は右側に書いてある注釈を頼りに
内容を変更する必要があります。
よく分からない、という方は当ブログのメッセージボードに紹介している
超高機能カスタムテンプレートを
無料でさしあげます。
参照元：わざめーばさんのブログ
-------------------------------------------------------
Windows 7 搭載のPCが 0 円 !?
