『ＣＳＳ コメント欄をなんとかしちゃおう 3』

名前の前後に　ワンポイントの画像をつけてみます

↓これが設定をしていない状態です

/* 名前の右にアイコン */
#comment_module .comment_author a {
padding-right : 20px;
background-image : url(画像のURL); /* ゲストのアイコン */
background-position : right center ;
background-repeat : no-repeat ;
}

padding-right : 20px;　で、名前の右に20pxのスキマを作ります（サンプル画像の横幅16px）

background-position : right center ;　右端に背景画像（アイコン）を配置することで

そのスキマにアイコンが表示されます

※画像の横幅以上のサイズをあけてください・・・

/* 名前の左にアイコン */

#comment_module .comment_author a {
padding-left : 20px;
background-image : url(画像のURL); /* ゲストのアイコン */
background-position : left center ;
background-repeat : no-repeat ;
}

padding-left : 20px;　で、名前の左に20pxのスキマを作ります

background-position : left center ;　左端に背景画像（アイコン）を配置することで

そのスキマにアイコンが表示されます

今度は全体を右に移動します

#comment_module .admin_comment .comment_author a {/* 管理人のアイコン */
padding-left : 160px;
background-image : url(画像のURL) ; /* アイコン画像のURL */
background-position : 140px center ;
background-repeat : no-repeat ;
}

padding-left : 160px;　で、名前の位置を160px右に移動します※見ながら調整してください

background-position : 140px center ;　で左から140pxの位置に背景画像を配置します

※160px-140px が画像の横幅以上になるようにしてください

※全体を右に移動させる方法は名前の文字数が固定されている管理人のコメントでしか使えません

　名前の長い方がコメントされますと表示が２行になり、中と下の間に隙間が出来てしまいます

　　・・・・　text-align:right;　を使えば　ゲストさもでも可能ではあるのですが

※アイコン画像と名前のずれが気になる場合は center ではなく　pxで上からの位置を指定して下さい

今回のサンプルは上、中、下の画像を全部同じ画像を使ってみました

↑これらの画像を使う場合は↓のＣＳＳを使ってください

/*ゲストコメント*/
#comment_module .each_comment{/*コメントタイトル部分*/
margin: 0;
padding-bottom:30px;/*コメントとコメントの間*/
background: url(画像のURL);/*画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:#333333;/*←ゲストコメント文字色変更の場合*/
}
#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:10px 30px 10px;/*コメント分の上と左右と下の余裕*/
background: url(画像のURL);/*画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .comment_footer{/*コメントフッター部分*/
margin:0;
padding: 10px 0 10px;
background: url(画像のURL);/*画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:10px 0 10px 30px;
}
.comment_footer span.comment_author{/*名前*/
padding-left:40px;
}
.comment_footer span.comment_date{/*日付*/
padding-left:20px;
}
#comment_module .comment_footer{/*フッター上の点線を消す*/
border-top:none;
}
.comment_gotoform{/*[コメント記入欄を表示]を消す*/
display:none;
}
#comment_module .comment_author a {/* ゲストのアイコン */
padding-right : 20px;
background-image : url(画像のURL);
background-position : right center ;
background-repeat : no-repeat ;
}

/*管理人コメント*/
#comment_module .admin_comment{/*コメントタイトル部分*/
margin: 0;
padding-bottom:30px;/*コメントとコメントの間・・ゲストと同じに*/
background: url(画像のURL);/*画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:#0000ff;/*←管理人コメント文字色変更の場合*/
}
#comment_module .admin_comment .comment_body{/*コメント文章部分*/
margin: 0;
padding:10px 30px 10px;/*・・ゲストと同じに・・*/
background: url(画像のURL);/*画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .admin_comment .comment_footer{/*コメントフッター部分*/
margin:0; padding: 10px 0 15px; /*・・ゲストと同じに・・*/
background: url(画像のURL);/*画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
.admin_comment .comment_footer span.comment_date{
padding-left:0;
}
#comment_module .admin_comment .comment_author a {/* 管理人のアイコン */
padding-left : 160px;
background-image : url(画像のURL);
background-position : 140px center ;
background-repeat : no-repeat ;
}