FC2ブログでもjQueryを使えるようにする為の準備

ノウハウ本文
編集する
履歴

FC2ブログでもjQueryを使えるようにする為の準備

作成日時：2011-07-02 22:34:42

お気に入りに追加するには、[無料登録]ください。

jQuery （ジェイクエリー）というプログラムをご存知でしょうか？
簡単に言えば、JavaScript（ジャバスクリプト）の新しいライブラリの一つで、従来のスクリプトに比べ高速でかつ、軽量で動作するプログラムということになります。
当ブログ内でも、いろいろな箇所にjQueryを利用していますが、一般的なアクションとしてマウスオーバーのときに動きをつけるという感じのものが多いようです。このjQueryを装備すると、今までのCSSでは不可能だった動きを再現できますので、是非、実装してみたいプログラムでもあります。
もちろん一般的なサイト/ブログでもjQueryは利用でき、FC2ブログも例外ではなく利用できます。

また、コチラの情報もおすすめです。
↓
http://matome0.sblo.jp/article/177102590.html

しかし、FC2ブログで利用する為にはjQueryの導入方法にFC2ならではの制限があり、少し手順が違います。
一般的なjQueryの導入
1. jQuery本家より、jsファイルのダウンロード
2. ヘッダー内にjQueryを読み込ませる
これだけで、jQueryを利用する為の準備は完了です。
ところが、FC2ブログの場合、ファイルをサーバーにアップロードするには、FC2ブログに備え付けの「ファイルアップローダ」を利用するしかありません。
つまり、一般的なサイトのようにローカル環境で編集したものをFTPでアップロードする事が出来ないという、無料ブログサービスによくある制約があるのです。

でも、FC2ブログに備え付けの「ファイルアップローダ」でもアップできるからいいじゃん？と思うでしょうが、初めての方はここでつまづき導入を断念するという声も耳にします。

FC2ブログでjQueryの導入を試してみる
では、FC2ではjQueryの導入で、どこが違うのかを説明してみたいと思います。
上記にも記載しましたjQuery本家よりjsファイルをローカル（パソコン内の任意の場所）にダウンロードします。
すると、
2011年6月現在では、「jquery-1.6.2.min」というjsファイルがダウンロードされます。
このダウロードしたファイルの場所を指定して、FC2ブログに備え付けの「ファイルアップローダ」でサーバーにアップロードしてみます・・・・・・・・すると・・・・・・・！

はい、そうなのです。FC2ブログでは、ファイル名に/や.が付いていてはアップロードできない仕組みなのです。
では、FC2ブログにjqueryは導入出来ないの？と思うでしょうが、実は簡単に出来るのです。

jsファイル名を変更してサーバーにアップロード
FC2でjqueryを導入するには、ファイル名を変えてしまえばいいだけの話なのです。
ダウロードしたファイル名が「jquery-1.6.2.min」ですから、下の部分を取って「jquery」だけにします。
そして、拡張子をjsにするだけでアップロード可能になります。つまり、jquery.jsとすればいいのです。

FC2ブログでheader内にjqueryを読み込ませる
1. 事前にアップロードしておいたURLをメモ帳かなにかにコピーしておきます。
（URLは、上の画面の左にある「表示」をクリックすれば、ブラウザ上にjsが表示されますので、そのURLです）
2. 「環境設定」→「テンプレートの設定」→「HTML編集」へと進みます。
3. 上の方にある </head> の記述を見つけ、その直上（厳密に言えば<head>から</head>の間でOK）に、
<script type="text/javascript" src="アップロードし、メモしておいたjquery.jsのURL(フルパス)"></script>
を記述します。

これで、FC2ブログでもjqueryプログラムが利用できる準備が完了です。

jqueryプログラムを適用してみる
私が以前に本家ブログで書いた「jQueryを使いマウスオーバーで画像を変える基本」で、実際にjQueryにコードを書き込み、プログラムを動かす基本をを説明しておりますので、[2. 基本となるコードは]からを参考にされるとわかりやすいと思います。
http://minanobinbou.blog68.fc2.com/blog-entry-264.html

また、コチラの情報もおすすめです。
↓
http://matome0.sblo.jp/article/177102590.html