オリジナルスキンCSSの編集 コメント欄4 | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

オリジナルスキンCSSの編集 コメント欄4

次ができていませんので・・・・

つなぎにもう一回・・・・?


青のリクを頂いておりまして・・・ 青といえば 空、 空といえば・・・・


で、雲・・・・・・・




横幅は400pxです











一番下の画像の虹とロケットでその上のでこぼこ雲の接続部分をごまかしています・・・

どんな感じでしょうか?



上の3つの画像をダウンロードしてから自分のブログの画像フォルダーにアップしてCSSに入力したら

CSSの一番最後にコピペしてください

#comment_module .each_comment{/*コメント背景画像上*/
margin: 0;
padding:0 0 10px 0;
background: url(画像のURL );
background-repeat : no-repeat;
}
#comment_module .comment_body{/*コメント背景画像中*/
text-align: center;/*コメント中央寄せ*/

color : #666666;/* コメント文字色 */
margin: 0;
padding:10px 15px;/*コメント分の左右の余裕*/
background: url(画像のURL);
background-repeat : repeat-y;
}
#comment_module .comment_footer{/*コメント背景画像下*/
margin:0;
padding:10px 0 0 30px;/*タイトルの位置*/
height:60px;/*画像の高さ*/
background: url(画像のURL);
background-repeat : no-repeat;
}
#comment_module .label{/*コメントタイトル*/

color : #666666;/* コメントタイトル文字色 */
font-weight: bold;
font-size:12px;
padding:20px 0 0 50px;/*タイトルの位置*/
}
.comment_footer span.comment_author{/*名前を右に*/
padding-left:60px;
}
#comment_module .comment_footer{/* [コメント記入欄を表示]を消す */
border-top:none;
}



コメントタイトルを中央寄せにする場合は

#comment_module .label{/*コメントタイトル*/
text-align: center;/*コメントタイトル中央寄せ*/
color : #666666;/* コメントタイトル文字色 */
font-weight: bold;
font-size:12px;
padding-top:20px;/*タイトルの上からの位置*/
}


コメント中央寄せをしない場合は

#comment_module .comment_body{/*コメント背景画像中*/
text-align: center;/*コメント中央寄せ*/ ←この行を削除してください




オリジナルスキンCSSの編集 コメント欄

オリジナルスキンCSSの編集 コメント欄2

素材 コメント欄 背景画像

オリジナルスキンCSSの編集 コメント欄3


6月の記事に続きます

CSS コメント欄をなんとかしちゃおう

CSS コメント欄をなんとかしちゃおう 2

CSS コメント欄をなんとかしちゃおう 3

CSS コメント欄をなんとかしちゃおう 4

CSS コメント欄をなんとかしちゃおう 5

CSS コメント欄をなんとかしちゃおう 6

CSS コメント欄をなんとかしちゃおう 7

CSS コメント欄をなんとかしちゃおう 8

CSS コメント欄をなんとかしちゃおう 9

CSS コメント欄をなんとかしちゃおう 10

CSS コメント欄をなんとかしちゃおう 11

CSS コメント欄をなんとかしちゃおう 12

コメント欄をなんとかしちゃおう 12上の画像だけ~

コメント欄をなんとかしちゃおう 12下の画像だけ~

コメント欄をなんとかしちゃおう 素材

CSS コメント欄をなんとかしちゃおう 13

CSS コメント欄をなんとかしちゃおう 13のつづき~

コメント欄をなんとかしちゃおう 応用1

CSS コメント欄をなんとかしちゃおう 14

CSS コメント欄をなんとかしちゃおう 14のつづき~

CSS コメント欄をなんとかしちゃおう 15

CSS コメント欄をなんとかしちゃおう 15のつづき~

コメント欄をなんとかしちゃおう 応用2