ピグ画像の表示 | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery

★ ピグ画像の表示


● 内容

① ピグ画像を表示します。(全身または顔部分)
② スマホのピグ着せ替え画像?の利用
③ 横幅が指定できます。(横と縦の比率は、1:1.666)
 264 または 104 のいずれかで後は、img タグ内で大きさを指定する
④ 向きが指定できます(右向き、左向き)
⑤ 影(shadow)の有無を指定できます。
⑥ 画像タイプが指定できます。(gif png)
⑦ 背景色が指定できます。
⑧ アクションを指定できます。
⑨ 顔のみの表示を指定できます。
⑩ 顔のみの場合は、フレームを指定できます(丸フレーム)

■ ピグを着せ替えしてからリアルタイムには変わらないので注意してください。



● 設置方法(以下、★はアメーバIDです

フリースペース、記事、メッセージボード、ルーム、フリープラグインなどに
設置できます。

① 標準設置

<img src="http://contents.pigg.ameba.jp/api/0/user/★/image">







② 横幅264px(画像大)のケース

<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=all&scale=264">







③ imgタグ内で横幅を指定のケース(width="140" で 140pxを指定)

<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=all&scale=264" width="140">








④ 向きの指定(&direction=FL または、&direction=FR)
  FL は left(左向き)。 FRは right(右向き)。


<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=all&scale=264&direction=FL" width="140">



<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=all&scale=264&direction=FR" width="140">




⑤ 影(shadow)の表示非表示を行います(指定なしの初期値は影有)
  影は足元の影です。下記は影なしの例。
  (&shadow=trueは影有。&shadow=falseは影なし)


<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=all&scale=264&direction=FR&shadow=false" width="140">






⑥ 画像タイプの指定( &type=gif または &type=png)
  png が初期値です。指定しない場合は、pngです。
  下記は gifの例

<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=all&scale=264&direction=FR&shadow=false&type=gif" width="140">







⑦ 背景色が指定できます。(指定がない場合は、白色)
  (&background=falseは透明 &background=trueは白色)
  gifにした場合は背景色は透明にならないので注意。
  下記は透明の例


<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=all&scale=264&direction=FR&shadow=false&background=false" width="140">







■ もし、背景色を赤くしたい(例)場合は下記の様にします。
  ( style="background-color:#ff0000" を指定します)



<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=all&scale=264&direction=FR&shadow=false&background=false" width="140" style="background-color:#ff0000">










⑧ アクションの指定

他にもあると思います。わかったら教えてください。


アクションのパラメータとアクション名


オプション アクション名
&action=glad うれしい
&action=sad 悲しい
&action=angry 怒り
&action=pose_hi ハイ!
&action=pose_please プリーズ(どうぞ)
&action=pose_smile スマイル
&action=pose_surprise びっくり!
&action=pose_joy うれしい
&action=pose_cry 泣く


● glad

<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=all&scale=264&direction=FR&shadow=false&background=false&action=glad" width="140">





● sad
<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=all&scale=264&direction=FR&shadow=false&background=false&action=sad" width="140">




● angry
<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=all&scale=264&direction=FR&shadow=false&background=false&action=angry" width="140">





● pose_hi

<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=all&scale=264&direction=FR&shadow=false&background=false&action=pose_hi" width="140">







● pose_please

<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=all&scale=264&direction=FR&shadow=false&background=false&action=pose_please" width="140">





● pose_smail
<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=all&scale=264&background=false&direction=FR&shadow=false&action=pose_smile" width="140">





● pose_surprise
<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=all&scale=264&background=false&direction=FR&shadow=false&action=pose_surprise" width="140">





● pose_joy


<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=all&scale=264&background=false&direction=FR&shadow=false&action=pose_joy" width="140">






● pose_cry


<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=all&scale=264&background=false&direction=FR&shadow=false&action=pose_cry" width="140">












⑨ 顔のみの指定(?part=face&scale=104 の指定)



<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=face&scale=104&background=true&direction=FR&shadow=false" width="100">







⑩ 丸フレームをつける(?part=face&scale=104&frame=true)


<img src="http://contents.pigg.ameba.jp/api/0/user/★/image?part=face&scale=104&frame=true&background=true&direction=FR&shadow=false" width="100">










● 注意


① image の後のオプションは 最初のオプション(パラメータ)のみ ? でつなげます
  それ以降は、&でつなげます。





● 追記(備考)

① 下記の3種類が使えるようです(URL先頭部分を注目)


<img src="http://contents.pigg.ameba.jp/api/0/user/★/image">
<img src="http://origin.contents.pigg.ameba.jp/api/84/user/★/image">
<img src="http://contents.pigg.ameba.jp/api/user/★/image">