【※追記あり2】コメント欄にプロフ画像を乗せるプラグイン【アップデート】

タイトルのとおりアップデートしました。
今まではコメントした方の名前を画像にすり替えていましたが、コメント本文の左側に画像を表示するスタイルも使えるようになりました。

【追記】コメントした方の名前も表示しつつ『comment left by』などの注釈も付けるスタイルを追加しました。オプションでbingobongoAppSwitch.commentDispStyle = 'c'と指定すれば選択できます。

画像の取得方法は以前通り主にローカルストレージorビヘイビアを使用しますので、ajaxしないぶんアメブロサーバーに配慮した設計になっています。

●使い方

使い方は前回と同じですがおさらいしてみましょう。
まず、jQueryを導入していない方は導入します。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript">
(function($){
  var JQ17 = $;
  JQ17(function(){window.$=window.jQuery=JQ17;});
}(jQuery));
</script>

次にオプションを選びます。

<script type="text/javascript">
/*必須*/
var bingobongoAppSwitch = {};

/*'a'にすると今までどおりです*/
/*省略した場合'a'と同じになります*/
bingobongoAppSwitch.commentDispStyle = 'b';

/*trueで読者一覧の上に読者のプロフ画像を6人ランダムに表示します(新スキン専用)*/
/*読者のプロフ画像を表示しない場合は省略してください*/
bingobongoAppSwitch.readersImage = true;
</script>

次にプラグインをインポートします。

<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/e7/bb/10025433980.css"></script>

これでOKです。

まとめると、フリープラグインはこんな感じになります。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript">
(function($){
  var JQ17 = $;
  JQ17(function(){window.$=window.jQuery=JQ17;});
}(jQuery));

/*以下オプション*/
var bingobongoAppSwitch = {};
bingobongoAppSwitch.commentDispStyle = 'b';
bingobongoAppSwitch.readersImage = true;
</script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/e7/bb/10025433980.css"></script>

●読者プロフ画像表示オプション用CSS

当ブログのように読者一覧の上に読者のプロフ画像を表示したい場合、以下のCSSをユーザーCSSの最後に加えてください。

#followers{
position:relative;
width:271px;
margin-left:-12px;
margin-top:-10px;
padding:10px 0 5px 10px;
border:dotted 2px #c4c4c4;
background-color:#e4e4e4;
}

#followers a{
margin-right:4px;
display:none;
}

#followers a.readerPhoto{
display:inline;
}

コメントの表示方法などご提案ありましたらいつでもメッセージください！

※追記その２

左カラムにフリープラグインを設置している場合、表示されないことがあると思います。
その場合、『<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/e7/bb/10025433980.css"></script>』の部分を以下のように書き換えてください。

<script type="text/javascript">
(function($){
  $(function(){
    $.getScript('http://usrcss.ameblo.jp/skin/templates/e7/bb/10025433980.css');
  });
}(jQuery));
</script>