できることとメリットがわかったところで、次はjQueryを使うための準備をしていきましょう。
まずはjQueryを使用したいHTMLファイルに読み込みます。読み込む方法は2つあります。
アフィリエイトサイトの運用を続けていくと、ユーザーにより多くの情報を伝えたい・導線をわかりやすくしたいなどより多くの「欲」がでてきませんか？
例えば…
- ページトップでおすすめの記事を複数紹介したいけど、枠が足りないのが悩ましい
- ユーザーの目を引く告知枠を作りたい
- PCユーザーにもスマホユーザーにもわかりやすいカテゴリメニューを表示したい
etc…
そんな時に便利なのがjQuery！
ユーザーに紹介したい記事枠の確保・効果的な告知枠の作成・ユーザー導線の改善など、動きのあるパーツを盛り込むこともjQueryを利用すれば、初心者でも比較的カンタンに導入できます！
サイトを今よりちょっぴりプロっぽく機能的にし、ユーザーがより使いやすく快適なサイトにしてみませんか？
皆さんのアフィリエイトサイトをワンランクアップさせるjQuery講座。
jQueryって何？というかたも、興味はあったけど１から勉強するのは面倒で…というかたも、このコラムを読めば、アフィリエイターがサイトにjQueryを取り入れるメリットや実際の使いかたがわかるようになるはず！
ぜひ気軽に読んでみてください。それでは開講します♪
jQueryとは？
jQueryとはJavaScriptで書いていたコードを、短いコードで簡単にしたJavascriptのライブラリ(※)。
JavaScriptだと数十行必要なコードの記述も、jQueryならわずか数行で実装することが可能です。 また、jQueryのライブラリはCSSを動的に変更することもできるので、動きのあるWebページを簡単に作ることができますよ。
- ※プログラムの「部品」としてよく利用される機能を切り出してまとめたもの。ライブラリ（jQuery）を利用することにより効率的に開発を行える。
jQueryを使うとこんなことができる！
では、jQueryは具体的にどんなことができるのでしょうか？イメージしやすいよう、3つのサンプルをご紹介します。
１．スライダー
画像などのコンテンツをスライド表示できます。 サイト上の少ないスペースで複数の情報を紹介できるため、サイトのトップページなどでよく使われています。
２．モーダル
この画像のように、親画面を覆うようにして表示されている情報を見たことはありませんか？
これが、いわゆるモーダルです。モーダルは閉じるか指定の動作を完了するまで他の操作ができません。この特性を利用して、ユーザーに知ってもらいたい情報やアラートメッセージを表示する時などに使われます。
３．アコーディオンメニュー
ナビゲーションメニューの一つ。項目をクリックやタップすると隠していた子メニューや詳細を表示できます。ワンアクションで表示できるため、スマートフォンなど小さい画面でのメニュー表示にも重宝されています。
紹介した3つのサンプルはアクセストレードでも使用していますし、ほかの様々なサイトでも利用されているので、皆さんも触ったことがあるのではないでしょうか？
意外と身近で使われているjQuery。 ただ…できることはわかったけれど、「jQueryでしかできないことなの？」「やっぱりまだ自分のサイトに取り入れるのは難しそう…」と疑問や不安に思うかたもいるかもしれませんね。
そんな不安を吹きとばすメリットを次に紹介します！
jQueryを使うメリット
１．コード量が減る
JavaScriptで記述するよりも短いコードでサイト上の動きを実現できます。そのため、開発効率の向上による開発時間の減少やエラーを減らすことに繋がり、複雑なコードを書かなくてもよいため非エンジニアでも扱いやすいです。
２．ブラウザの違いによる挙動の違いが発生しにくい
JavaScriptを使う場合、各ブラウザに搭載されたエンジンによって実行されるため、ブラウザごとに記法が異なったり、対応可能なメソッド（動きの命令文）が違ったりします。jQueryはこのような膨大なブラウザごとの記述差異を自動的に吸収してくれるため、ブラウザの違いを意識せずにプログラミングができます。
３．プラグインがいっぱい！
なんといってもアフィリエイターにとって最大のメリットはこれかもしれませんね。 先にご紹介したスライドショーやモーダルなどを簡単に実装できるプラグインがたくさんあるので、簡単にWebサイトに動きや効果をつけることができます。
このコラム後半でもいくつか代表的なプラグインを紹介します！
jQueryの使いかた
<script src=“jQueryファイルのパス"></script>
２．CDNを利用する（アクトレデザイナー推奨！）
利用方法の前に、CDNとは何か？を説明しますね。
CDNとはContent Delivery Networkの略で、大容量のデジタルコンテンツをインターネット上で大量配信するためのネットワークのこと。
Webサイトのコンテンツが保存されているサーバー（オリジンサーバー）ではなく、専用のキャッシュサーバーが代理でWebコンテンツを配信します。キャッシュサーバーは世界中に配置されており、オリジンサーバーと比べて物理的な距離が近いため、Webコンテンツの配信がより高速になります。
このように、CDNはキャッシュを再利用するため、ページを表示するまでの時間が短くなります。またダウンロードしてファイルをサーバーに置く必要が無いので、サーバーへの負担も少なくなります。
このCDNを利用してjQueryを読み込むやりかたが2番目の方法で、CDNはjQuery公式サイトやGoogle、Microsoftから提供されています。
どのCDNを利用しても大きな差はありません。特にこだわりが無いならGoogleのCDNをおすすめします。利用者も多く、ご存じのとおりGoogleならではの安定感があるので、安心して利用できますよ。
CDNの利用方法は、各サービスサイトから提供されているスクリプトタグをコピーし、htmlに挿入するだけです。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
- ※2022/7/28時点の3系最新バージョンのgoogle CDNのURLです。CDNを利用する際は公式ページを確認し、自身が使用しているjQueryの系統の最新バージョンを指定するようにしてください。
jQueryのバージョンはどれを選べばいい？
jQueryには1.x系、2.x系、3.x系と、大きくわけて3系統が存在しています。
基本的には最新バージョンを利用しましょう。バージョンが異なると、コードの記述方法も異なる場合があります。 古いサイトのjQueryバージョンを上げる場合は、使用しているプラグインやコードの動作確認を実施しましょう。
【ちょっと余談】jQueryMobileは開発終了／別ライブラリへの移行を推奨
モバイルアプリケーション向けフレームワークのJavaScriptライブラリとして広く使用されていたjQueryMobileですが、2021年10月7日にDeprecate（利用を推奨せず）が宣言されました。jQueryMobileを利用しているWebサイトについては別のライブラリなどへの移行が推奨されています。
読み込む場所について
HTMLファイルのheadタグ内に記載しましょう。htmlは上から順に実行されていきますので、jQuery本体の読み込みはjQueryプラグインや自分で記述するコードよりも先に記述してください。jQuery本体を先に読み込まないと、うまく動作しない可能性があります。
jQueryの基本的な書きかた
基本の構文「いつ」「なにを」「どうする」の形で記述する
jQueryの基本構文は以下のように書きます。
｜いつ（イベント）
「いつ」はイベントと呼ばれ、jQueryをどんな時に動作（=発火）させるのか条件を指定する部分です。 よく使うイベントの一部を紹介します。
| $(function(){〜}); | ドキュメントの準備（DOMの読み込み）が完了したら実行する |
| $(window).on('load', function() {〜}); | 画像なども含めページが完全に読み込まれたら実行する ※$(function(){〜});のほうが実行が早い |
| $(window).on('resize', function() {〜}); | ウィンドウのサイズが変わったら実行する |
| $(".class").on('click',function(){〜}); | クラス名(class)の要素をクリックしたら実行する |
| $(window).on('scroll', function() {〜}); | ドキュメントをスクロールした時に実行する |
「ドキュメントの準備が完了したら実行する」以外に、「ウィンドウのサイズが変わったとき」や、「クリックしたとき」などもよく使われます。
｜なにを（セレクタ）
「いつなにをどうする」の「なにを」の部分です。操作の対象となる要素を指定します。 CSSの書きかたと同様に、「#」や「.」を用いることができます。
▼書きかたの例
| $(“#cat”) | id=“cat”の要素を指します |
| $(“.btn”) | class=“btn”の要素を指します |
| $(“p”) | pタグを指します |
「なにを」を表すセレクタの中でも絶対に覚えておいたほうが良いセレクタに「$(this)」というものがあります。
| $(this) | イベントが発生した要素を指します |
$(this)というセレクタは「イベントが発生した要素」を指しますが、この説明だけではピンと来ないかたもいると思いますので、こちらの例文をご覧ください。
$(".btn").on('click',function(){ //btnというクラス名の要素をクリックした時
$(this). toggleClass(“click”); //クリックしたbtnというクラス名の要素に「click」というクラスを付ける
});
この例文の$(this)が指すのは「クリックしたbtnというクラス名の要素」となるわけです。
この$(this)はクリックされたbtnだけを指しますので、同じページ内にbtnという名前の要素がいくつも存在している場合でも、クリックされたbtnだけをセレクタとして扱うことができるため大変便利です。ぜひ覚えてください。
｜どうする（メソッド）
「いつなにをどうする」の「どうする」の部分です。セレクタに対してどんな動きをするのかを指示します。 $(“セレクタ”)に、「.」でつなげる形で記述していきます。
▼書きかたの例
| $(“.btn”) .addClass(“is_open”); | class=“btn”の要素にis_openというクラスを付与します |
| $(“#cat”).css(“color”,“orange”); | id=“cat”の要素にcolor: orange; のcssを付与します |
メソッドはここでは紹介しきれないくらいたくさんの種類がありますが、比較的よく使用する便利なメソッドを紹介します。
| .css() | CSSの値を取得または書き換えをする |
| .hide() | 要素を非表示にする |
| .show() | 非表示になっていた要素を表示する |
| .addClass() | クラスを追加 |
| .removeClass() | クラスの削除 |
| .toggleClass() | クラスの追加・削除を切り替える |
「いつ（イベント）」「なにを（セレクタ）」「どうする（メソッド）」の構文に当てはめた例文に実際の動作を入れてみましょう。
$(window).on('load', function() { //ページが完全に読み込まれたら
$(".cat").addclass (".tama"); //クラスcatにtamaというクラスを追加する
$(".dog").fadeOut (); //クラスdogをフェードアウトする
});「いつ」は何度も書く必要はなく、「なにを」「どうする」は複数個まとめて書いてもOKです。
jQueryの導入方法例：アコーディオンメニュー
基本的な構文を覚えたところで、実際の導入方法例を解説していきます。 初心者でも比較的カンタンに実装できる「アコーディオンメニュー」の実装方法を紹介します。
クリックやタップするだけで開閉できるアコーディオンメニューは、ユーザーのデバイスを問わず省スペースで、メニューをユーザーに表示できるため、汎用性も高くよく使われています。皆さんもきっと目にしたことがあると思います。
今回は開く前は＋（プラス）ボタン、開いたら−（マイナス）ボタンになるアコーディオンメニューを作ります。
まずはHTMLのコードから。
<div class="question js_toggle">メニュー</div>
<ul class="answer">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
</ul>開閉のトリガーになる要素と開閉する要素を隣接させるのがポイントです。
続いてCSSです。
.question {
border: solid 1px #000;
padding: 12px;
border-radius: 4px;
position: relative;
cursor: pointer;
width: 90%;
max-width: 600px;
margin: 16px auto 0;
text-align: left;
}
.question:after {
content: "";
width: 12px;
height: 12px;
display: block;
background: url(../img/icon_p.svg) no-repeat;
position: absolute;
right: 12px;
top: 18px;
}
.question.is_open:after {
background: url(../img/icon_m.svg) no-repeat;
}
.answer {
overflow: hidden;
visibility: hidden;
height: 0;
transition: all .4s;
padding: 0 12px;
width: 90%;
max-width: 600px;
margin: 0 auto;
text-align: left;
list-style: none;
}
.is_open + .answer {
visibility: visible;
height: auto;
min-height: 80px;
padding: 12px;
}トリガーとなる要素に「is_open」というクラスを付与して、CSSで開閉を制御します。
最後にjQueryの記述です。
$(".js_toggle").on("click", function () { //クラスjs_toggleをクリックしたら
$(this).toggleClass("is_open"); //クリックしたjs_toggleにクラスis_openの付け外しをする
});トリガーとなる要素に「is_open」というクラスを付与する動作をjQueryで書きました。たったの3行です。
この記述で作ったサンプルのアコーディオンメニューです。
いかがでしたか？
案外簡単にできそう♪と思った皆さんはぜひチャレンジしてみてくださいね。自分で書くのはまだ不安…と感じた皆さんも、まだ諦めないでください！先ほどもお伝えしたとおり、 jQueryにはプラグインも豊富に提供されています。
無料で使えるjQueryプラグイン7選
jQueryは、JavaScriptの中でも最も有名なライブラリ。
そのため、自分で一から頑張ってコードを書かなくても、無料で使える便利なjQueryプラグインがたくさんあります。 中でもアクトレデザイナーおすすめのプラグインを7つご紹介します。
代表的なjQueryのスライダーとモーダルのほか、吹き出しの表示や幾何学模様が動く…なんていう、ユニークなエフェクト（効果）を付けられるプラグインもありますよ♪
1.スライダープラグイン
１．カスタムオプションが豊富！スライダーの王道slick
オプションが豊富にあり、様々な形式のスライダーを表示できるスライダープラグインslick。 商用利用もOKなので多くのサイトで利用されています。
２．レスポンシブ対応済！無限ループにも対応 bxSlider
カルーセル（無限ループ）などスライダーの表示方法が豊富なスライダープラグイン。 レスポンシブデザインやフリックにも対応しています。
２．モーダルプラグイン
１．シンプルで初心者も使いやすい！ Remodal
イベントが多く用意されているので、運営サイトのシチュエーションに合わせて細かい動作を設定できます。 ファイルサイズが超軽量（約1KB）なのも利点です。
２．レスポンシブにも対応！MODAAL
MODAALも軽量なプラグインとして有名です。レスポンシブにも対応済。またモーダルを表示したときに背景は動かない（スクロールしない）といったところも特徴です。
スライダーとモーダルの代表的なプラグインをご紹介しました。 最後にスライダーやモーダルほど王道ではありませんが、サイト表現の幅を広げるプラグインを幾つかご紹介します。
３．こんなことも表現できる！ちょっとユニークなエフェクト（効果）のプラグイン
１．ユーザーのアクションに反応して吹き出し（ツールチップ）を表示できる Tooltipster
マウスオンやクリックなどのアクションに応じて、吹き出しを表示します。表示スタイル（枠の有無、影など）や効果（フェードなど）もサイトの雰囲気や吹き出し用途にあわせてカスタム可能です。
２．吹き出し（ツールチップ）の表示方向を変えられる！グラデーションもOK Tippy.js
こちらも様々な形式の吹き出し（ツールチップ）を表示できるプラグイン。 吹き出し表示位置の指定や、吹き出しの背景色をグラデーションにしたりできますよ。オシャレなサイトに一役かってくれそうなプラグインですね！
３．サイトの背景を幾何学模様やドットのアニメーションにできる！Particle.js
Webページの画面いっぱいに、幾何学模様やバブルのアニメーションが広がっているサイトを見たことはありませんか？Particle.jsプラグインを使えば実装可能です！
シェイプの色や形や数、シェイプをつなぐ線の太さの変更はもちろん、マウスと連動する動きや逃れる動きなどもアレンジできます。サイトの印象をぐっとスタイリッシュに変えられますよ。
【余談】WordPressでモーダルやスライダーを実装するには？
サイト作成にWordPressを使っているけど、WordPressでもモーダルやスライドショーを付けるのにjQueryが必要なの？と疑問に思うかたもいるかと思います。
結論からお伝えすると、「WordPressプラグイン」を使用してスライダーやモーダルなどを実装することができます！
｜WordPressプラグインとは？
WordPressに機能を追加するための拡張ツールです。自分でコードを書かなくてもWordPressプラグインをインストールするだけで必要な機能を追加できます。
プラグインの中身はjQueryをはじめ、phpやcssなどの機能拡張に必要な様々なコードが入っています。
WordPress上でスライドショーやモーダルなどを付けたい場合は、自分でjQueryを入れるよりもWordPressプラグインを探してインストールするほうが簡単でおすすめです。
WordPress管理画面ナビゲーションメニューの「プラグイン」をクリックし、作業エリア左上の「新規追加」をクリックし、プラグインの検索画面で目的にあった使いたいプラグインを導入しましょう。
今回はjQueryでできること、使うメリット、使いかた、プラグインをご紹介しました。
一見難しそうな印象のjQuery。でも、いつもの作業プラスアルファで意外とカンタンにサイトをワンランクアップできる、とても便利なライブラリなんですよ♪少しでもアフィリエイトサイトのユーザビリティ向上に役立ててもらえれば嬉しいです。
今回ご紹介したもの以外にも、jQueryでできることはたくさんあります。 このコラムで興味を持っていただけたようであれば、ぜひjQueryにトライしてみてください！
SHARE
ご注意ください
- 本記事の内容は、2022/07/28更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
関連記事
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう！
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら