カテゴリー: javascript

http://color-me-customize.com/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA/%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%9F%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%83%E3%83%97-%E3%83%97%E3%83%AD%E3%81%ABjquery%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/

jQuery本体ファイルの読み込み

jQueryを利用するには、まずjQuery本体のファイルを読み込まなくてななりません。
このファイルを読み込んだ上で、様々な機能やアクションを追加するコードが機能します。
通常はHTMLのheadタグ内に読み込みますが、カラーミーショップ プロではその通りとはいきません。
以前の記事でも書きましたが、カラーミーショップのテンプレートはHTMLのheadタグの中ををいじることができないので、JavascriptもHTMLのbody内に書かなければなりません。
該当するテンプレートの箇所は、共通テンプレートの一番最初がいいかと思います。

外部のウェブサーバにファイルをアップロードする方法

カラーミーショップとは別にウェブサーバを借りてファイルを保存できる環境の場合の方法です。

1. jQueryのサイトからファイルをダウンロード
2. 自分のウェブサーバにアップロードする
3. 共通テンプレートの一番先頭に下記のタグをペースト

srcの中は自分の環境に合わせて書き換えてください。

Googleのサイトから読み込む方法

カラーミーショップとは別にウェブサーバを利用していない場合の方法です。
リンクのタグをGoogle APIのサイトで取得して、共通テンプレートの一番先頭にペーストします。
利用するjQueryのプラグインが対応しているjQuryのバージョンを読み込まないと動作しない場合があります。
下記のサンプルはjQuery1.7.0のタグです。

下記のサイトでは、簡単にGoogleにホスティングされているjQueryなどのタグをコピーできます。
取得できるタグは最新バージョンのみとなります。

• ScriptSrc.net

jQueryを使ってみる

さて、これでjQueryを使うことのできる環境がテンプレート内に構築できました。
自分でプラグインを書く場合は、上のステップで読み込んだjQuery本体のファイルの後に書いていきます。
既製のプラグインを使う場合は必要なファイルを読み込み（ファイルを読み込む場合は外部のウェブサーバが必須となります）、必要なソースコードを書き足します。
コードを書く場合、テンプレートファイルに直接書き込むよりも外部ファイルで読み込む方がHTMLソースを汚さずに済むのでおすすめです。

srcの中は自分の環境に合わせて書き換えてください。

jQueryのプラグインは本家サイトでも公開されていますし、ネット上に無料で利用することのできるプラグインも多数公開されています。