ライブドアブログのカスタマイズ-Jqueryを使った小技「クリックすると輪がポヨ~ン」と広がるpointerを設置

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

前回の記事、ライブドアブログのカスタマイズ-画像に影を付けるJqueryプラグイン「jQuery Shadow」まで、いくつかライブドアブログでJqueryを利用する方法を紹介してきた。
今回は、息抜きも兼ねて、小技的なJqueryプラグインを紹介したいと思う。
クリックすると輪がポヨ~ンと広がるJqueryプラグイン「pointer」を紹介したい。

設置方法

プラグインのダウンロード

nejimaki-actさんのブログの中の記事、pointer.js – クリックに楽しみをからダウンロードできる。

1pointer

記事の途中にある「DEMO/ダウンロード」をクリックする。

2pointer

するとpointer.jsと書かれたページにジャンプする。
pointer.jsにカーソルを合わせて右クリックして、「名前を付けてリンク先を保存…」を選択して、pointer.jsファイルを保存する。これで、ダウンロードできた。
ダウンロードファイル:pointer.js

3pointer

必要ファイル

必要ファイルは、pointer.jsだけ。
zipファイルをダウンロードした場合も、解凍して中にあるpointer.jsだけ利用する。

ライブドアサーバーへのアップロード

ライブドアブログの管理画面で画像/ファイルを選択する。

6shadow

ファイル管理のタブをクリック。

7shadow

「フォルダを作る」をクリックし、「pointer」と記入する。

8shadow
8-2shadow

「アップロード」をクリックし、作成した「pointer」フォルダの中にpointer.js(jsファイル)をアップロードする。

9shadow

ヘッダー部分への記載

ヘッダー部分(<head>~</head>の間)に以下のとおり記載する。
なお、Jquery本体は、Google AJX APIのホスティングサービスを利用している。
また、pointer.jsファイルは、上記で説明したとおりの場所にアップロードした前提。

2ちゃんねる,2ch,まとめブログ,2ちゃんねるまとめ,アンテナサイト,ニュースまとめ,まとめ,痛いニュース,ニュース速報,芸スポ速報,芸能,スポーツ,事件,野球,サッカー,じゃんじゃん速報
は、私のライブドアブログのURLなので、当然だが、自分のライブドアブログのURLを記載すること。

<!-- Jquery本体ホスティングここから -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Jquery本体ホスティングここまで -->
<!-- pointer.js -->
<script type="text/javascript" src="http://2chan-matome.publog.jp/pointer/pointer.js"></script>
<!-- /pointer.js -->

利用方法

これで利用できるようになっている。
私のライブドアブログ「2ちゃんねる じゃんじゃん速報」で好きなところをクリックして欲しい。
普通、こういう小技はうざかったりするが、pointer.jsは小気味良いし、邪魔臭くないので是非利用して欲しい。
以上

Related Posts Plugin for WordPress, Blogger...