★ コメントの題名の左にアイコン画像を設置
◆ ロールオーバーさせたくない場合は、画像のURLを同じに
すればOKです
◆ 使用したアイコン例(横24px 縦24px)
![](https://stat001.ameba.jp/user_images/20110821/03/new-blue-777/65/2f/g/o0024002411431304309.gif?caw=800)
![](https://stat001.ameba.jp/user_images/20110821/03/new-blue-777/3e/de/g/o0024002411431304306.gif?caw=800)
![](https://stat001.ameba.jp/user_images/20110821/03/new-blue-777/2b/5f/g/o0024002411431304308.gif?caw=800)
![](https://stat001.ameba.jp/user_images/20110821/03/new-blue-777/53/d7/g/o0024002411431304307.gif?caw=800)
/* ------------------------------------------------------- */
/* コメントの題名にアイコン(全て) */
/* ------------------------------------------------------- */
.blogComment .commentHeader{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:left center;
padding-left:30px;/* 左に余白 */
padding-top:10px;/* 上に余白 */
}
/* ------------------------------------------------------- */
/* コメントの題名にアイコン(全て) ロールオーバー */
/* ------------------------------------------------------- */
.blogComment .commentHeader:hover{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:left center;
padding-left:30px;/* 左に余白 */
padding-top:10px;/* 上に余白 */
}
/* ------------------------------------------------------- */
/* コメントの題名にアイコン(自分) */
/* ------------------------------------------------------- */
.ownerComment .commentHeader{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:left center;
padding-left:30px;/* 左に余白 */
padding-top:10px;/* 上に余白 */
}
/* ------------------------------------------------------- */
/* コメントの題名にアイコン(自分) ロールオーバー */
/* ------------------------------------------------------- */
.ownerComment .commentHeader:hover{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:left center;
padding-left:30px;/* 左に余白 */
padding-top:10px;/* 上に余白 */
}
/* コメントの題名にアイコン(全て) */
/* ------------------------------------------------------- */
.blogComment .commentHeader{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:left center;
padding-left:30px;/* 左に余白 */
padding-top:10px;/* 上に余白 */
}
/* ------------------------------------------------------- */
/* コメントの題名にアイコン(全て) ロールオーバー */
/* ------------------------------------------------------- */
.blogComment .commentHeader:hover{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:left center;
padding-left:30px;/* 左に余白 */
padding-top:10px;/* 上に余白 */
}
/* ------------------------------------------------------- */
/* コメントの題名にアイコン(自分) */
/* ------------------------------------------------------- */
.ownerComment .commentHeader{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:left center;
padding-left:30px;/* 左に余白 */
padding-top:10px;/* 上に余白 */
}
/* ------------------------------------------------------- */
/* コメントの題名にアイコン(自分) ロールオーバー */
/* ------------------------------------------------------- */
.ownerComment .commentHeader:hover{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:left center;
padding-left:30px;/* 左に余白 */
padding-top:10px;/* 上に余白 */
}
★ 参考:題名の文字色
/* ------------------------------------------------------- */
/* コメントエリアの題名の調整 */
/* ------------------------------------------------------- */
.blogComment .commentHeader{
color:orange;/* 文字の色 */
font-size:14px;/* 文字の大きさ */
font-weight:normal;/* bold→太い文字 normal→普通 */
font-family:"HGP創英角ポップ体";/* 文字の種類 */
}
.blogComment .commentHeader:hover{/* カーソルを乗せたとき */
color:#ff0000;/* 文字の色 */
}
.ownerComment .commentHeader{/* 自分のコメントの題名 */
color:#00ff00;/* 文字の色 */
}
.ownerComment .commentHeader:hover{/* カーソルを乗せたとき(自分のコメント) */
color:#0000ff;/* 文字の色 */
}
/* コメントエリアの題名の調整 */
/* ------------------------------------------------------- */
.blogComment .commentHeader{
color:orange;/* 文字の色 */
font-size:14px;/* 文字の大きさ */
font-weight:normal;/* bold→太い文字 normal→普通 */
font-family:"HGP創英角ポップ体";/* 文字の種類 */
}
.blogComment .commentHeader:hover{/* カーソルを乗せたとき */
color:#ff0000;/* 文字の色 */
}
.ownerComment .commentHeader{/* 自分のコメントの題名 */
color:#00ff00;/* 文字の色 */
}
.ownerComment .commentHeader:hover{/* カーソルを乗せたとき(自分のコメント) */
color:#0000ff;/* 文字の色 */
}