アメブロカスタマイズ『来てね』ボタンをつける

ピグから設定できる『お庭にきてね』や『お部屋に行く』のボタン。
現在、用意されているのは『ピグ』と『ピグライフ』のみです。

しかも、どちらか1つしか表示できません。
今回は、『ピグアイランド』や『ピグカフェ』も含めて複数表示させるカスタマイズです。

いつもはCSS編集可能なデザインのみの対応ですが、『来てね』ボタンはフリースペースを利用しますので、どんなデザインでも大丈夫です。

まずは、完成品。↓

今回、使用したのは下記の画像です。

あれ？これだとピグがいないよ？と思っちゃいますね。
これにピグの画像を重ねて表示させています。

まずは、表示させたい画像をアップして、下記の『http://画像のURL』の部分にアップした画像のURLを記載します。
あとは『自分のID』と書かれた部分に自分のIDを記載してください。

<!–ライフ用–>
<div style=”position: fixed; top: 30px; left: 0px; z-index: 100; “><a href=”http://life.pigg.ameba.jp/user/自分のID” target=_blank”><img src=”http://画像のURL“></a></div><div style=”position: fixed; top: 105px; left: 0px; z-index: 100; “><a href=”http://life.pigg.ameba.jp/user/自分のID” target=_blank”><img src=”http://present-shop.ameba.jp/shop/original/pigg/user/image?amebaId=自分のID” width=”60″></a></div>

<!–ピグ用–>
<div style=”position: fixed; top: 190px; left: 0px; z-index: 100; “><a href=”http://pigg.ameba.jp/?targetAmebaId=自分のID” target=_blank”><img src=”http://画像のURL“></a></div><div style=”position: fixed; top: 265px; left: 0px; z-index: 100; “><a href=”http://pigg.ameba.jp/?targetAmebaId=自分のID” target=_blank”><img src=”http://present-shop.ameba.jp/shop/original/pigg/user/image?amebaId=自分のID” width=”60″></a></div>

<!–ピグアイランド用–>
<div style=”position: fixed; top: 350px; left: 0px; z-index: 100; “><a href=”http://island.pigg.ameba.jp/user/自分のID” target=_blank”><img src=”http://画像のURL“></a></div><div style=”position: fixed; top: 425px; left: 0px; z-index: 100; “><a href=”http://island.pigg.ameba.jp/user/自分のID” target=_blank”><img src=”http://present-shop.ameba.jp/shop/original/pigg/user/image?amebaId=自分のID” width=”60″></a></div>

<!–ピグカフェ用–>
<div style=”position: fixed; top: 510px; left: 0px; z-index: 100; “><a href=”http://cafe.pigg.ameba.jp/user/自分のID“ target=_blank”><img src=”http://画像のURL“></a></div><div style=”position: fixed; top: 585px; left: 0px; z-index: 100; “><a href=”http://cafe.pigg.ameba.jp/user/自分のID“ target=_blank”><img src=”http://present-shop.ameba.jp/shop/original/pigg/user/image?amebaId=自分のID“ width=”60″></a></div>
</div>

・赤い文字の部分→アップした画像の位置
・青い文字の部分→ピグの画像の位置

下記は、ピグの画像URLです。
着せ替えをしたら、少しタイムラグがありますが、ほぼリアルタイムのピグ画像が表示されます。

http://present-shop.ameba.jp/shop/original/pigg/user/image?amebaId=自分のID

ブログのいろいろな場所に、ピグの画像を表示させることもできますよ。

その場合は、下記のように記載します。

<img src=”http://present-shop.ameba.jp/shop/original/pigg/user/image?amebaId=自分のID “>

活用してみてくださいね。

一緒によみたいアメブロカスタマイズ関連記事

人気ブログランキングに参加中！
少しでもお役にたてましたでしょうか？
皆様に役立つ記事を書いていきますので、応援宜しくお願いします！

別ウィンドで開きます。

トラックバック&コメント

この投稿のトラックバックURL: