ブログにjQueryを設置する方法

このエントリーをはてなブックマークに追加
jQuery_capjQueryって言うjavascriptのライブラリがあります。ライブラリってのは、、例えばjavascriptが部品だとしたら、ライブラリはそれを使って組み立てたパーツ、って感じです。部品からでも、パーツからでも、何かを組み立てる事は出来ますが、パーツからの方が楽だったり、部品からの方が細かい部分まで色々出来たりする、って感じでしょうか。

その、jQueryをブログで使う場合には何をすれば良いのか、って事を簡単に書きます。

目次



概要


基本的には、jQueryを読み込めば良いだけです。今回は、ホスティング(誰かがネットにアップロードしている物)されているjQueryを読み込む方法と、自分でjQueryをアップロードして、そのjQueryを読み込む方法について説明します。

ただし、ブログサービスによっては初期設定で読み込んでいるjavascriptが原因で動かない場合もあります。無事に設置できたか確認する方法で、ちゃんと設置出来たかどうか確認して下さい。

ホスティングされているjQueryを使う


簡単なのはこれ。既にネットにアップロードされているjQueryをロードして使う、と言う方法。以下のコードを追加するだけです。1行追加するだけです。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

このコードをコピーしたい場合は、表示されている部分をダブルクリックすると全部選択されるので、その後それをコピーして下さい。
より新しいバージョンがあるかもなので、Google Libraries API (jQuery)の「Libraries」のコードを見て、最新版を確認すると良いと思います。

追加する場所はどこでも良いですが、多いのはheadタグの中。</head>の直前、とかです。
どこでも良い、とは言いましたが、jQueryを使ったスクリプトのコードは、jQueryを読み込んだ後じゃないと動かないので、それは考慮して下さい。
つまり、最低でもjQueryでなんかする前にはjQueryを読み込んで下さい。当然と言えば当然ですが。

htmlが書き変えられないアメブロみたいなブログサービスの場合は、サイドバーとかのフリーコンテンツ的なやつに、このコードを加えて追加すれば良いと思います。

自分でアップロードして使う


ホスティングされている物を使うと、読み込みに時間がかかってしまう可能性があります。他の人もそれを使ってるはずなのでそういう可能性もあります。
そんなわけで、自分のページにアップロードして使う、ってのが多分ベストです。若干手間はかかりますが、多分その方が良いです。いや、変わらないかもですがw

まず、jQueryをダウンロードします。
jQuery: The Write Less, Do More, JavaScript Library
がjQueryの公式ホームページなので、ここからダウンロードします。

今現在のホームページであれば、トップ画面の右部分にダウンロードボタンがあるので、それを押せば良いだけです。「PRODUCTION」と、「DEVELOPMENT」、ってのがありますが、「DEVELOPMENT」、ってのは、jQuery自体のソースコードを変更したい、と言う上級者向けのやつで、普通に使うだけなら「PRODUCTION」、の方をダウンロードして下さい。

ダウンロードしたら、そのjQueryのファイルをアップロードします。ブログサービスによっては、ファイルをアップロード出来るはずなので、それでアップロードする。
ファンブログの場合は、そういう機能はないので、ファンブログにjava scriptをアップロードする方法を参考にして、アップロードして下さい。

最後に、それらを読み込みます。書き方はホスティングする場合と同じ。「src=”」以降のアドレスを今さっきアップロードした自分のファイルのアドレスに変更すれば設置完了。
ブログサービスによっては、アップロードしたファイルのアドレスが分かりにくい場合もあるかとは思いますが、頑張って下さいw

無事に設置できたか確認する方法


上のどちらかの手順でjQueryを設置したあと、ちゃんと設置できたか確認しましょう。
以下のコードを、jQueryを設置した時に使ったコードより下のどこかに書いて下さい。

<script type="text/javascript">
jQuery(function() {
alert("test");
});
</script>

jQueryがちゃんと設置されていれば、以下の画像の様にtestと書かれたウィンドウが開きます。開かない場合は、どこかが間違っていますので良く確認して下さい。
jQuery_test
もし間違えていないはずなのにtestのウィンドウが表示されない、と言う場合は、ファンブログでのjava script関連の注意点まとめも少しは参考になると思うので読んでみて下さい。その記事の「onload後に$(function)は効かない」や「$の重複」が原因になっている事が良くあるので、その部分を読んでみて下さい。

最後に


ひとつだけjQueryの使い方が色々書いてあるページを紹介。
少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス

小技が色々紹介されていて、かなり参考になると思います。ちゃんとアップロード出来ているかどうか、というのの確認も兼ねて1つでも実装してみると良いと思います。

このブログでも、ファンブログ限定の物が多いですが、jQueryで色々な事をやってみて記事にしているので、ファンブログカスタマイズ初級とかファンブログカスタマイズ中級とか読んでみて下さい。

このブログの更新情報は TwitterRSS でチェック出来ます。是非、フォロー、またはRSSの購読をよろしくお願いします。
「RSSの購読って何?」って人は、 ブラウザ毎のRSS購読方法の簡単なまとめ を読んでみて下さい。

このエントリーをはてなブックマークに追加
人気記事

PAGE TOP