CSS アイフレ？スキンの外に・・
なんか・・アイフレで定着してしまった感がありますが・・
再度・・書いておきます
正式には「インラインフレーム」と言わないと通用しません
また・・これはそれっぽくなっていますが・・「インラインフレーム」ではありません
しかし「インラインフレーム」じゃないからアイフレでもいいのか？？？
ともあれ・・また質問が多くきますので
続きです
でも・・わたしがこれを記事にしたときにはヘッド部分に設置することを想定していたのですが・・
スキンの外につけることが一般的になっちゃっているようで・・
たぶん最初は記事枠を狭めたために外に表示されちゃったというエラーから始まったのではないかと想像していますが・・
最初にやり始めた方のセンスはすごいと思います・・
で・・・
ちゃんとしたスキン外に表示のさせ方です
簡単に説明すると・・・
rightとかleftで基準を作って-（マイナス）をつけて反対側に移動させることにより
スキンの外側に移動させます
あるいはみなさまがやられているようにスキンの幅以上移動させて反対側に表示させても同じことなんですが・・
最初に・・・
#frame{
position:relative;/*frameの右上（左上）を基準に*/
}
まだ↑このＣＳＳが入っていない方はＣＳＳの最後に加えてください
すでに入っている方は入れなくても大丈夫です
わからなければ最初は入れなくても大丈夫です
top:0px;right:0px;と基準を調べるときにディスプレイ画面の右端や左端に表示される場合は
このＣＳＳが入っていませんからＣＳＳの最後に加えてください
スキンの内部のどこかに表示される場合はすでに入っていますから必要はありません
スキンの右側に表示する場合・・
前回の続きとして ID名が同じではまずいので・・aifure01にします（同じでなければなんでもOK）
では・・フリースペースに表示する文を書きます
<div id="aifure01">
ここに書かれたものはアイフレもどきaifure01内に表示されます
</div>
フリースペースに書いたら
（フリースペースに書かれていませんと表示されません
また初めてフリースペースを使う場合は・・
サイドバーの配置でフリースペースを使用する機能に移動させておいてください）
まずは・・top:0px;right:0px;で基準がどこにあるか調べます
※例図ではヘッド画像の下に基準がありますが・・ヘッド画像の上にある場合もあります
#aifure01{
position:absolute;
top:0px;/*上から A*/
right:-0px;/*右から B*/
width:200px;/*枠の横 C*/
height:100px;/*枠の縦 D*/
overflow:auto;/*スクロールをつける*/
padding:10px;/*中のスキマ E*/
background-color:#ffccff;/*枠内の背景色*/
z-index:300;/*重なりの順序を一番上に*/
filter:alpha(opacity=70); /*背景色を半透明*/
-moz-opacity: 0.7;/*背景色を半透明*/
opacity: 0.7;/*背景色を半透明*/
border:3px solid #ff00ff;/*枠 線の太さ 線種 線の色*/
}
枠をつけるにはという質問がありましたので枠もつけてみます
border:3px solid #ff00ff;/*枠 線の太さ 線種 線の色*/
この部分です
枠をつけない場合はこの行は削除します
基準がわかったら・・
あとは好きな位置に移動します
基準より上に移動するにはtopに-（マイナス）を右に移動するにはrightに-（マイナス）をつけます
#aifure01{
position:absolute;
top:-50px;/*上から A*/
right:-250px;/*右から B*/
width:200px;/*枠の横 C*/
height:100px;/*枠の縦 D*/
overflow:auto;/*スクロールをつける*/
padding:10px;/*中のスキマ E*/
background-color:#ffccff;/*枠内の背景色*/
z-index:300;/*重なりの順序を一番上に*/
filter:alpha(opacity=70); /*背景色を半透明*/
-moz-opacity: 0.7;/*背景色を半透明*/
opacity: 0.7;/*背景色を半透明*/
border:3px solid #ff00ff;/*枠 線の太さ 線種 線の色*/
}
同じようにスキンの左側につけてみます
やはりID名が同じにならないようにaifure02でやってみます
では・・フリースペースに表示する文を書きます
<div id="aifure02">
ここに書かれたものはアイフレもどきaifure02内に表示されます
</div>
フリースペースに書いたら
右側と同じようにtop:0px;left:0px;で基準がどこにあるか調べます
※例図ではヘッド画像の下に基準がありますが・・ヘッド画像の上にある場合もあります
#aifure02{
position:absolute;
top:0px;/*上から A*/
left:0px;/*左から B*/
width:150px;/*枠の横 C*/
height:200px;/*枠の縦 D*/
overflow:auto;/*スクロールをつける*/
padding:10px;/*中のスキマ E*/
background-color:#0000ff;/*枠内の背景色*/
z-index:300;/*重なりの順序を一番上に*/
filter:alpha(opacity=70); /*背景色を半透明*/
-moz-opacity: 0.7;/*背景色を半透明*/
opacity: 0.7;/*背景色を半透明*/
border:3px dotted #00ff00;/*枠 線の太さ 線種 線の色*/
color:#ffffff;/*文字色*/
}
今度は枠線を点線にして中の文字色もここで設定してみます
border:3px dotted #00ff00;/*枠 線の太さ 線種 線の色*/
color:#ffffff;/*文字色*/
この部分・・必要なければこれらの行は削除します
基準がわかったら・・あとは好きな位置に移動します
基準より上に移動するにはtopに-（マイナス）を左に移動するにはleftに-（マイナス）をつけます
#aifure02{
position:absolute;
top:60px;/*上から A*/
left:-200px;/*左から B*/
width:150px;/*枠の横 C*/
height:200px;/*枠の縦 D*/
overflow:auto;/*スクロールをつける*/
padding:10px;/*中のスキマ E*/
background-color:#0000ff;/*枠内の背景色*/
z-index:300;/*重なりの順序を一番上に*/
filter:alpha(opacity=70); /*背景色を半透明*/
-moz-opacity: 0.7;/*背景色を半透明*/
opacity: 0.7;/*背景色を半透明*/
border:3px dotted #00ff00;/*枠 線の太さ 線種 線の色*/
color:#ffffff;/*文字色*/
}
見本のブログでは画像の中にアイフレを入れています
工夫してチャレンジ下さい
今回ID名をaifure01やaifure02で説明しましたが・・
ID名は同じページ内で重ならなければ好きなようにつけてかまいません
自分でわかりやすいID名を付けて下さい
また・・別のID名をつけてフリースペースに書いてCＳＳを設定すればドコにでもいくつでも設置することが出来ます
見ている方がすべてワイド画面のディスプレイで見ているとは限りません
あまりスキンと離れすぎると見えない場合もあります
わたしがそうです質問いただいて・・どこにアイフレがあるの？ってことも・・(T_T)
質問いただいたので追記です
それぞれに違うスクロールバーをつけてみます
スクロールバーの変更
http://ameblo.jp/exlink/entry-10077957936.html
↑この記事を参考に
scrollbar-base-color: #ff00ff; /*スクロールバーの色系*/
このようなんを入れてください
もちろんもっと細かなスクロール設定も可能です・・
#aifure01{
position:absolute;
top:-50px;/*上から A*/
left:-180px;/*左から B*/
width:100px;/*枠の横 C*/
height:50px;/*枠の縦 D*/
overflow:auto;/*スクロールをつける*/
padding:10px;/*中のスキマ E*/
background-color:#ffccff;/*枠内の背景色*/
z-index:300;/*重なりの順序を一番上に*/
filter:alpha(opacity=70); /*背景色を半透明*/
-moz-opacity: 0.7;/*背景色を半透明*/
opacity: 0.7;/*背景色を半透明*/
border:3px solid #ff00ff;/*枠*/
scrollbar-base-color: #ff00ff; /*スクロールバーの色系*/
}
#aifure02{
position:absolute;
top:0px;/*上から A*/
left:0px;/*左から B*/
width:150px;/*枠の横 C*/
height:200px;/*枠の縦 D*/
overflow:auto;/*スクロールをつける*/
padding:10px;/*中のスキマ E*/
background-color:#0000ff;/*枠内の背景色*/
z-index:300;/*重なりの順序を一番上に*/
filter:alpha(opacity=70); /*背景色を半透明*/
-moz-opacity: 0.7;/*背景色を半透明*/
opacity: 0.7;/*背景色を半透明*/
border:3px dotted #00ff00;/*枠 線の太さ 線種 線の色*/
color:#ffffff;/*文字色*/
scrollbar-base-color: #ffffff; /*スクロールバーの色系*/
}
