アメブロのコメント欄に自動でプロフ画を表示させる方法

現在はこちらのscriptを使用させていただいています。
コメント欄にプロフィール画像を表示させたい方は
びんごぼんごさんのブログ【blog lab】へどうぞ。
【新スキン対応】コメント欄にプロフ画像を乗せるプラグイン｜blog lab 【アメブロカスタマイズとネタ話】

※追記　画像サイズの調整が出来るＣＳＳの記述を書きました。
※今後の報告やバージョンアップ・要望の受付は下記のURLで行います。

※下記リンクにもっと綺麗にデザインする為のCSS書いていますが、あまり下記のページを見てない方が居られるので目立つようにこの部分を書いています。
■コメントプロフ画表示scriptをバージョンアップ報告板


Disqusがアメブロで使用すると極端に重くなるので、アメブロのコメント欄に、自動で相手のプロフィール画像を表示させるscriptを書きました、ご自由に使ってやってください。

本当はこういう需要があるシステムは、アメブロ運営側が実装するべきなんですが、ソーシャルブックマークのボタンを実装するのも遅かったし、実装してくれるように願いも込めて、アメブロさんのサーバーを利用して配布します。


これ作るのに凄く参考になったのが
zzさんのコメントにプロフィール画挿入　簡易版です。
■blogzz

zzさんが居なかったら、出来なかったです(´；ω；｀)ﾌﾞﾜｯ感謝！

一番悩んだのが配布方法ですが、アメブロで一番有名なアメブロ向上企画書さんがやっていた配布方法で配布する事にしました。

動作サンプル

利用に当たって

・このscriptはご自由に使ってＯＫです。
・当ページへのリンクも不要です。
・アメブロの仕様変更により使えなくなる可能性もあります。
・今後改良を加えて、アニメーション機能とかエフェクトを付けるかもしれません。

仕様
・ルーム(プロフィール)から画像を拾ってきています。
・コメント数が多かったらちょっと重くなります。
・画像設定していない人はnoimageの画像が表示されます。


コメントプロフ画表示script
©2011 AMEBLO CUSTOM All rights reserved.
上記のクレジットの表記が邪魔だと言う方は、下記の記述で消してもいいです。

#ameblogers{display:none; !important}

動作確認済みのブラウザ
・ＩＥ8
・Google Chrome
・Fire fox
・Safari

設置方法

1、下記のscriptをコピーして、フリープラグインの最上部に貼り付けてください。

<script type="text/javascript" src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1.4.4");</script>

2、次にフリープラグインの一番最後に下記のscriptを貼り付ける。

<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/87/48/10010269430.css" defer="defer"></script>

3、次にＣＳＳでデザインを調整します。
これはzzさんのblogzzで使っているＣＳＳを、流用させて貰いました。

.comment_body .propho{
height:100px;
width:100px;
float:right;
margin:10px;
}
#comment_module .comment_body {
overflow:hidden;
}

#comment_module{
border:2px solid #000;
padding:15px;
}

すいません、挿入しているdivのクラス名が間違っていました。
正しいのは下記です。

※画像サイズを調整できるＣＳＳを書き直しました。

.comment_body .proimg{
/* 画像の表示位置rightで右 leftで左*/
float:left;
/*周りの余白*/
margin:10px;
}
#comment_module .comment_body {
overflow:hidden;
}

#comment_module{
border:2px solid #000;
padding:15px;
}
/*画像サイズの調整*/
div.proimg img{
width:61px !important;
height:61px !important;
}

これで設置は完了です。
もし動作しない場合は、2番目に貼り付けたscriptの場所を変えてみてください、他にも相性の悪いブログパーツを貼っていると動作しません。

あとがき

製作時の名言
【どこがSyntaxErrorじゃーー(#・∀・)ﾑｶｯ!!】

良ければ記事で紹介してくれたり、ブックマークしてくれると中の人が喜びます。