ペタクロック
【 追記 】
2011.8.23
新しいブログデザインの時に、プラグインを動かすためのおまじないをわざめーばさんの記事を
もとに追記しました。
以前のスクリプトをご利用の方はスクリプトのＵＲＬの部分を修正して下さい。
ご協力お願いします。
ペタ・プラグインを配布します！
ペタ関係のプラグインをひとつに統合してみました。
ひとつのプラグインを設置するだけで、以下の事ができます。
１．最近のペタをスライド表示する。
２．最近のペタをリスト表示する。
３．最新のペタを表示する。
（ペタをつけてくれた方のブログのサムネイルを表示することもできます）
４．ペタクロックを表示する。
今回は、ペタクロックの設置方法をご紹介します。
最新のペタのプロフィール画像と日付・時刻を表示することができます。
【 設置方法 】
新ブログデザインの場合は、まず、プラグインが動くようになるおまじないをフリープラグインの
先頭に挿入する必要があります。
すでにフリープラグインにある場合は、そのままでＯＫです。
これは、わざめーばさんのこちらの記事を参考にさせていただきました。
→ 新しいバージョンのjQueryが使えない？新デザイン『CSS編集用デザイン』
旧ブログデザインの場合は、なくても動きますが、入れると表示が速くなるかもしれません。
入れる場合は、上の２行だけでＯＫです。
すでにフリープラグインにある場合は、入れる必要はありません。
アメブロでは、標準でjQuery1.3が使えるようになっているのですが、バージョンが新しい方が処理がはやいので、1.6系のものを上の２行で読み込んでいます。
続いてフリープラグインに下記のペタプラグインのスクリプトを追加します。
※ペタ・スライド、ペタ・リスト、最新のペタ表示プラグイン、ペタクロック共通のスクリプトです。
※全て表示する場合でもこのスクリプト１行だけでＯＫです。
スライドまたはリスト、最新のペタを表示している方はすでに設置済みなのでコピペ不要です。
次にペタクロックを設置したい場所に<div class="petaclock"></div>を貼り付けます。
記事、メッセージボード、フリープラグインに貼り付けることが出来ます。
色をカスタマイズしたい場合は下記のスクリプに変更して下さい。
background ・・・ 背景の色
title ・・・ 「ペタクロック」の文字の色
date ・・・ 日付の文字の色
clock ・・・ 時間の文字の色
border-width ・・・ 枠の太さ
border-style ・・・ 枠の種類
(solid,double,groove,ridge,inset,outset,dashed,dotted)
border-color ・・・ 枠の色
photoframe-color ・・・ プロフ画像の枠の色（&photoframe-color=○○をつけなければ枠なし）
赤い文字を自分の好みで変更して下さい。
色はハッシュ（ # ）抜きの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="petaclock"></div>を貼り付けます。
記事、メッセージボード、フリープラグインに貼り付けることが出来ます。
色をカスタマイズしたい場合は下記のスクリプに変更して下さい。
<script type="text/javascript" src="http://petaplugin.appspot.com/peta.jsp?id=あなたのアメーバＩＤ&background=000000&title=FFFF00&date=F5FFFA&clock=87CEFA&border-width=4&border-style=dotted&border-color=FF0000&photoframe-color=B0C4DE"></script>
background ・・・ 背景の色
title ・・・ 「ペタクロック」の文字の色
date ・・・ 日付の文字の色
clock ・・・ 時間の文字の色
border-width ・・・ 枠の太さ
border-style ・・・ 枠の種類
(solid,double,groove,ridge,inset,outset,dashed,dotted)
border-color ・・・ 枠の色
photoframe-color ・・・ プロフ画像の枠の色（&photoframe-color=○○をつけなければ枠なし）
赤い文字を自分の好みで変更して下さい。
色はハッシュ（ # ）抜きの6桁のカラーコードで指定します。
こちらのものを参考にコピペして下さい。
→ 色見本（カラーチャート） ナスカ特製
ご利用の際は、コメントを残して頂けると嬉しいです。
読者様も大歓迎です。
【 関連リンク 】
おもしろプラグインでアメブロカスタマイズ
みけねこでした。
ポチっとすると喜ぶ人がいます (・∀・)
にほんブログ村