jQueryを使えるように準備しよう [Stingerは不要]

javascriptで動きを付ける際に「jQuery」という機能を使う事によって、より理想的な動きができるようになります。

ですが、jQueryをコードから使うためには準備が必要になりますので、今回はjQueryを使うための準備を紹介します。

はじめに

今回紹介する方法を行う事によって、ブログやサイトのカスタマイズでjQueryを使うための準備ができます。

jQueryを使わない処理であれば今回の方法は必要ありません。

ただ、jQueryを使う事で、カスタマイズの幅が広がりますのでぜひ実装してみてください。

ではまず、jQueryを実装するためのファイルを配置していきましょう。

jQueryを用意しよう

http://jquery.com/download/

まずはこちらのサイトからjqueryをダウンロードしてください。

Download the compressed, production jQuery 3.0.0 と書かれたリンクを選択すると、「jquery-X.X.X min.js」というファイルをダウンロードできると思います。

ここでダウンロードしたファイルを設置する事によって、カスタマイズにjQueryを使う事ができるようになります。

では実際に配置してみましょう。

jQueryを配置する

wordpressなどのサイトをカスタマイズする場合、ダウンロードしたjQueryをサーバーにアップロードする必要があります。

FTPソフトなどを使って、jQueryのファイルを配置します。

jQueryの配置はそこまで意識する必要はありません。

htmlやphpなどで、jQueryが配置されている場所を記述するので、わかりやすい場所に配置しておくと良いと思います。

jQueryを呼び出す

jQueryを実際に使えるようにするためには、htmlやphpのコードの中にjQueryが配置されている場所を書き記す必要があります。

jQueryの配置場所を指定する時は、以下のように記述する事になります。

（ダウンロードしたjQueryのファイル名は、jquery.jsに変更してあります。jqueryのファイル名を変更した場合は、コード側のファイル名も変更してください）

<script src="jQueryを配置した場所/ファイル名.js"></script>

このようなコードをhtmlなり、phpなりで呼び出してあげる事によって、jQueryを使う準備ができました。

私の場合、jQueryを呼び出すファイルとjQuery本体の配置場所を同じ階層にしているので、呼び出すためのコードは以下のようになりました。

<script src="jquery.js"></script>

同じ階層の場合は、このようにファイル名だけ記述すれば良いのですが、読み込む階層が変わる場合は「/」を使って実際の階層を指定する必要があります。

これでjQueryの配置は完了しました。

ここで、ひとつ注意点があります。

WordPressで使っているテーマが「Stinger」の場合は、すでにjQueryを読み込むためのコードが記述されているので、書く必要はありません。

jQueryを使う

では実際にjQueryを使ってコードを書いてみましょう。

( jQueryの配置場所はすでに呼び出してあります。)

(function($){
  コード
})(jQuery);

このようなコードを記述しておく事で、jQueryを使い始める事ができます。

jQueryで囲まれた内側にjQueryのコードを記述してみてください。

まとめ

今回紹介した方法で、ブログやサイトのカスタマイズにjQueryを使えるようになりました。

jQueryを使えば、カスタマイズの幅が広がりますのでphpやcss、jsなどを使ってサイトをカスタマイズしている方はぜひjQueryを使ってみてください。

【jQuery】自動スクロールで任意の位置まで移動させるボタンの作り方

2016.9.4

WEBでサイトを見ていると、記事を読み終わったタイミングや読み始めのタイミングで、ページ上部や目的の項目が書かれた箇所まで自動スクロールしたい時がありますよね。 そのような動作もjQueryを使えば、簡単に実装できるので紹介します。...

ではまた。