【CSS】コメント欄に画像を載せる（備忘録）

※備忘録

アメーバブログコメント欄にプロフィール画像を載せる方法。

以前はミートくんのブログで紹介していたが、最近は動作しなくなっていた。

以前の方法をまとめる。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

１）フリープラグインに以下の文を追加。保存。

<script type="text/javascript" src="http://navi-map.info/com_thumb/2/comment_thumbnail_imgbg.js"></script>

※注意　現在は動作しません。

２）CSSに以下の文を追加。保存。

#comment_module {
position:relative;
}

.prfphoto{
float:left;
margin-top:10px;/*写真の縦位置を調整*/
left:10px;/*写真の横位置を調整*/
width:85px;
position:absolute;
overflow:hidden;
margin-right:5px;
margin-bottom:5px;
border:dotted 2px #ddd;
background:#FFFFFF;
}

#comment_module .admin_comment .prfphoto{
float:left;
margin-top:10px;/*管理者コメントの写真の縦位置を調整*/
left:10px;/*管理者コメントの写真の横位置を調整*/
width:85px;
position:absolute;
overflow:hidden;
margin-right:5px;
margin-bottom:5px;
border:dotted 2px #ddd;
background:#FFFFFF;
}

.prfphoto img{
margin:21px;
}

#comment_module .comment_body{
padding-left:100px;/*コメント本文の位置(数字を増やすと右に寄ります)*/
padding-right:0px;/*コメント本文が右にはみ出る場合は数値を上げてください*/
}

#comment_module .admin_comment .comment_body{
padding-left:100px;/*管理者コメント本文の位置(数字を増やすと右に寄ります)*/
padding-right:0px;/*管理者コメント本文が右にはみ出る場合は数値を上げてください*/
}

#comment_module .label{
padding-left:100px;/*コメントタイトルの位置(数字を増やすと右に寄ります)*/
padding-right:20px;/*コメントタイトルが右にはみ出る場合は数値を上げてください*/
}

#comment_module .admin_comment .label{
padding-left:100px;/*管理者コメントタイトルの位置(数字を増やすと右に寄ります)*/
padding-right:20px;/*管理者コメントタイトルが右にはみ出る場合は数値を上げてください*/
}

#comment_module .comment_footer{
clear:left;
}

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

コメント欄、プロフィール画像の横に、投稿したコメントが表示される。