CSS ルームのメニュ4
ルームのメニュにマウスがのったらわかりやすく説明が出るようにします
前の記事 で説明したメニュに追加します
<div id="roomtop"><a href="http://ameblo.jp/あなたのID/" title="ここに説明を書きます" ><img src="画像のURL"></a><a href="http://now.ameba.jp/あなたのID/" title="ここに説明を書きます" ><img src="画像のURL"></a><a href="http://msg.ameba.jp/pub/send/index?toAmebaId=あなたのID" title="ここに説明を書きます" ><img src="画像のURL"></a></div>
aタグの中に title="いつもペタをありがと～" といった説明を入れます
マウスがメニュボタンに乗っかると・・ [いつもペタをありがと～] って説明が出るようになります
CSS ルームのメニュ3
CSS ルームのメニュ2 の続きです
忘れていました・・・
↑前の記事 で説明したメニュ
<div id="roomtop"><a href="http://ameblo.jp/あなたのID/"><img src="画像のURL"></a><a href="http://now.ameba.jp/あなたのID/"><img src="画像のURL"></a><a href="http://msg.ameba.jp/pub/send/index?toAmebaId=あなたのID"><img src="画像のURL"></a></div>
↑画像の間に隙間を作るときは 全角のスペース （半角のスペースでもOK）
↓わかりやすくスペースを ■ で説明します
<div id="roomtop"><a href="http://ameblo.jp/あなたのID/"><img src="画像のURL"></a>■<a href="http://now.ameba.jp/あなたのID/"><img src="画像のURL"></a>■<a href="http://msg.ameba.jp/pub/send/index?toAmebaId=あなたのID"><img src="画像のURL"></a></div>
※スキマをあける場合はスキマを含めて横幅以内になるように画像を作ってください
↑上下2段にするには <br>
<div id="roomtop"><a href="http://ameblo.jp/あなたのID/"><img src="画像のURL"></a><br><a href="http://now.ameba.jp/あなたのID/"><img src="画像のURL"></a><a href="http://msg.ameba.jp/pub/send/index?toAmebaId=あなたのID"><img src="画像のURL"></a></div>
↑上と下の間にスキマを作るには <br><br>
<div id="roomtop"><a href="http://ameblo.jp/あなたのID/"><img src="画像のURL"></a><br><br><a href="http://now.ameba.jp/あなたのID/"><img src="画像のURL"></a><a href="http://msg.ameba.jp/pub/send/index?toAmebaId=あなたのID"><img src="画像のURL"></a></div>
いろいろ工夫して楽しいメニュを作ってください
※説明に使っている画像は ゆうこせんせい
さまで配布されている画像です
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://ameblo.jp/あなたのID/"><img src="画像のURL"></a>
なう
<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://msg.ameba.jp/pub/send/index?toAmebaId=あなたのID"><img src="画像のURL"></a>
ペタ
<a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=あなたのID"><img src="画像のURL"></a>
プレゼント
<a href="http://present-shop.ameba.jp/shop/top?toAmebaId=あなたのID"><img src="画像のURL"></a>
読者になる
<a href="http://blog.ameba.jp/reader.do?bnm=あなたの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> で囲みます
たとえばブログ+ペタ+読者になる+アメンバーになる でしたら
<div id="roomtop"><a href="http://ameblo.jp/あなたのID/"><img src="画像のURL"></a><a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=あなたのID"><img src="画像のURL"></a><a href="http://blog.ameba.jp/reader.do?bnm=あなたのID"><img src="画像のURL"></a><a href="http://amember.ameba.jp/amemberRequest.do?oAid=あなたのID"><img src="画像のURL"></a></div>
こうなります・・メニュ数はいくつでもかまいません
画像を並べたときに800pxを超えないようにしてください
（いきなりフリースペースに書かないでメモ帳とかで作ってからフリースペースにコピペしてください）
この時点でルームを見るとフリースペースに画像が表示されています
この画像をCSSで上にもって行きます
出来ましたら・・次はCSSです
上で注意していますが・・これも一旦メモ帳で作ってください
（いきなり改行ナシで作るとよくわかりません？メモ帳で作ってそれを保存してから改行を削除すればわかりやすいし・・修正するときも保存しておいたメモ帳を変更すれば楽です）
↓わかりやすいように改行が入っていますのでこのままフリースペースにコピペはしないで下さい
<style type="text/css">
#wideContentsArea{
width:800px;/*全体の横幅*/
margin:0 auto;
position:relative;
}
#header{
visibility: hidden;
height:150px;/*画像の高さ*/
}
#roomtop{
width:800px;
position:absolute;
top:40px;/*上からの位置*/
left:0px;/*左からの位置*/
}
</style>
基本的なルームでしたら変更するのは画像の高さと左からの位置だけです
↓上の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ですから削除してからルームのフリースペースに貼り付けます
<style type="text/css">#wideContentsArea{width:800px;/*全体の横幅*/margin:0 auto;position:relative;}#header{visibility: hidden;height:150px;/*画像の高さ*/}#roomtop{width:800px;position:absolute;top:40px;/*上からの位置*/left:0px;/*左からの位置*/}</style>
※改行が1ヶ所でもあると動作しません
ここまででメニュの作り方を説明してきましたが・・・
あたしゃそんなもんはいらないよ・・・
名前 ルーム｜ ブログ｜ なう｜ ピグの部屋
↑コレだけを消す方法をだけおせ～て～ って～ぇ・・ガッカリだよ！！（出川哲郎風に言ってください）な方は
ルームのフリースペースに・・
<style type="text/css">#header{visibility: hidden;}</style>
コレを消しちゃうとルームからブログへのリンクがなくなっちゃいます
消しちゃう場合はフリースペース等にブログへのリンクを作ってください
体調のせいで記事にするのが遅くなってすみませんでした m(_ _)m
CSS ルームのメニュ3 こちらも参考にして下さい