ヘッダー画像の下に横並びにメニューボタンを設置する！その１。文字で楽々偏
ブログネタ：「ツイッター」「なう」みたいなショートブログやってる？
メニューボタンを設置する！
おぉ。字が変だ！ヮ(ﾟдﾟ)ォ!なにこれ？
これこれ☆コレしたかったんですよー。(*´∀｀*)
よく見ますよねー。思ったより簡単に出来ました。でも付けただけで全て工事中です。
細かい変更は又後回しにしまーす（ ☣ฺ_ゝ☣ฺ）キラーン
まずは・・
フリースペースに<ul>と<li>を使いリスト構造でメニューを作成します
項目を増やしたい時はリンク先をコピーして増やせば良いです。
あと改行を全て取り消さないと階段みたいになって画像がずれてました。（爆）
<div id="topmenu"><ul><li><a href="リンク先のURL">ホーム</a></li><li><a href="リンク先のURL">ペ タ</a></li><li><a href="リンク先のURL">メッセージ</a></li><li><a href="リンク先のURL">リンク</a></li></ul></div>
続いてＣＳＳの一番下に貼りつけ。
/*ベーシックスキン メニュー5個*/
#topmenu {
width: 800px;/*スキンの幅Ａ*/
font-size:14px;/*文字サイズ*/
font-weight:bold;/*太字*/
line-height:2;
display: block;
}
#topmenu ul{
margin:0;
padding:0;
}
#topmenu li {
width: 150px;/*1つの幅Ｂ*/
margin: 0 2px;/*メニューのスキマＣ*/
border: 3px double #fff;
background-color:#009900;
text-align: center;/*中央寄せ*/
display:inline;/*IE6対策*/
list-style: none;
float: left;
}
#topmenu li a {
color: #ffffff;/*文字色*/
border: 1px solid #ffffff;
margin: 1px;
text-decoration: none;
display: block;
}
#topmenu li a:hover {
color: #ffffff;/*オンマウス時文字色*/
background-color:#99FF00;/*オンマウス時背景色*/
}
#wrap{
margin-top:50px;
}
#frame {/*おまじない（すでにある場合は必要ないです）*/
position: relative;
}
#topmenu{
position: absolute;
top:0px;/*上から*/
left:0px;/*左から*/
z-index: 100;
}
おぉ。。ずれずれ。。自分のブログに合わせるために色々いじらなくてはなりません。
ツイッターもなうもよくわかんないんですよねー。なうはアメブロ記事を書いたときにポチっとやってます。
たまにオーハシさんとはなこさんがかまってくれます。ﾜｰｲヽ(ﾟ∀ﾟ)ﾒ(ﾟ∀ﾟ)ﾒ(ﾟ∀ﾟ)ﾉﾜｰｲ
自分からはごはんなうぐらいかな☆ツイッター友だちがよくやってるみたいです。
携帯からとかやったらマメにできていいかもねー(*´∀｀*)
ちょ。。もうタバコが吸いたくてたまらないので買ってきます！次はコレに画像をつけるのに挑戦してみたいとおもいまーす！あ。素材がないので作りことからせなあかんわぁ。。暇人パワーです！
ではでは行って来まーす。
劉備玄徳
