最近のペタ・スライド＆ペタ・リスト
【 追記 】
2011.8.23
新しいブログデザインの時に、プラグインを動かすためのおまじないをわざめーばさんの記事を
もとに追記しました。
以前のスクリプトをご利用の方はスクリプトのＵＲＬの部分を修正して下さい。
ご協力お願いします。
ペタ・プラグインを配布します！
ペタ関係のプラグインをひとつに統合してみました。
ひとつのプラグインを設置するだけで、以下の事ができます。
１．最近のペタをスライド表示する。
２．最近のペタをリスト表示する。
３．最新のペタを表示する。
（ペタをつけてくれた方のブログのサムネイルを表示することもできます）
４．ペタクロックを表示する。
今回は、ペタ・スライドとペタ・リストの設置方法をご紹介します。
【 設置方法 】
新ブログデザインの場合は、まず、プラグインが動くようになるおまじないをフリープラグインの
先頭に挿入する必要があります。
すでにフリープラグインにある場合は、そのままでＯＫです。
これは、わざめーばさんのこちらの記事を参考にさせていただきました。
→ 新しいバージョンのjQueryが使えない？新デザイン『CSS編集用デザイン』
旧ブログデザインの場合は、なくても動きますが、入れると表示が速くなるかもしれません。
入れる場合は、上の２行だけでＯＫです。
すでにフリープラグインにある場合は、入れる必要はありません。
アメブロでは、標準でjQuery1.3が使えるようになっているのですが、バージョンが新しい方が処理がはやいので、1.6系のものを上の２行で読み込んでいます。
続いてフリープラグインに下記のペタプラグインのスクリプトを追加します。
※ペタ・スライド、ペタ・リスト、最新のペタ表示プラグイン、ペタクロック共通のスクリプトです。
※全て表示する場合でもこのスクリプト１行だけでＯＫです。
ペタクロックまたは最新のペタを表示している方はすでに設置済みなのでコピペ不要です。
次にペタ・スライドを設置したい場所に<div class="petaslide"></div>を貼り付けます。
ペタ・リストを設置したい場所に<div id="petalist"></div>を貼り付けます。
記事、メッセージボード、フリープラグインに貼り付けることが出来ます。
ペタ・スライドは複数箇所に設置できますが、ペタ・リストは１箇所だけの設置になります。
色をカスタマイズしたい場合は下記のスクリプトに変更して下さい。
background ・・・ 背景の色
border ・・・ 枠の色
title ・・・ 「最近のペタ」の文字の色
nickname ・・・ ニックネームの色
interval ・・・ スライドの間隔（ミリ秒）
赤い文字を自分の好みで変更して下さい。
色はハッシュ（ # ）抜きの6桁のカラーコードで指定します。
こちらのものを参考にコピペして下さい。
→ 色見本（カラーチャート） ナスカ特製
ご利用の際は、コメントを残して頂けると嬉しいです。
読者様も大歓迎です。
【 関連リンク 】
おもしろプラグインでアメブロカスタマイズ
みけねこでした。
ぽちっとお願いします (・∀・)
にほんブログ村
2011.8.23
新しいブログデザインの時に、プラグインを動かすためのおまじないをわざめーばさんの記事を
もとに追記しました。
以前のスクリプトをご利用の方はスクリプトのＵＲＬの部分を修正して下さい。
ご協力お願いします。
修正前： http://www.3kcat.net/mikeplugin/ → 修正後： http://petaplugin.appspot.com/
または
修正前： http://amebaplugin.appspot.com/ → 修正後： http://petaplugin.appspot.com/
または
修正前： http://amebaplugin.appspot.com/ → 修正後： http://petaplugin.appspot.com/
ペタ・プラグインを配布します！
ペタ関係のプラグインをひとつに統合してみました。
ひとつのプラグインを設置するだけで、以下の事ができます。
１．最近のペタをスライド表示する。
２．最近のペタをリスト表示する。
３．最新のペタを表示する。
（ペタをつけてくれた方のブログのサムネイルを表示することもできます）
４．ペタクロックを表示する。
今回は、ペタ・スライドとペタ・リストの設置方法をご紹介します。
【 設置方法 】
新ブログデザインの場合は、まず、プラグインが動くようになるおまじないをフリープラグインの
先頭に挿入する必要があります。
すでにフリープラグインにある場合は、そのままでＯＫです。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.6.2');</script>
<script type="text/javascript">(_JQ162_=jQuery)(function(){$=jQuery=_JQ162_;});</script>
<script type="text/javascript">google.load('jquery', '1.6.2');</script>
<script type="text/javascript">(_JQ162_=jQuery)(function(){$=jQuery=_JQ162_;});</script>
これは、わざめーばさんのこちらの記事を参考にさせていただきました。
→ 新しいバージョンのjQueryが使えない？新デザイン『CSS編集用デザイン』
旧ブログデザインの場合は、なくても動きますが、入れると表示が速くなるかもしれません。
入れる場合は、上の２行だけでＯＫです。
すでにフリープラグインにある場合は、入れる必要はありません。
アメブロでは、標準でjQuery1.3が使えるようになっているのですが、バージョンが新しい方が処理がはやいので、1.6系のものを上の２行で読み込んでいます。
続いてフリープラグインに下記のペタプラグインのスクリプトを追加します。
<script type="text/javascript" src="http://petaplugin.appspot.com/peta.jsp?id=あなたのアメーバＩＤ"></script>
※ペタ・スライド、ペタ・リスト、最新のペタ表示プラグイン、ペタクロック共通のスクリプトです。
※全て表示する場合でもこのスクリプト１行だけでＯＫです。
ペタクロックまたは最新のペタを表示している方はすでに設置済みなのでコピペ不要です。
次にペタ・スライドを設置したい場所に<div class="petaslide"></div>を貼り付けます。
ペタ・リストを設置したい場所に<div id="petalist"></div>を貼り付けます。
記事、メッセージボード、フリープラグインに貼り付けることが出来ます。
ペタ・スライドは複数箇所に設置できますが、ペタ・リストは１箇所だけの設置になります。
色をカスタマイズしたい場合は下記のスクリプトに変更して下さい。
<script type="text/javascript" src="http://petaplugin.appspot.com/peta.jsp?id=あなたのアメーバＩＤ&background=000000&border=FF0000&title=FFFF00&nickname=F5FFFA&interval=2000"></script>
background ・・・ 背景の色
border ・・・ 枠の色
title ・・・ 「最近のペタ」の文字の色
nickname ・・・ ニックネームの色
interval ・・・ スライドの間隔（ミリ秒）
赤い文字を自分の好みで変更して下さい。
色はハッシュ（ # ）抜きの6桁のカラーコードで指定します。
こちらのものを参考にコピペして下さい。
→ 色見本（カラーチャート） ナスカ特製
ご利用の際は、コメントを残して頂けると嬉しいです。
読者様も大歓迎です。
【 関連リンク 】
おもしろプラグインでアメブロカスタマイズ
みけねこでした。
ぽちっとお願いします (・∀・)
にほんブログ村