ライブドアブログのカスタマイズ-Jqueryプラグインを使う方法

【この記事を読むのに必要な時間は約 3 分です。】

ライブドアブログのカスタマイズについて、これまでいくつか紹介してきた。
今回は、ライブドアブログでJqueryプラグインを利用する方法を紹介する。
以前、紹介した「ライブドアブログのカスタマイズ-上へ戻るボタンの設置」もJqueryを使っているが、Jquery本体は、Google AJX APIのホスティングサービスを利用し、Jqueryプラグイン自体は、直接、ヘッダー部分に記載して利用した。そこで、今回は、Jqueryプラグインをライブドアブログのサーバーにアップロードして利用する方法を紹介する。まずは、Jquery本体について。

1 Jquery本体
- 1.1 Jquery本体の入手方法
- 1.2 Jquery本体の利用方法
2 Jqueryプラグイン

Jquery本体

Jquery本体の入手方法

こちらが、Jqueryのホームページ。

「Download jQuery v1.10.2 v2.0.3」をクリックしてダウンロードページへジャンプする。
その中に
「jQuery2.x」>「Download the compressed, production jQuery 2.0.3」と
　　　　　　　　「Download the uncompressed, development jQuery 2.0.3」がある。

クリックすると以下のように表示されるので、全体を選択してコピーし、コピーしたものをテキストファイルに保存して、名前をそれぞれ、「jquery-2.0.3.min.js」「jquery-2.0.3.js」で保存する。

これで、Jqueryの本体である圧縮版の「jquery-2.0.3.min.js」と無圧縮版の「jquery-2.0.3.js」を手に入れた。

今回は、せっかく入手したJquery本体ファイルだが、利用せずに、次で説明するGoogle AJX APIのホスティングサービスを利用する。

Jquery本体の利用方法

Jquery本体を利用するには、
1.直接サーバーにアップロードして利用する方法。
2.Dropbox等のストレージサービスにアップロードして利用する方法。
3.ホスティングサービスを利用する方法。等がある。
ライブドアブログの場合、全て利用可能だが、今回は速度的に最も早くかつ安定していると思われるGoogle AJX APIのホスティングサービスを利用することにする。
ヘッダー部分（<head>～</head>の間）に以下のとおり記載する。
なお、Jquery本体は、原則、Jqueryプラグインの記載よりも上に記載すること。


<head>
(略)
<!-- Jquery本体ホスティングここから -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Jquery本体ホスティングここまで -->
(略)
</head>