CSS メニューを作っちゃおう（動画はドコ？）3
すみません
だいぶ飛ばしてしまいました・・・・
でも、やり方は前のペタぼたん
と同じなんです
一応復習・・・・
CSS メニューを作っちゃおう（動画はドコ？）
CSS メニューを作っちゃおう（動画はドコ？）2
前回のジェネレーターを使って吐き出されたHTMLはフリースペース、フリープラグインなどに貼り付けましたか？
ちなみにHTML
<div id="navcontainer">
<ul id="navlist">
<li><a href=" http://ameblo.jp/exlink/ ">ホーム</a></li>
<li><a href=" http://profile.ameba.jp/exlink/ ">ルーム</a></li>
<li><a href=" http://photo.ameba.jp/user/exlink/ ">フォト</a></li>
<li><a href=" http://vision.ameba.jp/search/user.do?user=exlink ">動 画</a></li>
<li><a href=" http://msg.ameba.jp/popupSendMessageInput.do?toAmebaId=exlink " target="_blank" >メッセージ</a></li>
</ul>
</div>
次はCSSです・・・・
これは少し付け加える部分があります
#navlist
{
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
display: inline;
}
#navlist li a
{
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover
{
border-color: #FE3;
color: #FFF;
background: #332;
}
↑ココまでが吐き出されたCSSです
それに↓下を追加します・・・・
#frame {
position: relative;
}
#freespace #navcontainer{
position: absolute;
width:300px;
top:0px;
left:0px;
z-index: 100;
}
・・・・あれっ
どこかで見ましたよね
そうです前回にやった ペタボタンのCSSの最初の部分です
と、言うことは・・・・
設置方法はペタぼたんとまったく同じです
一つだけ・・・・
width:300px;
これ適当な幅を入れています・・・
キチントしたい方はメニューの幅を計算してください・・・
私みたいに適当な人は適当な数字でかまいません
コレを入れておかないと
フリースペースとかにHTMLを書いていますから・・・
サイドバーの幅で折り返されてしまいます
なので長めの幅を持たせておきます
それでも短ければメニューが途中で折り返されるだけですから
そうなった場合はもう少し数字を増やして長くすればいいだけです
テキトウ・・・・です
前のペタぼたんを設置してある場合は
#frame {
position: relative;
}
この部分ははすでに書かれていますので付け加える必要はありません
後は前回同様に
top:0px; left:0px;
で設置してから様子を見ながら好みの位置に移動させるだけです
今回は左側の置くと想定して left:0px; としていますが
右に近ければ前回のように right:0px; でやってください
CSS メニューを作っちゃおう（動画はドコ？）
CSS メニューを作っちゃおう（動画はドコ？）2
CSS メニューを作っちゃおう 4
CSS
メニューを作っちゃおう5（横メニュー1）
CSS メニューを作っちゃおう6（横メニュー2）
CSS メニューを作っちゃおう7 画像の置き換え
あれ～？
スキン変えたら・・・・
スキンを変えなくても
2カラム → 3カラム とか 3カラム → 2カラム みたいにカラムを変更しただけでも
ルーム｜ブログ ｜フォト｜相談｜プレゼント
と・・・
サイドバーの上にＰＲがついてくるよ
イヤなら変更しちゃダメだよ～
って、記事を書いてアップしたはずなのに・・・・・
その記事どこへ行ってしまったんでしょ？
それともどなたかへコメントで書いた・・・？
あるいはプチメ・・・・？
ボケてきたようです・・・・・
でも、どこにいってしまったの？ぜったいに書いたはずなんです・・・・・・
しかたがないから・・・
ナイショ・・・・・ですが・・・・
ただの独り言ですが・・・・・
↓ゼッタイにクリックしないで下さい
これの何とかしかた・・・・
アメブロのアナウンスの前に記事にしちゃってます・・・・
正式にアナウンスがあったから消さなくちゃいけないのですが・・・・・
どうやら・・・
ボケているようで・・・・・
消した記憶がありません・・・・・ ん？て～ことは・・・・・どこかに・・・
アメブロからアナウンスがあった以上・・・・記事にしないでくださいね・・・
↑も、そのうち削除します・・・・・ ↓ヒントはコメントに・・・
その部分は削除いたしました・・・・
ペタぼたんをフリースペースに配置する場合・・・
ペタぼたん・・・・
べつに位置を移動する必要ないし・・・・
フリースペースに貼り付ければそれでいいんですけど・・・
ごもっともです・・・・
こんなこと思われている方のために・・・・
その場合はフリースペースは同じですが・・・・
CSSは・・・・・
/* ペタボタンロールオーバー */
#toppeta img {
display: none;
}
#toppeta a{
width:150px;
height:150px;
display:block;
background-repeat : no-repeat;
background-image : url(画像のURL);
}
#toppeta a:hover {
background-position: -150px 0;
}
自分で画像を作ってぼたんとしてフリースペースに貼り付けて
ロールオーバーはしない場合はこのＣＳＳは書く必要ありません