『CSS ルームのメニュ2』

お待たせしちゃってすみません・・

昼間はそれほどでもないのですが・・

夜になるとズキンズキンと痛み出すんです

それも右耳と左耳が日替わりで・・？

昨日は処方してもらった鎮痛剤がまったく効かなくて

それでもまたすぐに飲んだらまずいだろうと2時間ガマンしてからもう1錠のんでやっと眠ることが出来ました

なんか聴力が落ちてきた感じです

あさ起きたとき・・「何かが耳に入ってる？」って思っちゃったほど耳をふさがれている聞え方でした

右の耳はメニエールでほとんど聴力がなくなっちゃっているから左も聞えなくなっちゃったら・・・・
大変だ～

でも・・昼間は買い物に行っても普通に店員さんと会話しているしテレビも普通に見ているし・・

聴力落ちたのに慣れちゃった？・・の？

検査してもらわなくちゃ・・・

って・・したら月曜日は午前中は腹部の超音波検査で午後は耳の検査？

いつ仕事をするんだ？

たわごとはほっといて・・・

ルームのフリースペースに書く場合・・改行を削除する必要があります

って・・いきなし注意書き書いちゃっていますが大事なんで・・

ルームのフリースペースにCSSを書くときには改行があると動作しません
ので・・フリースペースに書いたときCSSが見にくく修正が面倒になります
今回はブログで作ってきたリストを使ってCSSで装飾するメニュではなくあまりCSSを使わないでメニュを作ります

では・・どんなメニュボタンを設置するか決めましたか？

ボタン（画像）は作りましたか？
画像（ボタン）それぞれの横幅は同じにする必要はありません

全部の横幅がちがったとしてもOKです・・ただ・・縦は全部同じにしてください
使うメニュボタンを横に並べた時に800pxを超えないように作ってください

あたしゃ・・　画像なんて作れないから今回はパス！　・・・って～方

ゆうこせんせいさま（←見本のルーム）がお持帰り自由の画像を作ってくださいました

http://ameblo.jp/yutannojr/entry-10643581768.html

http://ameblo.jp/yutannojr/entry-10643947273.html
お持帰りのさいにはコメントにお礼を書いていってください

画像の横幅が2種類ありますから全部を並べたとき横幅が800px以内になるように自由に組み合わせてください

この画像使ってもいいよ～って方紹介させていただきますのでメッセージまたはコメントを下さい

よろしくお願いします

CSS　ルームのメニュ1 ここにある画像もお持帰り自由です

（透過していませんので白背景で使ってください　見本→ http://profile.ameba.jp/ab-test/ ）

では・・メニュを作ります（順番はどうでもかまいません↓下の中からいくつか選択します）

絶対に無いとまずい物・・ブログ

コレがないとルームからブログに移動が出来ません

ブログ

なう
<a href="http://now.ameba.jp/あなたのID/"><img src="画像のURL"></a>

ピグの部屋
<a href="http://pigg.ameba.jp/?targetAmebaId=あなたのID"><img src="画像のURL"></a>

メッセージ

ペタ

プレゼント

読者になる

アメンバーになる

<a href="http://amember.ameba.jp/amemberRequest.do?oAid=あなたのID"><img src="画像のURL"></a>

他にも自分のホームページへのリンクボタンや規約ページへのリンクボタンやTwitter・・

などなど・・あなたの作りたいメニュボタンは決まりましたか？

（前のページでも書いていますがランキングボタンはURLが違うのでダメだと思います）

メニュ項目と使う画像が決まったら・・

ルームのフリースペースに・・

順番は好きなようでかまいませんのでドンドンつなげて（表示は左からの順番になります）改行はNG

出来上がったら<div id="roomtop">　と　</div> で囲みます

たとえばブログ+ペタ+読者になる+アメンバーになる　でしたら

こうなります・・メニュ数はいくつでもかまいません

画像を並べたときに800pxを超えないようにしてください

（いきなりフリースペースに書かないでメモ帳とかで作ってからフリースペースにコピペしてください）

この時点でルームを見るとフリースペースに画像が表示されています

この画像をCSSで上にもって行きます

出来ましたら・・次はCSSです

上で注意していますが・・これも一旦メモ帳で作ってください

（いきなり改行ナシで作るとよくわかりません？メモ帳で作ってそれを保存してから改行を削除すればわかりやすいし・・修正するときも保存しておいたメモ帳を変更すれば楽です）

↓わかりやすいように改行が入っていますのでこのままフリースペースにコピペはしないで下さい

基本的なルームでしたら変更するのは画像の高さと左からの位置だけです

↓上のCSSの説明です・・読まなくてもかまいません

#wideContentsArea{
width:800px;/*全体の横幅*/
margin:0 auto;
position:relative;
}

横幅を800pxにして（一応・・みなさま最初から800pxなんですが・・）基準点を決めます

#header{
visibility: hidden;
height:150px;/*画像の高さ*/
}

名前ルーム｜ブログ｜なう｜ピグの部屋　を消して・・画像の高さ分（見本では150px）のスペースを作ります

注1：最初から設定されているスキマ　40px

注2：最初から設定されているスキマ　10px

#roomtop{
width:800px;
position:absolute;
top:40px;/*上からの位置*/
left:0px;/*左からの位置*/
}

メニュ画像を基準点の位置にもっていってから上から40px（注1：最初から設定されているスキマ40px）下げます

見本では3枚の画像の幅の合計がほとんど800pxなので横の移動はしません　left:0px;/*左からの位置*/

もし・・メニュ項目が少なくて画像を右に動かしたい場合は・・

left:0px;/*左からの位置*/　この0pxをみながら増やしていけば右に移動します

中央にするのでしたら・・（800px－画像の横幅）÷2　コレだけ右に移動すれば中央になります
別に左端に表示のままでも大丈夫なんですが・・

CSS ルームのカスタマイズ2 　こちらを使ってカスタマイズされている場合は

上のCSSの800pxをあなたが設定した全体の幅にしてください

またメニュに使う画像も並べたときにその幅以内になるようにしてください

出来ましたら改行はNGですから削除してからルームのフリースペースに貼り付けます

※改行が1ヶ所でもあると動作しません

ここまででメニュの作り方を説明してきましたが・・・

あたしゃそんなもんはいらないよ・・・

名前ルーム｜ブログ｜なう｜ピグの部屋　

↑コレだけを消す方法をだけおせ～て～　って～ぇ・・ガッカリだよ！！（出川哲郎風に言ってください）な方は

ルームのフリースペースに・・

体調のせいで記事にするのが遅くなってすみませんでした　m(_ _)m

CSS　ルームのメニュ3 　こちらも参考にして下さい

ブログ画像一覧を見る

このブログをフォローする

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！

CSS ルームのメニュ2

CSS　ルームのメニュ2