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

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

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

Download

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

code.jquery.com jquery 2.0.3.min

これで、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)

以上

Related Posts Plugin for WordPress, Blogger...

もし良ければお願いします。

  • このエントリーをはてなブックマークに追加

良かったらフォローお願いします。