みなさんこんにちは。
小野寺@Webテロリストです。
さて、前回はjQueryの基礎について解説いたしましたが、
今回はクリックポワァ〜ンを例に、
実際にjQueryをあなたのWebサイト(WordPress)に設置する方法を解説したいと思います。
クリックポワァ〜ンの設計図(Javaファイル)は
nejimaki-actさんが無料で配布してくれています。
その設計図には、
「jQueryに含まれる”このパーツ”と”このパーツ”をこんな感じで組み立てて表示させてね!」って書かれています。
なので、まずはそもそもパーツ倉庫のjQueryがどこに有るか?を教えてあげなければいけません。
方法は2種類あって、
[ 1 ] 本家のjQueryサイトからダウンロードして自分のサーバーにアップロード。
そして、そのURLを教える方法
[ 2 ] 天下のGoogle先生や本家jQueryなどが皆さんのために
用意してくれているjQueryファイルのURLを教える方法。
※Google先生はロボットなんで、どんなに褒めてもSEOで便宜は図ってくれません(笑)
手軽に実装できるので、僕はGoogle派です。
Googleが提供するjQueryファイルはココ↓にあります。
//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js
この場所をあなたのWebサイトのhead内で告知するわけです。
告知は、こんな感じ↓で書きます。
<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script>
で、次は設計図を広げましょう。
設計図は自分のサーバーにアップロードしなければいけないので、
nejimaki-actさんからpointer.jsをダウンロード(クリックポワ〜ンの設計図)して下さい。
↑のリンクをクリックすると頭が痛くなりそうな文字の羅列が表示されると思います。
それを全選択(command + a)して、コピー(command + c)。
で、テキストエディットとかmiにペースト(command + v)して、
「pointer.js」ってファイル名で保存して下さい。
そしたら、そのファイルをCyberduckとかを使って、
あなたのサーバーの任意の場所にアップロードしてそのURLを告知します。
告知はjQueryファイル同様、こんな感じ↓で書きます。
まとめるとこんな感じ↓。これが基本的な書き方です。
<head>
<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script>
<script type=”text/javascript” src=”あなたがアップロードしたURL/pointer.js”></script>
</head>
たったこれだけです(笑)
このページをご覧の方は「WordPress + 賢威」の組み合わせが多いと思いますので、
その場合は、「ダッシュボード>外観>テーマ編集」と進み、
右サイドバー「テンプレート」内の「ヘッダー(header.php)」をクリック。
表示された文字(ソース)を上から順に追っていくと、
</head>って行が出てくると思います。
その一つ前の行に例の2行挿入します。
こんな感じ↓
<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script>
<script type=”text/javascript” src=”あなたがアップロードしたURL/pointer.js”></script>
</head>
で、「ファイルを更新」ボタンを押すだけで実装完了です!
ちなみに「pointer.js」をちょっと書き換えるだけで、
カスタムもできます (*´･ω･)ﾉ
26行目:var x = e.pageX-5;
27行目:var y = e.pageY-5;
このxとyの値(-5)を変えると、ポワァ〜ンの中心点が変わります。
8行目:size : 80,
9行目:spd : 300, /*速さ*/
10行目:color : “#ccc” /*色*/
このsizeの値(80)を変えるとポワァ〜ンの大きさが変わります。
spdの値(300)を変えるとポワァ〜ンのスピードが変わります。
colorの値(300)を変えるとポワァ〜ンの色が変わります。
いろいろ試して、セミオリジナルのポワァ〜ンを実装してみて下さいね!
それでは今回も最後までありがとうございました!