※現在Yahoo APIさんのほうでスクリプトを止められています。明日には復活しますのでお待ちください。※代わりに、旧バージョンを以下の様に提供させていただいております。以下のコードをフリープラグインにコピペしてください。<script>(function($){$.getScript("http://goo.gl/deKiu");})(jQuery);</script>
はじめに
さて、もう既に至る所で公開されていると思いますが、
コメント欄にコメントした人のプロフ写真を表示させるプラグイン「cmtpic」をアップいたします。
【修正】
2011.07.12 1.0.0=>1.0.1 :一部ユーザーで写真が出ない不具合を修正
基本的な使い方
以下のコードをフリープラグインにコピペしてください。
<script src="http://goo.gl/deKiu" type="text/javascript"></script><script type="text/javascript">$(function(){$('div.each_comment').cmtpic({});});</script>
※フリープラグインの使い方(動画)
特徴
・そのままの状態で、ブログオーナーさんのコメントフッターは右側に、他のユーザーさんのコメントは左側に表示されます。
=>オプションで削除可能
・ブログオーナーさんのコメントフッターが右側に来ると、フッターの「コメント日付、名前、写真」などの順番も、左右対称になるように配置されます。
=>オプションで削除可能
・画像の内側に、ちっちゃな装飾が施されます。(IE8以下未対応)
=>オプションで削除可能
・画像のサイズは、写真の高さが50pxになるようになっています。
=>オプションで変更可能
オプション
<script type="text/javascript">$(function(){$('div.each_comment').cmtpic({ここの部分});});</script>
を変更することで設定を変更することが出来ます。
(1)写真の大きさを変更したい時(例:縦50px=>縦80px)
<script type="text/javascript">
$(function(){$('div.each_comment').cmtpic({
height:80
});});
</script>
(2)ブログオーナーさんのコメントフッターを左寄せにする時
<script type="text/javascript">
$(function(){$('div.each_comment').cmtpic({
ownerRight:false
});});
</script>
(3)写真の内側の白い枠の装飾をやめるとき
<script type="text/javascript">
$(function(){$('div.each_comment').cmtpic({
fancys:true
});});
</script>
(4)写真を囲むタグを自分で決めたい時(例:写真をdiv.testで囲むとき)
<script type="text/javascript">
$(function(){$('div.each_comment').cmtpic({
picContainertag:'div.test'
});});
</script>
(5)ブログオーナーさんのコメントタイトル、コメント本文下の点線の色を変えたい時
<script type="text/javascript">
$(function(){$('div.each_comment').cmtpic({
ownerColor:'「#」付きのカラーコード '
});});
</script>
※カラーコードはこちらから
カラーコード表 http://www.wanichan.com/web/resources/color.html
(6)他のユーザーさんのコメントタイトル、コメント本文下の点線の色を変えたい時
<script type="text/javascript">
$(function(){$('div.each_comment').cmtpic({
authorColor:'「#」付きのカラーコード '
});});
</script>
※カラーコードはこちらから
カラーコード表 http://www.wanichan.com/web/resources/color.html
【注意】
上記オプションを複数設定したい場合は、各オプションのあとに「,」をつけて併記します。
例:(1)と(2)を適用したい時
<script type="text/javascript">
$(function(){$('div.each_comment').cmtpic({
height:80, //<=ここの文末には「,」を付ける
ownerRight:false //<=最後のオプションの文末には「,」を付けない
});});
</script>
その他
コードを見たい方は、http://goo.gl/iVtXeで見ることが出来ます。