javascriptのみでコメント欄にプロフ画像を表示する

photo by buyalex

今回は、フリープラグインにjavascriptのコードを数行追加するだけでコメント欄にプロフィール画像を載せる方法を考えてみたので、早速ご紹介します。

【追記】
この記事の方法より、こちらの方法の方が軽くて優れています

まず、以下のコードをフリープラグインにコピペしてください。
外部javascriptなどは必要ありません。

<script type="text/javascript">
eval(function(p,a,c,k,e,d){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(4($,w){$(4(){$(".m").o(4(){u($(1).7(".g").6(0).8()\'+$(1).9());$.A({D:"b://E.f/H-G/",F:R,B:"C",O:4(9){}})})})})(K,N);',54,54,'|this|||function||eq|find|height|html||http|String|iframe|px|jp|comment_body|sutebulo|href|attr|id|comment_author|each_comment|ameba|each|scrolling|frameborder|css|no|width|if|src||split|profile|absolute|ajax|dataType|text|url|ameblo|cache|lab|blog|80|left|jQuery|position|style|70|success|25px|top|false'.split('|'),0,{}));
</script>

一番下の行の「style」の隣にある70という数字はプロフ画像の幅です。
お好きなサイズでどうぞ。

次にCSSを追加します。
これはフリープラグインにコピペでもいいですし、デザインの変更→CSSの編集、でもいいです(その場合は最初と最後の<style></style>は消してください)。

<style>
#comment_module .comment_body{
margin-left:80px;
}

#comment_module .each_comment{
position:relative;
}
</style>

80pxの部分は画像がおさまるスペースになりますので、適当に調整してみてください。

こんだけでできちゃいますので、気になる方はレッツトライ！
※(IEへの対応は未確認ですｗ)

記事の話題関連のツイート on twitter