【この記事を読むのに必要な時間は約 3 分です。】
ライブドアブログのカスタマイズについて、これまでいくつか紹介してきた。
今回は、ライブドアブログでJqueryプラグインを利用する方法を紹介する。
以前、紹介した「ライブドアブログのカスタマイズ-上へ戻るボタンの設置」もJqueryを使っているが、Jquery本体は、Google AJX APIのホスティングサービスを利用し、Jqueryプラグイン自体は、直接、ヘッダー部分に記載して利用した。そこで、今回は、Jqueryプラグインをライブドアブログのサーバーにアップロードして利用する方法を紹介する。まずは、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>
Jqueryプラグイン
これでJqueryプラグインを利用する準備は出来た。
次回以降、Lightbox系のモーダルウィンドウ表示の「Colorbox」プラグインと画像に影をつける(正確にはdivボックスに影をつける)「Shadow」プラグインの設置について説明したいと思う。
ライブドアブログのカスタマイズ-画像をLghtbox風に表示するJqueryプラグインColorboxの設置の記事を追加しました。(2013.12.13)
ライブドアブログのカスタマイズ-画像に影を付けるJqueryプラグイン「jQuery Shadow」の記事を追加しました。(2013.12.15)
以上