アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！ -49ページ目

<< 前のページへ最新 | 47 | 48 | 49 | 50 | 51 | 最初次のページへ >>

CSS　アイフレ？スキンの外に・・

なんか・・アイフレで定着してしまった感がありますが・・
再度・・書いておきます
正式には「インラインフレーム」と言わないと通用しません
また・・これはそれっぽくなっていますが・・「インラインフレーム」ではありません
しかし「インラインフレーム」じゃないからアイフレでもいいのか？？？

ともあれ・・また質問が多くきますので

アイフレ？もどき・・・

続きです

でも・・わたしがこれを記事にしたときにはヘッド部分に設置することを想定していたのですが・・
スキンの外につけることが一般的になっちゃっているようで・・
たぶん最初は記事枠を狭めたために外に表示されちゃったというエラーから始まったのではないかと想像していますが・・
最初にやり始めた方のセンスはすごいと思います・・

で・・・
ちゃんとしたスキン外に表示のさせ方です

見本のブログ・・

簡単に説明すると・・・

rightとかleftで基準を作って-（マイナス）をつけて反対側に移動させることにより

スキンの外側に移動させます

あるいはみなさまがやられているようにスキンの幅以上移動させて反対側に表示させても同じことなんですが・・

最初に・・・

#frame{
position:relative;/*frameの右上（左上）を基準に*/
}

まだ↑このＣＳＳが入っていない方はＣＳＳの最後に加えてください

すでに入っている方は入れなくても大丈夫です

わからなければ最初は入れなくても大丈夫です

top:0px;right:0px;と基準を調べるときにディスプレイ画面の右端や左端に表示される場合は

このＣＳＳが入っていませんからＣＳＳの最後に加えてください

スキンの内部のどこかに表示される場合はすでに入っていますから必要はありません

スキンの右側に表示する場合・・

前回の続きとして　ID名が同じではまずいので・・aifure01にします（同じでなければなんでもOK）

では・・フリースペースに表示する文を書きます

ここに書かれたものはアイフレもどき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でやってみます

では・・フリースペースに表示する文を書きます

ここに書かれたものはアイフレもどき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; /*スクロールバーの色系*/
}

ＣＳＳ　またまたやってくれちゃいました　記事下広告

遅くなってすみません

昨日のうちにやろうと思ったのですが・・

寝ちゃったものですから・・

また記事下広告に手が入れられましたね・・

ピグなどで増収なんですから

いい加減にブログの広告を減らしたらいかがなもんでしょうか？

アメブロの一番のダメなところ・・って聞いて

ほとんどのみなさまが「広告が多すぎる」と・・答えるのではないでしょうか？

なんか・・数うちゃ当る方式？で・・

コレでもか！ってくらい広告だらけなんですが・・

Wikipediaによると？
サイバーエージェントはインターネット広告代理店事業を主とする企業らしい？

インターネットの広告を扱う会社なのにいっぱい広告をつけて拒否反応を起こされているのはいかがなもんなんでしょう？

インターネット広告ならもっとスマートに出来るのではありませんか？

あなたなら出来ます！

もっと効率のいい広告を考えてください・・・

と・・いっても最近はGoogleに広告まかせちゃっているからな・・・

Wikipediaも書き直さないとダメなのかも・・

で・・・・

ここのブログのＣＳＳを使って↑こうなっちゃっている方・・

元の記事は　CSS　広告の本とモグラのアイコン　です

ＣＳＳの編集で・・

/*記事下　本*/
.gadBox#general div#adCount0 #gAdTitle0,
.gadBox#general div#adCount1 #gAdTitle1,
.gadBox#general div#adCount2 #gAdTitle2,
.gadBox#general div#adCount3 #gAdTitle3,
.gadBox#general div#adCount4 #gAdTitle4{
background-image:url(画像のURL );
}
/*記事下　本　マウスがのった時*/
.gadBox#general div#adCount0.blockhoverGeneral #gAdTitle0,
.gadBox#general div#adCount1.blockhoverGeneral #gAdTitle1,
.gadBox#general div#adCount2.blockhoverGeneral #gAdTitle2,
.gadBox#general div#adCount3.blockhoverGeneral #gAdTitle3,
.gadBox#general div#adCount4.blockhoverGeneral #gAdTitle4{
background-image:url(画像のURL );
} /*ブログ下モグラ*/
.gadBox#gadFooter #adCount0_footer{
background-image:url(画像のURL );
}

↑この部分を探して削除下さい
（ブログ下のモグラもこのＣＳＳでは効きませんのでついでに削除します）
すると・・↓このようにアイコンが消えます

