CSS メニューを作っちゃおう 4
見本ブログです
こんな画像を作ります
本当は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">
なんてつけてみました・・・
同じブログ内で他で使っていなければ自由に付けてください
簡単に説明すると・・
<div id="h-top"><a href="トップページのＵＲＬ"><img src="画像のＵＲＬ"></a></div>
<div id="h-mail"><a href="プチメのＵＲＬ"><img src="画像のＵＲＬ"></a></div>
<div id="h-peta"><a href="ペタのＵＲＬ"><img src="画像のＵＲＬ"/></a></div>
<div id="h-link"><a href="リンク先のＵＲＬ"><img src="画像のＵＲＬ" target="_blank" ></a></div>
のように・・
ひとつひとつのリンクをそれぞれID名をつけたブロックにします
こうすることで
#h-top{ }とすればトップページへのリンクだけをさわることができます
下は見やすくするために一つ一つの間隔をあけていますが
ピンクのマーク部分のようにリンクのそれぞれの前に<div id="****">を
後に </div>をつけて閉じてください
わんぽいんと・・・・・
このとき
<div id="h-top"><a href="http://ameblo.jp/ex007/"><img height="80" alt="かぼちゃのブログ" src="http://stat.ameba.jp/user_images/20090916/13/ex007/16/f9/g/o0082011510254640778.gif" width="57" border="0" /></a></div>
※かぼちゃのブログ とは見本で使っているブログのタイトルです
↓アメブロで画像を貼り付けたときに自動で付いてしまう alt="かぼちゃのブログ" を
↓title="ブログのトップへ" とリンク先の説明に変更します
<div id="h-top"><a href="http://ameblo.jp/ex007/"><img height="80" title="ブログのトップへ" src="http://stat.ameba.jp/user_images/20090916/13/ex007/16/f9/g/o0082011510254640778.gif" width="57" border="0" /></a></div>
↑マウスがのった時リンク先の説明がポップアップします
見本ブログではアメブロ向上企画書へのリンクボタン以外は
設定してありますのでマウスを乗せて違いを確認下さい
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*/
}
#h-peta a,
#h-mail a,
#h-link a{
overflow:hidden; outline:none;
}
水色の部分のCSSはIE以外でクリックしたときの画像の周りに出来る線を消します
2つ下の説明画像でtopをクリックした時・・画像の周りに出来ている線のことです
別になくてもかまいません・・し
IEでは効果はありません
見本のブログではTOPのリンク画像だけは線が表示されるようCSSを外しています
IE以外を使っている場合はクリックをして違いを確認下さい
始めは赤字部分に適当な数字を入れて実際にどこに表示されるのか確認します
top と left あるいは top と right の関係は↓下を参考にしてください
実際にブログを見ながら表示させたい位置に移動させたら完成です
また・・ここのブログの付箋紙ボタン？のようにヘッド画像の外側に配置する場合は・・
たとえば読者になる（チェックリスト）ボタンの場合・・
<div id="h-check"><a href="読者になるのＵＲＬ"><img src="画像のＵＲＬ"></a></div>
-110pxのようにマイナスをつけることで外側に配置できます
right:-100px; とすれば右側に100pxはみ出して表示されます
top:-50px; とトップをマイナスにすれば上につけることも可能です
注意・・あまりtopのマイナスが大きいと上すぎて画面の外の位置になり表示されません
トップページのＵＲＬ
http://ameblo.jp/あなたのＩＤ/
プチメのＵＲＬ
http://msg.ameba.jp/popupSendMessageInput.do?toAmebaId=あなたのＩＤ
ペタのＵＲＬ
http://peta.ameba.jp/p/addPeta.do?targetAmebaId=あなたのＩＤ
読者になるのＵＲＬ
http://blog.ameba.jp/reader.do?bnm=あなたのＩＤ
見本ブログ
のヘッド画像の下のメニュは・・・・
http://ameblo.jp/exlink/entry-10124436828.html
この記事の一番下にある方法を使っています
・・・・つづく ・・かも？
でも・・今回の画像を横に並べれば簡単に出来るし・・・
↓を参考に応用しても出来るし・・ 説明も面倒なので・・ つづかない ・・・かも？
CSS メニューを作っちゃおう（動画はドコ？）2
CSS メニューを作っちゃおう（動画はドコ？）3
メニューを作っちゃおう5（横メニュー1）
CSS メニューを作っちゃおう6（横メニュー2）
CSS メニューを作っちゃおう7 画像の置き換え
アイフレ？もどき・・・
リク記事です・・・
ヘッド画像の上にアイフレもどきをつけてお知らせなどをいつも表示させておきたい・・
出来れば・・フリースペースに書いたものがそのまま表示できれば・・・
ここのブログにも付いているアレ？です
これをアイフレもどきと言うのかどうかは問題にしないことにして・・
枠の表示位置の決め方です
※実際のＤは・・D100pxとEの上10px下10pxが加わって120pxになります
ＣＳＳに・・・・
#frame{
position:relative;/*frameの右上（左上）を基準に*/
}
#freespace{
position:absolute;
top:50px;/*上から A*/
right:50px;/*右から B ※注*/
width:350px;/*枠の横 C*/
height:100px;/*枠の縦 D*/
overflow:auto;/*スクロールをつける*/
padding:10px;/*中のスキマ E*/
background-color:#ccccff;/*枠内の背景色*/
z-index:300;/*重なりの順序を一番上に*/
filter:alpha(opacity=70); /*背景色を半透明*/
-moz-opacity: 0.7;/*背景色を半透明*/
opacity: 0.7;/*背景色を半透明*/
}
半透明にしない場合は
filter:alpha(opacity=70); /*背景色を半透明*/
-moz-opacity: 0.7;/*背景色を半透明*/
opacity: 0.7;/*背景色を半透明*/
この部分は必要ありません
※70と0.7を数字を少なくすれば（50と0.5など）透明度が高くなります
スキンによっては、すでに入っているＣＳＳによっては基準がヘッド画像の下になる場合があります
top:50px;/*上から A*/
↓
top:-250px;/*上から A*/
このように -（マイナス）をつければ上に移動します
right:50px;/*右から B ※注*/
right の場合は右上が基準になります
もし・・枠を左の方に表示する場合はrightの数値を大きくしてもいいのですが
left:50px; とかにして左上を基準にすることもできます
見本のブログ ではヘッド画像にも手を加えています
アイフレ？の枠が入る部分に同じ色で枠を作って中に入れようと思います
この場合は半透明を使うとなかなか色が合いません
また・・色を合わせてこれを使うのでしたら
padding:10px;/*中のスキマ E*/ これは必要ないですね・・
あとは・・・・
フリースペースに書くだけです
このままではフリースペースに書いたもの全部が枠内に表示されてしまいます
フリースペースにバナー画像を貼ったりなどアイフレ？もどき以外にも表示させたい場合は・・
アイフレもどき内に表示する部分を <div id="aifure"> と </div> で囲みます
で・・
この場合のＣＳＳは
#frame{
position:relative;/*frameの右上（左上）を基準に*/
}
#freespace{ ←■ここを#aifureに変更します■
position:absolute;
top:50px;/*上から A*/
#frame{
position:relative;/*frameの右上（左上）を基準に*/
}
#aifure{
position:absolute;
top:50px;/*上から A*/
right:50px;/*右から B ※注*/
width:350px;/*枠の横 C*/
height:100px;/*枠の縦 D*/
overflow:auto;/*スクロールをつける*/
padding:10px;/*中のスキマ E*/
background-color:#ccccff;/*枠内の背景色*/
z-index:300;/*重なりの順序を一番上に*/
filter:alpha(opacity=70); /*背景色を半透明*/
-moz-opacity: 0.7;/*背景色を半透明*/
opacity: 0.7;/*背景色を半透明*/
}
これでフリースペースに
<div id="aifure">
ここに書かれたものはアイフレもどき内に表示されます
</div>
それ以外にかかれたものは
そのままサイドバーに表示されます
サイドバーの配置で「フリースペース」を表示する方へ移動させるのを忘れないでください
「フリースペース」全部をアイフレもどき内に表示する場合は3カラムでしたら左の1番上
2カラムでしたらサイドバーの1番上に配置すると1番最初に読み込まれますので表示が速いです
※いつものように携帯はフリースペースを読み込みません
携帯向けにメッセージボードも併用ください
「アイフレもどき」という言い方にあれこれあるかと思いますが・・・
前の記事で「アイフレもどき」と使ったのでこの記事も「アイフレもどき」を使いました
でも・・・アイフレは正式には「インラインフレーム」と言わないと通用しません
し・・・
これって「アイフレもどき」でもないよね・・・・ ？
ごめんなさい
少し疲れました
コメントの返事・・ だいぶ遅れそうです・・ m(_ _)m
スキンの外側に設置したり・・枠線をつけたり・・スクロールバーの色をかえたり・・
アイフレを少し遅れてから表示させます JavaScript アイフレの遅延効果