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

ブログ画像一覧を見る

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

<< 前のページへ最新 | 192 | 193 | 194 | 195 | 196 | 最初次のページへ >>

CSS も～い～か～ぃ・・？記事下広告

※Firefox3　での表示がおかしくなっていますのでまだ使わないで下さい

昨日まで挙動不審だった記事下広告・・・？

なんか落ち着いたような気がします

前に5つまであった設定も以前のように4つに戻っています

（普段は記事下広告は3つですが、検索から見にきた場合は記事下広告が4つ表示になります）

アメブロは広告を表示することで無料使用できます

くれぐれも広告を消したり、見えなくしたり、サイズを変更したりすることのないようにしてください

あくまでも使っているスキンにあわせるためのCSSです

では・・・　記事下広告から

/*記事下、ブログ下広告-マウスオーバー背景消す*/
#advertising2 #gadBox div.blockhoverGeneral,
#advertising3 #gadBox div.blockhoverGeneral{
background-color:transparent;
}

/*↑マウスオーバー時の変な背景を消すだけでしたらコレだけでOKです*/

/*記事下広告-Ads by Google*/
p#gadLogo{
color:#0000ff;/*文字色*/
text-align:right;/*右寄せする場合は・・しなければ削除*/
}

/*記事下広告-タイトル*/
#gadBox.adList .gadTitle,
#gadBox.general .gadTitle{
color:#ff0000;/*文字色*/
}

/*記事下広告-タイトルマウスオーバー時*/
#gadBox.adList div.blockhoverGeneral .gadTitle,
#gadBox.general div.blockhoverGeneral .gadTitle{
color:#ff0000;/*文字色*/
}

/*記事下広告-URL*/
#gadBox.adList .gadDisplayURL,
#gadBox.general .gadDisplayURL{
color:#00ff00;/*文字色*/
}

/*記事下広告-説明*/
#gadBox.adList .gadDescription,
#gadBox.general .gadDescription{
color:#fffffｆ;/*文字色*/
}

/*記事下広告-アイコン-1*/
#gadBox.adList div#adCount0 #gAdTitle0,
#gadBox.general div#adCount0 #gAdTitle0{
background-image:url(画像のURL);
}
/*記事下広告-アイコン-1 マウスオーバー*/
#gadBox.adList div#adCount0.blockhoverGeneral #gAdTitle0,
#gadBox.general div#adCount0.blockhoverGeneral #gAdTitle0{
background-image:url(画像のURL);
}

/*記事下広告-アイコン-2*/
#gadBox.adList div#adCount1 #gAdTitle1,
#gadBox.general div#adCount1 #gAdTitle1{
background-image:url(画像のURL);
}
/*記事下広告-アイコン-2 マウスオーバー*/
#gadBox.adList div#adCount1.blockhoverGeneral #gAdTitle1,
#gadBox.general div#adCount1.blockhoverGeneral #gAdTitle1{
background-image:url(画像のURL);
}

/*記事下広告-アイコン-3*/
#gadBox.adList div#adCount2 #gAdTitle2,
#gadBox.general div#adCount2 #gAdTitle2{
background-image:url(画像のURL);
}
/*記事下広告-アイコン-3 マウスオーバー*/
#gadBox.adList div#adCount2.blockhoverGeneral #gAdTitle2,
#gadBox.general div#adCount2.blockhoverGeneral #gAdTitle2{
background-image:url(画像のURL);
}

/*記事下広告-アイコン-4*/
#gadBox.adList div#adCount3 #gAdTitle3,
#gadBox.general div#adCount3 #gAdTitle3{
background-image:url(画像のURL);
}
/*記事下広告-アイコン-4 マウスオーバー*/
#gadBox.adList div#adCount3.blockhoverGeneral #gAdTitle3,
#gadBox.general div#adCount3.blockhoverGeneral #gAdTitle3{
background-image:url(画像のURL);
}

赤字部分を変更してください

ついでにブログの下も・・・

/*ブログ下広告-タイトル*/
#gadBox.footer .gadTitle_footer{
color: #0000ff;/*文字色*/
}
/*ブログ下広告-タイトルマウスオーバー時*/
#gadBox.footer div.blockhoverGeneral .gadTitle_footer{
color: #00ff00;/*文字色*/
}

/*ブログ下広告-説明*/
#gadBox.footer .gadDescription_footer{
color: #ff0000;/*文字色*/
}

/*ブログ下広告-URL*/
#gadBox.footer .gadDisplayURL_footer{
color: #00ff00;/*文字色*/
}

/*ブログ下広告-Ads by Google*/
#gadBox.footer p#gadLogo_footer{
color: #0000ff;/*文字色*/
}

/*ブログ下広告-アイコン*/
#gadBox.footer #adCount0_footer{
background-image:url(画像のURL);
}
/*ブログ下広告-アイコン　マウスオーバー*/
#gadBox.footer #adCount0_footer.blockhoverGeneral{
background-image:url(画像のURL);
background-repeat:no-repeat;
}

赤字部分を変更してください

文字色は変更場所がわかりやすいようにメチャクチャな色になっています
変更してから使ってください

CSSの中にはタレントさん用のもあるんです・・・

一般はアイコンが1.2.3　で　

タレントさんはアイコンが　王冠　ってなんで別にする必要があるんでしょうか？

アメブロさんはよくわかりません？

もう変わらないといいな～

追記です・・・・

CSS 新広告をなんとかしちゃおう 8

記事下広告に背景画像を設置している場合・・・

IE7では↓こうなってしまいます・・・　マウスでさわれば元には戻るのですが・・・・

IE7で広告が重なってしまいます・・・・

ＣＳＳの編集で広告の背景のＣＳＳを修正ください

/* 広告の背景に画像 */
.contents #advertising2{
margin-top: 50px;/* 記事とのスキマ */
padding: 5px 10px 0px 10px;/* 背景画像と広告のスキマ */←■■　下の空間を広く--２
display:block;
width: ***px;/* 広告の横幅 */
height:***px;/* 背景画像の縦 */　←■■　min-height:***px;/* 背景画像の縦 */---１

background:url(背景画像のURL) no-repeat!important
}

1.　min-height:***px;/* 背景画像の縦 */　に変更してください

縦を削除することによって背景画像が切れてしまう場合は

2.　paddingの下をその分、増やします（とりあえずは適当な数字を入れてみてください）

/* 広告の背景に画像 */
.contents #advertising2{
margin-top: 50px;/* 記事とのスキマ */
padding: 5px 10px 30px 10px;/* 背景画像と広告のスキマ */
display:block;
width: ***px;/* 広告の横幅 */
background:url(背景画像のURL) no-repeat !important
}

※これでもなおらなければコメントください

って・・・・これでうまく行ったと思ったら・・・・・・・