オリジナルスキンCSSの編集 コメント欄
ココのサイトもコメントの表示部分を飾ってみました・・・・
興味がある方は記事のURLをクリックしてみてください
見本サイト 下の画像からチョットカスタマイズしています
まずは画像を用意します
横の幅だけ注意すれば縦はとりあえず気にしなくてかまいません
この画像を３つにスライスします
each_comment 395×40
※コメントの上からコメント本文までカバーするように少し大きめで
comment_body 395×35
※ココの縦は3px～40px程度でrepeat-yで繰り返しますのであまり気にしません
comment_footer 395×27
ＣＳＳの最後にコピペしてください
#comment_module .each_comment{/*コメント背景画像上*/
margin: 0;
padding:0 0 10px 0;
background: url(画像のURL) ;
background-repeat : no-repeat;
}
#comment_module .comment_body{/*コメント背景画像中*/
margin: 0;
padding:0 15px;/*コメント分の左右の余裕*/
background: url(画像のURL) ;
background-repeat : repeat-y;
}
#comment_module .comment_footer{/*コメント背景画像下*/
margin:0;
padding-top: 28px;/*画像の高さが目安*/
background: url(画像のURL) ;
background-repeat : no-repeat;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:10px 0 10px 10px;/*タイトルの位置*/
}
.comment_footer span.comment_author{/*吹出し部分に合わせるため名前を右に*/
padding-left:30px;
}
.comment_footer span.comment_date{/*名前と日付の間隔*/
padding-left:20px;
}
#comment_module .comment_footer{/*点線消す*/
border-top:none;
}
コメント1つ1つに「コメント記入欄を表示」は必要ありませんので表示しない場合は加えてください
.comment_gotoform{
display:none;
}
↑上の緑の画像を含めて私が作った画像ですから自由にダウンロードして使ってください
横幅は395pxで３カラムでしたらそのまま使える場合があります
※画像の上で右クリック、名前をつけて画像を保存 (WINの場合)、
保存した画像をブログの画像フォルダーにアップしてから使ってください
※再配布はやめてくださいな
※この画像でよければ横サイズの変更、この色でなんてリク受けますよ（先着何人か・・）
ＣＳＳが使えないスキンの場合は
こちらをフリープラグインに貼ってみてください
<style type="text/css">
<!--
#comment_module .each_comment{/*コメント背景画像上*/
margin: 0;
padding:0 0 10px 0;
background: url(画像のURL) ;
background-repeat : no-repeat;
}
#comment_module .comment_body{/*コメント背景画像中*/
margin: 0;
padding:0 15px;/*コメント分の左右の余裕*/
background: url(画像のURL) ;
background-repeat : repeat-y;
}
#comment_module .comment_footer{/*コメント背景画像下*/
margin:0;
padding-top: 28px;/*画像の高さが目安*/
background: url(画像のURL) ;
background-repeat : no-repeat;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:10px 0 10px 10px;/*タイトルの位置*/
}
.comment_footer span.comment_author{/*吹出し部分に合わせるため名前を右に*/
padding-left:30px;
}
.comment_footer span.comment_date{/*名前と日付の間隔*/
padding-left:20px;
}
#comment_module .comment_footer{/*点線消す*/
border-top:none;
}
-->
</style>
横幅520pxと450pxのコメント欄背景画像はこちらにあります
リクエストです・・・ 線が細いのでグレーっぽくなっちゃいました
each_comment 396×40
comment_body 396×35
comment_footer 396×30
ゲストさまと自分のコメントを分けるためには
新・自分のコメントを "もっと"わかりやすく を、フリープラグインに設置する必要があります