コメントしたユーザー名の前にアイコン

時々ネットサーフィンしていると、
人のブログで、コメント表示の部分の、
コメントをくれた方のニックネームの前に、
可愛いらしいアイコンが置いてあったりして（*´・ω-）ｂ

これ欲しい～と思っても、どうすればいいかわからず、
ずっと人のブログをうらやまし～と涎ものでした(^^ゞ

今日は英語tip集から見つけて、設置してみました。
私の拙い英語で、何とか意味を推測しながら、
苦労したぜいぜい(;^_^A

手順としては：

① 設置したいアイコンを探して来て、ダウンロードする。
   例えばこう言うサイトとかから探す：
   tango!
   FreeIconWeb.com
   Wikimedia Commons
   QBullet Legend
   FAMFAMFAM
   ICONFINDER
   Mini Icons

② 投稿する状態でそのアイコンをbloggerにアップロードする。

③ アップロードした画像のコードを書き出し、
   img src=”この部分”はURLとしてメモしておく。
   メモと言っても、txtなどにコピーすれば楽。

④ bloggerレイアウトの中のＨＴＭＬ編集をクリックする。

⑤ 表示されたテンプレートのCSSから、
   .comment-author { 部分を探し出す。
   テンプレートによって、多少違いがありますので要注意。
   当ブログの使っているテンプレートは、
   #comments-block .comment-author {
   ややこしい～だっちゅうのー(;^_^A

⑥ Padding-left: アイコン幅＋余白分px; に変更する。
   Padding-leftの指定がなければ追加、20px前後かな。

⑦ 一番下、CSSコードの } の前に下記を追加する。
   background: url(③で書出したimgのURL) no-repeat;

これで完成！出来上がりはこれ！



実際に当ブログのコメント表示がそうなっている(^_-)-☆

そうそう、ついでにコメントを書き込んでくれた方の名前を、
目立たせるなら、更にfont-size とfont-weightも、
追加指定できる★(‘-^v)