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

今回は前回できた記事枠 の中に１ポイントで背景画像を配置します

まずは範囲・・・・・

って、記事下の広告に白い背景色が付いていますから消さないと・・・

.contents #advertising2{
background:none !important;
}

これで広告の背景色が消えます

.entry .contents　の範囲（赤い部分）　と、background-positionの位置関係です

.entry　の範囲（赤い部分）　と、background-positionの位置関係です

background-positionは、背景画像の位置を指定するプロパティです
値を横方向、縦方向の順にスペースで区切って
left・center・rightや、top・center・bottom　で指定します
他にも % や　px　でも指定することが可能です
（基準は左上からになります）

わかりやすい画像でだいたいの位置を見てみると

.entry .contents の場合

.entry　の場合

だいたいの範囲とbackground-positionの位置関係が理解できましたら

さらに

このような画像を使って・・・・・

画像の背景色（#ccffcc）と同じ色を記事の背景色に設定すると

あるいは透過画像を使用すると色を合わせる必要がなくなるので簡単にできます

.entry {
background-color:#ccffcc;
background-image: url(画像のURL);
background-repeat: no-repeat;
background-position:95% 75%;
}

.contents #advertising2{
background:none !important;
}

こうなります・・・・

次は記事枠に画像を使ってみます・・・・