でも・・やっぱりアイコン付けたいって～方は・・赤字は削除して青時部分を加えます

background-repeat:no-repeat;
padding:3px 0 2px 20px;/*上右下左*/
text-decoration:none;
}
/*記事下　本　マウスがのった時*/
.gadBox#general div#adCount0.blockhoverGeneral #gAdTitle0,
.gadBox#general div#adCount1.blockhoverGeneral #gAdTitle1,
.gadBox#general div#adCount2.blockhoverGeneral #gAdTitle2,
.gadBox#general div#adCount3.blockhoverGeneral #gAdTitle3,
.gadBox#general div#adCount4.blockhoverGeneral #gAdTitle4{
background-image:url(画像のURL );
} /*ブログ下モグラ*/
.gadBox#gadFooter #adCount0_footer{
background-image:url(画像のURL );
}

もし・・上のＣＳＳを使っていなくて新にアイコンを付けたい方は・・ＣＳＳの最後に・・

/*記事下広告*/
.gadBox#general div#adCount0 #gAdTitle0,
.gadBox#general div#adCount1 #gAdTitle1,
.gadBox#general div#adCount2 #gAdTitle2,
.gadBox#general div#adCount3 #gAdTitle3,
.gadBox#general div#adCount4 #gAdTitle4{
background-image:url(画像のURL );
background-repeat:no-repeat;
padding:3px 0 2px 20px;/*上右下左*/
text-decoration:none;
}

ついでに下線も消して・・↓こうなります

もし・・アイコンはいらないけど下線も消したいって場合は・・

・・・・・

なんか間が空きすぎじゃありませんか？

div.blockGeneral,
#talent div.blockTarent,
#gadBox.talent div.blockTarent,
#gadBox.adList div.blockGeneral,
#gadBox.general div.blockGeneral{
margin-top:0;
}
.gadDescription,
#gadBox.talent .gadDescription,
#gadBox.adList .gadDescription,
#gadBox.general .gadDescription{
padding:0;
}

これでスキマがつまります（アイコンつけていない場合も）

記事の背景に画像で枠を付けられている方・・

記事下広告の部分で背景画像が切れちゃう場合は・・

#advertising2{

width:380px;

}

とかで・・広告の幅を少し狭くしてください

東京メトロスマイルフェスタ2010　車両基地イベント in AYASE

地下鉄の中吊広告で見つけました

平成22年11月28日（日）に綾瀬車両基地において
「東京メトロスマイルフェスタ2010　車両基地イベント in AYASE」を開催
http://www.tokyometro.jp/news/2010/2010-48.html

はがきで事前に応募しないといけないのですが・・
事前応募制アトラクション・特別臨時列車への応募
http://www.tokyometro.jp/news/2010/2010-48_1.html

A　車両洗浄乗車体験（車両自動洗浄の様子を車内から観察できる。）
とか・・
E　特別臨時列車「メトロトリプルリレー号」乗車ご招待

車に乗ったまま車の洗車機に入ってみたいって思ったことありませんか？
車じゃないですが・・経験できます

電車に興味をお持ちのお子さんがおられるみなさま・・
ぜひ・・連れて行ってあげてください

こちらは有料になりますが・・昭文社×近畿日本ツーリストの共催企画ツアー

http://www.mapple.co.jp/other/other_detail.asp?id=499

鉄ヲタ（鉄オタ）ではありませんけど・・
行ってみたいです

残念ながら仕事なんでいけません (T_T)

えっ・・・？

記事下広告また変更・・・？　なの？

様子見かねて帰宅後に見てみますね・・・

記事下広告のアイコンなんて・・ど～でもいいのに・・

もっと先にやらなきゃいけないことないんですか？

決算見ました・・

ピグなどの課金事業でだいぶ儲かったようで・・

だからといってブログをないがしろにしていいわけではありません

ブログあってのピグです

そろそろブログの広告・・少し減らしませんか？

<< 前のページへ最新 | 47 | 48 | 49 | 50 | 51 | 最初次のページへ >>

ブログ画像一覧を見る

このブログをフォローする

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！

CSS アイフレ？スキンの外に・・

ＣＳＳ またまたやってくれちゃいました 記事下広告

東京メトロスマイルフェスタ2010 車両基地イベント in AYASE

CSS　アイフレ？スキンの外に・・

ＣＳＳ　またまたやってくれちゃいました　記事下広告

東京メトロスマイルフェスタ2010　車両基地イベント in AYASE