● 内容
① コメント欄の投稿者名の上にリアルピグ画像を表示します。
② 画像に投稿者のブログへのリンクまたはプロフィールへのリンクが可能。
リンクをしないことも可能。
③ アクションのランダム表示が可能。
④ ロールオーバーが可能。（画像にカーソルを当てると画像が変化）
⑤ アクションがランダムでない場合は、アクションを指定可能。
⑥ 足元の影の有無を選択可能。
⑦ 顔の向きの指定が可能。（右または左）
⑧ 顔のみ指定が可能。（顔のみまたは全身表示）
⑨ 顔のみの場合はフレーム（丸型）を指定可能。
⑩ 画質の指定が可能。（標準、中画質、高画質）
⑪ 画像の幅の指定が可能。
● やり方。
① 下記をフリープラグインへ追加する。(下記の引数（パラメータ)は私のコメントの例)
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript">
$(document).ready(function(){
comment_Real_pigg(100,0,1,0,0,"R",0,1,1,5);
});
</script>
■ 説明
（１）． 下記はフリープラグインに既にあれば不要です。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
（２）．引数（赤字部分の引数の説明)
・ comment_Real_pigg(100,0,1,0,0,"R",0,1,1,5);
画像の横幅を指定します。(単位px)
・ comment_Real_pigg(100,0,1,0,0,"R",0,1,1,5);
画像をランダムに表示するかどうかを指定します。
0・・・固定 1・・・ランダム
・ comment_Real_pigg(100,0,1,0,0,"R",0,1,1,5);
固定の場合アクションを番号で指定します。
0・・・標準
1・・・喜ぶ(glad）
2・・・悲しい(sad)
3・・・怒り(angry)
4・・・ハーイ(pose_hi)
5・・・どうぞ(pose_please)
6・・・スマイル(pose_smail)
7・・・驚き(pose_surprise)
・ comment_Real_pigg(100,0,1,0,0,"R",0,1,1,5);
画質を指定します。(カッコ内は画像の元の横幅)
0・・・標準(120px)
1・・・中画質(180px)
2・・・高画質(264px)
・ comment_Real_pigg(100,0,1,0,0,"R",0,1,1,5);
足元の影の有無を指定します。
0・・・足元影なし
1・・・足元影有り
・ comment_Real_pigg(100,0,1,0,0,"R",0,1,1,5);
顔の向きを指定います。
R・・・右向き
L・・・左向き
・ comment_Real_pigg(100,0,1,0,0,"R",0,1,1,5);
顔のみ表示の指定をします。
0・・・無効 (全身表示)
1・・・フレームなし(顔のみ表示)
2・・・フレーム有り(顔のみ表示)
・ comment_Real_pigg(100,0,1,0,0,"R",0,1,1,5);
画像を投稿者のブログ、プロフィールにリンクするかを指定します。
0・・・リンクしない
1・・・ブログにリンク
2・・・プロフィールにリンク
・ comment_Real_pigg(100,0,1,0,0,"R",0,1,1,5);
ロールオーバーするかどうかを指定します。（画像にカーソルを当てると画像が変化）
0・・・ロールオーバーしない
1・・・ロールオーバーする
・ comment_Real_pigg(100,0,1,0,0,"R",0,1,1,5);
ロールオーバーの画像を指定します。
ランダムの時は、このロールオーバー画像もランダム表示されます。
固定の場合アクションを番号で指定します。
0・・・標準
1・・・喜ぶ(glad）
2・・・悲しい(sad)
3・・・怒り(angry)
4・・・ハーイ(pose_hi)
5・・・どうぞ(pose_please)
6・・・スマイル(pose_smail)
7・・・驚き(pose_surprise)
② ＣＳＳへ下記を追加する。（画像をクリックしたときに点線を表示しない)
不要の場合はこのＣＳＳは不要です。
/* コメントのリアルピグ画像をクリックしたときに点線を表示しない */
.pigg_pic a{
overflow:hidden;
outline:none;
}
● ソースコード
// ●コメントにリアルピグ画像
function comment_Real_pigg(pigg_w,action_rand,action_NO,image_quality,shadow_ON,face_direction,face_only,image_link,hover_ON,hover_image_NO){
var action_Array = new Array("default","glad","sad","angry","pose_hi","pose_please","pose_smail","pose_surprise");
var no_image = 'http://stat.profile.ameba.jp/profile_images/common/default.gif';
var pig_image = 'http://contents.pigg.ameba.jp/api/0/user/';
$(".blogComment").each(function(){
if($("a.commentAuthor",this).length==0){// アメブロ会員以外からのコメント（ＵＲＬなし）
$(".commentBody",this).append('<div class="pigg_pic no_image"><img src="'+no_image+'" width="'+pigg_w+'"></div>');// イメージなし画像の設定
}else{
var comment_href=$("a.commentAuthor",this).attr("href");// コメント投稿者のリンクを求める
if(comment_href.indexOf("http://ameblo.jp/",0)!=0){// アメブロ会員以外からのコメント（ＵＲＬあり）
$(".commentBody",this).append('<div class="pigg_pic no_image"><img src="'+no_image+'" width="'+pigg_w+'"></div>');// イメージなし画像の設定
}else{
var Author_ID=comment_href.substring(17,comment_href.length-1); // アメーバＩＤ
// ----------- アクション -----------
var Action,Action2,rnd_x;
if(action_rand==1){
rnd_x = Math.floor(Math.random()*action_Array.length);
Action= "&action="+action_Array[rnd_x];
}else{
Action= "&action="+action_Array[action_NO];
}
if(hover_ON==1){
if(action_rand==1){
rnd_x = Math.floor(Math.random()*action_Array.length);
Action2= "&action="+action_Array[rnd_x];
}else{
Action2= "&action="+action_Array[hover_image_NO];
}
}
// ----------- 画質 -----------
var scale="";
if(image_quality==1){scale="&scale=180";}
if(image_quality==2){scale="&scale=264";}
if(face_only==1 || face_only==2){scale="";}
// ----------- 影 -----------
var shadow="";
if(shadow_ON==0){shadow="&shadow=false";}
// ----------- 顔の向き -----------
var direction="&direction=FL";
if(face_direction=="R"){direction="&direction=FR";}
// ----------- フレーム -----------
var frame="";
if(face_only==0){frame="?part=all";}
if(face_only==1){frame="?part=face&scale=104&frame=false";}
if(face_only==2){frame="?part=face&scale=104&frame=true";}
// ----------- IMG URL -----------
var image_URL,image_URL2;
image_URL = pig_image+Author_ID+'/image'+frame+direction+shadow+scale+Action;
if(hover_ON==1){
image_URL2 = pig_image+Author_ID+'/image'+frame+direction+shadow+scale+Action2;
}
// ----------- IMG HTML -----------
var image_html;
if(hover_ON==1){
image_html = '<img src="'+image_URL+'" width="'+pigg_w+'" onmouseover="this.src=\''+image_URL2+'\'" onmouseout="this.src=\''+image_URL+'\'">';
}else{
image_html = '<img src="'+image_URL+'" width="'+pigg_w+'">';
}
// ----------- LINK and HTML APPEND -----------
if(image_link==0){
$(".commentBody",this).append('<div class="pigg_pic">'+image_html+'</div>');
}else{
if(image_link==1){
$(".commentBody",this).append('<div class="pigg_pic"><a href="'+'http://ameblo.jp/'+Author_ID+'/" target="_blank">'+image_html+'</a></div>');
}else{
$(".commentBody",this).append('<div class="pigg_pic"><a href="'+'http://profile.ameba.jp/'+Author_ID+'/" target="_blank">'+image_html+'</a></div>');
}
}
}
}
});
}