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

ブログ画像一覧を見る

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

<< 前のページへ最新 | 302 | 303 | 304 | 305 | 306 | 最初次のページへ >>

CSS　サイドコンテンツの文字色

アメブロランキング

[総合ランキング] と
[ジャンルランキング] 　の文字色は

#ranking .rank_ttl{
color:#ff0000;
}

111位/1111111111人中の文字色は

#ranking .rank{
color:#ff0000;
}

このブログの読者

このブログの更新情報が届きますの文字色は

#reader dd{
color:#ff0000;
}

読者数1000人　の文字色は

#reader .contents{
color:#ff0000;
}

( by ******さん ) 　の文字色は

#reader li{
color:#ff0000;
}

お気に入りブログ

( by *******さん更新！ )　　の文字色は

#favorite li{
color:#ff0000;
}

※わかりやすく文字色は赤で説明してあります

オリジナルスキン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の位置関係が理解できましたら

.entry .contents{
background-image: url(画像のURL);
background-repeat: no-repeat;
background-position:80% 80%;
}
.contents #advertising2{
background:none !important;
}

さらに

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

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

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

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

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

こうなります・・・・

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

オリジナルスキンCSSの編集　記事枠（線）

リクエストにお答えして記事枠の付け方です
今回はborder（線）を使った方法です

border----
パディング(padding)の外側にある枠の領域のことで実際は線とは違いますが・・・

線感覚で使う場合がほとんどですので線ってことにしておきます

スタンダードのグリーンスキンを使って説明します
元の状態です

/*記事枠*/
.entry{

border:3px solid #00ff00;

}

・・・・記事の周りに3pxの緑色の線を付けてみます

・・・右側の線が出ません？

パディング(padding)の外側にある枠の領域・・・

.entryの幅が400pxそれの外側に3pxの線---3px+400px+3px=406px

真ん中のカラム幅は400pxでその中に406pxは入りません

ので、右側がはみ出てしまっているので右の線が表示されません

.entry{
width:394px;

border:3px solid #00ff00;
}
---- 3px+394px+3px=400px で全部表示されるはずですが・・・・・？？右側が細い？？

CSSの中ほどにあります

.entry{
width:99%;
margin-bottom:20px;
}
.entry .date{
width:99%;
background-color:#98CB00;
padding:5px 0 2px 5px;
border-bottom:1px solid #006600;
border-right:1px solid #006600;
display:block;
color:#333333;
}

----この　width:99%;　が影響しています

対策としてこの width:99%; を削除するか

これはそのままにしておいて

.entry{
width:390px;

border:3px solid #00ff00;
}

と、余裕を持つようもっと小さくします

width:97%;

でもＯＫ・・・実際には見ながら数値を変更してください

※IEと他のブラウザーで違って見える場合があります

　　他のブラウザーではよくてもIEでは×の場合がありますので確認ください

うまく表示ができたら前回同様に記事に余裕をもたせます

.entry .title{/*タイトルの位置*/
padding:10px 10px 0;/*上に10px、左右に10px、下は0　の余裕*/
}
.entry span.theme,
.entry .contents{/*テーマ・記事の位置*/
padding:0 10px;/*上下は0、左右は10pxの余裕*/
}

線の幅、線種、線色　を自分の好みに変更して完成です