アイフレ？もどき・・・
リク記事です・・・
ヘッド画像の上にアイフレもどきをつけてお知らせなどをいつも表示させておきたい・・
出来れば・・フリースペースに書いたものがそのまま表示できれば・・・
ここのブログにも付いているアレ？です
これをアイフレもどきと言うのかどうかは問題にしないことにして・・
枠の表示位置の決め方です
※実際のＤは・・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 アイフレの遅延効果