読者様クラウドカルーセル
2014.1.24
最新のプラグインはこちらです
＞＞ みけねこカルーセル
【 修正履歴 】
2013.10.15
メッセージの文言とサイズもカスタマイズできるようにしました。
修正履歴は以上！
おもしろプラグインでアメブロをいじり倒すカスタマイズ♪
ども、みけねこ（ニャ～♪）です。
読者様クラウドカルーセルを作ってみました。
ペタクラウドカルーセルの読者様バージョンです。
【 読者様クラウドカルーセル（デフォルト） 】
【 設置方法 】
新ブログデザインで、初めてプラグインを利用する方、または、初めてjQueryを使用する方は、わざめーばさんのこちらの記事を参考に、下準備を行ってください。
＞＞ フリープラグインの先頭ではjQueryを使えるようにしておく
準備ができたら、スクリプトを設置します。
①まず、こちらのスクリプトをフリープラグインに貼り付けてください。
※ペタクラウドカルーセルがすでに設置されている場合は、不要です。
これは、こちらのサイトのスクリプトを利用させて頂きました。
＞＞ Cloud Carousel - Professor Cloud
②次に下記のスクリプトを貼ってください。
③最後に、読者様クラウドカルーセルを設置したい場所に下記のコードを貼り付けます。
フリープラグイン、メッセージボード、フリースペース、サイドバー、記事の中に設置できますが、ページ中に１ヶ所だけになるようにしてください。
【 枠の幅のカスタマイズ 】
枠の幅をカスタマイズする場合は、②のスクリプトの代わりに、下記のスクリプトを貼ります。
旧ブログデザインの場合は、160ピクセルぐらいです。
widthを指定しないで、デフォルトのままだと285ピクセルになります。
【 リフレクション（鏡反射）のカスタマイズ 】
新ブログデザインの場合は、リフレクション（鏡反射）効果をつけることができます。
リフレクション（鏡反射）効果をつける場合は、②のスクリプトの代わりに、下記のスクリプトを貼ります。
リフレクション（鏡反射）効果付き
【 その他カスタマイズ 】
枠の幅、リフレクション効果の他にもスクリプトにパラメーターをつけることによって、カスタマイズが可能です。
②のスクリプトの代わりに下記のスクリプトを貼ります。
色の指定方法はこちらで ＞＞ 色見本（カラーチャート） ナスカ特製
ハッシュコード(#)抜きの文字を指定してください。
【 カスタマイズ例 】
上記のスクリプトを貼るとこのようになります。
リフレクション（鏡反射）効果についてですが、旧ブログデザインの場合、ＩＥ１０では、正しく表示されないようです。
ペタクラウドカルーセルと同時に設置すると不具合が発生するかもしれません。
どちらか一方の設置をオススメします。
みけねこ（ニャ～♪）でした。
最新のプラグインはこちらです
＞＞ みけねこカルーセル
【 修正履歴 】
2013.10.15
メッセージの文言とサイズもカスタマイズできるようにしました。
修正履歴は以上！
おもしろプラグインでアメブロをいじり倒すカスタマイズ♪
ども、みけねこ（ニャ～♪）です。
読者様クラウドカルーセルを作ってみました。
ペタクラウドカルーセルの読者様バージョンです。
【 読者様クラウドカルーセル（デフォルト） 】
【 設置方法 】
新ブログデザインで、初めてプラグインを利用する方、または、初めてjQueryを使用する方は、わざめーばさんのこちらの記事を参考に、下準備を行ってください。
＞＞ フリープラグインの先頭ではjQueryを使えるようにしておく
準備ができたら、スクリプトを設置します。
①まず、こちらのスクリプトをフリープラグインに貼り付けてください。
<script type="text/javascript" src="http://www.3kcat.net/p/js/cloud-carousel.1.0.5.js"></script>
※ペタクラウドカルーセルがすでに設置されている場合は、不要です。
これは、こちらのサイトのスクリプトを利用させて頂きました。
＞＞ Cloud Carousel - Professor Cloud
②次に下記のスクリプトを貼ってください。
<script type="text/javascript" src="http://www.3kcat.net/p/rcc.jsp"></script>
③最後に、読者様クラウドカルーセルを設置したい場所に下記のコードを貼り付けます。
<div id="rcc"></div>
フリープラグイン、メッセージボード、フリースペース、サイドバー、記事の中に設置できますが、ページ中に１ヶ所だけになるようにしてください。
【 枠の幅のカスタマイズ 】
枠の幅をカスタマイズする場合は、②のスクリプトの代わりに、下記のスクリプトを貼ります。
<script type="text/javascript" src="http://www.3kcat.net/p/rcc.jsp?width=163"></script>
旧ブログデザインの場合は、160ピクセルぐらいです。
widthを指定しないで、デフォルトのままだと285ピクセルになります。
【 リフレクション（鏡反射）のカスタマイズ 】
新ブログデザインの場合は、リフレクション（鏡反射）効果をつけることができます。
リフレクション（鏡反射）効果をつける場合は、②のスクリプトの代わりに、下記のスクリプトを貼ります。
<script type="text/javascript" src="http://www.3kcat.net/p/rcc.jsp?reflHeight=30"></script>
※赤文字の数字は反射画像の高さ（ピクセル）です。
※赤文字の数字は反射画像の高さ（ピクセル）です。
リフレクション（鏡反射）効果付き
【 その他カスタマイズ 】
枠の幅、リフレクション効果の他にもスクリプトにパラメーターをつけることによって、カスタマイズが可能です。
②のスクリプトの代わりに下記のスクリプトを貼ります。
<script type="text/javascript" src="http://www.3kcat.net/p/rcc.jsp?width=285&reflHeight=30&border-width=6&border-style=ridge&border-color=FF0000&background=000000&text=読者登録しちゃったの？&text-size=24&text-color=FFFF00&text-color2=FFFFFF"></script>
width ・・・ 枠の幅(px)
reflHeight ・・・ リフレクション（鏡反射）画像の高さ(px)
0にするとリフレクション効果はなくなります。
border-width ・・・ 枠の太さ(px)
border-style ・・・ 枠の種類
(solid,double,groove,ridge,inset,outset,dashed,dotted)
border-color ・・・ 枠の色
background ・・・ 背景の色
text ・・・ メッセージの文言（指定しなければ「読者登録ありがとう！」）
text-size ・・・ メッセージのサイズ(px)（指定しなければ16)
text-color ・・・ メッセージの文字の色
text-color2 ・・・ 読者登録してくれた人のニックネームの色
※赤文字の部分をお好みに合わせてカスタマイズしてください。
width ・・・ 枠の幅(px)
reflHeight ・・・ リフレクション（鏡反射）画像の高さ(px)
0にするとリフレクション効果はなくなります。
border-width ・・・ 枠の太さ(px)
border-style ・・・ 枠の種類
(solid,double,groove,ridge,inset,outset,dashed,dotted)
border-color ・・・ 枠の色
background ・・・ 背景の色
text ・・・ メッセージの文言（指定しなければ「読者登録ありがとう！」）
text-size ・・・ メッセージのサイズ(px)（指定しなければ16)
text-color ・・・ メッセージの文字の色
text-color2 ・・・ 読者登録してくれた人のニックネームの色
※赤文字の部分をお好みに合わせてカスタマイズしてください。
色の指定方法はこちらで ＞＞ 色見本（カラーチャート） ナスカ特製
ハッシュコード(#)抜きの文字を指定してください。
【 カスタマイズ例 】
上記のスクリプトを貼るとこのようになります。
リフレクション（鏡反射）効果についてですが、旧ブログデザインの場合、ＩＥ１０では、正しく表示されないようです。
ペタクラウドカルーセルと同時に設置すると不具合が発生するかもしれません。
どちらか一方の設置をオススメします。
みけねこ（ニャ～♪）でした。