『CSS メニューを作っちゃおう 4』

見本ブログです

http://ameblo.jp/ex007/
　　　　　　　　　　　

こんな画像を作ります

本当はpngの透過画像ならきれいなんですが・・

IE6では透過部分が表示できませんので透過gif画像を使っています・・

リンクの貼り方がわかる方はスルーして下さい

まずは記事に画像を貼ります

それぞれの画像にリンクを貼っていきます

全部の画像にリンクを貼ったらHTMLタグを表示にします

必要なのはリンクのタグだけですので余分な<be />とか

ここにはありませんが　<p>や</p>などもあったら削除しておきます

ちょっとだけお勉強・・・・？みたいな・・・？

リンクの一つ一つをdivで囲みブロック要素とします
そして別々で動かせるようにそれぞれに別のID名を付けておきます

ID名はすでにブログ内で使っていなければ何でもかまいません
わたしはいつもその場の思いつきで適当に作って後でわからなくなっていつも後悔しています

で・・

今回はブログのトップに戻る要素には
<div id="h-top">
ヘッド部分につけるトップに戻るで　h-top なんてつけましたが
ヘッドのメニュの１番目で hm01 なんて～のでも
戻るから　modoru でも自分でわかればなんでもＯＫです

ペタ画面へのリンクは　<div id="h-peta">
プチメは　<div id="h-mail">
他のブログへのリンクは　<div id="h-link">
なんてつけてみました・・・
同じブログ内で他で使っていなければ自由に付けてください

簡単に説明すると・・

のように・・
ひとつひとつのリンクをそれぞれID名をつけたブロックにします

こうすることで
#h-top{ }とすればトップページへのリンクだけをさわることができます

下は見やすくするために一つ一つの間隔をあけていますが

ピンクのマーク部分のようにリンクのそれぞれの前に<div id="****">を

後に　</div>をつけて閉じてください

わんぽいんと・・・・・

このとき

※かぼちゃのブログ　とは見本で使っているブログのタイトルです

↓アメブロで画像を貼り付けたときに自動で付いてしまう　alt="かぼちゃのブログ"　を

↓title="ブログのトップへ"　とリンク先の説明に変更します

↑マウスがのった時リンク先の説明がポップアップします

見本ブログではアメブロ向上企画書へのリンクボタン以外は

設定してありますのでマウスを乗せて違いを確認下さい

alt属性とtitle属性についてはyahooとかgoogleで検索して勉強下さい

以上ができましたら・・・

コピーしてフリースペースやフリープラグインに貼り付けます

記事は削除しちゃってもかまいませんが

また変更や追加するときに使えますから

適当なタイトルをつけて下書き保存しておくと後々楽かも・・・

フリープラグインは文字数制限がありますからフリースペースを使うのが望ましいのですが

見本のブログはフリースペースの書いたものがアイフレもどき？に表示されるようになっていますので

今回はフリープラグインを使って説明します

フリースペースに貼り付けた場合も同じです

フリープラグインに貼り付けた場合

フリースペースには貼り付けた場合

もし初めてフリースペースやフリープラグインを使った場合は

サイドバーの配置で使用する方にドラッグします
３カラムでしたら左の一番上

２カラムでしたらサイドバーの一番上が最初に読み込まれますので動作が速いです

ブログを見るとこうなっています・・

では・・　ＣＳＳで表示位置を動かします

#frame{
position:relative;/*frameの左上（右上）を基準に*/
}
#h-top{
position:absolute;
top:20px;/*上から A*/
left:20px;/*左から B*/
}
#h-peta{
position:absolute;
top:60px;/*上から A*/
left:150px;/*左から B*/
}
#h-mail{
position:absolute;
top:160px;/*上から A*/
left:60px;/*左から B*/
}
#h-link{
position:absolute;
top:200px;/*上から A*/
right:80px;/*右から B*/
}