Google Blogger で jQuery を使う

参考

BloggerでJQueryを使う方法
http://www.youngflavor.net/2012/04/85/
Color animation - 色や背景色をアニメーションさせられるjQueryプラグイン | CREAMU
http://blog.creamu.com/mt/2012/03/color_animation_-_jquery.html
Color animation jQuery plugin
http://www.bitstorm.org/jquery/color-animation/


目的と背景

jQuery を使用して Color Animation をやってみたい
Blogger を使用しているので、動作確認の方法もついでに知りたい



DEMO
$('#demodiv').animate({color: '#E4D8B8'})
$('#demodiv').animate({backgroundColor: '#400101'})
$('#demodiv').animate({borderBottomColor: '#00346B'})
$('#demodiv').animate({borderColor: 'darkolivegreen'})
$('#demodiv').animate({color: 'rgba(42, 47, 76, 0.1)'})
上記デモは参考とさせていただいたページのコードをコピーさせていただきました。

1)Blogger で jQuery を使えるようにする

Blogger の管理画面、ブログのテンプレートを開き HTML編集を開きます。
</head> の前あたりに jQuery を読み込むコードを追加しました

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript" ></script>
jQuery のバージョンは 1.8.0 を指定していますが、このバージョン以降であれば動作すると思います。 1.7.x では動作しません。

2)color animation plugin を読み込む

新規投稿ページで HTML 編集に変更して<script src="プラグイン"></script> を記述しました。

3)プラグインをページに埋め込む
 2 でプラグインへのリンクを記述しましたが、コードをページに埋め込むように変更しました。別のサーバーにファイルを配置しましたが、数日後に何のファイルか忘れて削除してしまいそうだったので・・・
 外部にファイルを配置しても問題なく動作します。

難しい事は何も無くデモが動いています。



0 件のコメント:

コメントを投稿