こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
今回はmakeshopでよくあるご質問から
jQuery（JavaScript）の設置についてご紹介します！
こんなお悩みありませんか？
・ショップページに動的な表示をしたい
・使いたいjQueryがありますがどうやるの・・・
jQueryって？！
jQueryとは「JavaScript」と呼ばれるプログラムでよく使う処理を
カンタンに書けるようにしたライブラリの一種です。
例えば、JavaScriptで書くと何十行にもなるプログラムの記述が・・
jQueryを使うと、たった数行で書けたりしちゃいます！
プログラムができない方でも”動的な動きを”カンタンに扱うことができるので
多くの方に使われているライブラリなんですね。
makeshopでは、jQueryの設置は可能ですが、実装や動作についてはサポート対象外です。
また、ライセンスフリーとされているものは問題ありませんが、商用利用にはライセンス取得が必要なプラグインなどもあります。ショップ様でご判断のうえ、ご利用ください。
それでは、基本的なjQueryの設置方法を早速みていきましょう！
[難易度 ★★☆ ]
jQuery（JavaScript）の設置方法！
jQueryを読み込む
（1）ダウンロード！
設置したいjQueryを検索して必要なファイルをダウンロードしましょう。
また、jQueryライブラリの公式ページからjQueryをダウンロードすることができます。
▼「jQuery ポップアップ」「jQuery スムース スクロール」のように検索すると利用例やソースの取得が可能です！
→jsやCSSファイル、htmlを設定に合わせてダウンロードやコピーします。
▼参考外部サイト：jQueryダウンロードページ（公式ページ）
→必要な場合は制作環境に合ったバージョンをダウンロードします。
・必要なjs、CSSファイルは文字コードを「EUC-JP」にして作成しましょう。
文字コードが違うと文字化けして正しく読み込まれずに動きません。
あとで、「なぜか動かない・・」というようなことにならないようにしておきましょう。
（2）アップロード
ダウンロードしたjsファイルやCSSをファイルサーバーにアップロードします。
・ファイルは、【100MBサーバー（ギガプラス10）】からアップロードしましょう！
参考記事：「画像やCSSファイルをアップロードしたい」
・「js」、「css」のようなフォルダを作成しておくと管理しやすくオススメです。
（3）ファイルを読み込む
ショップデザイン / テンプレート選択・編集 / トップページ編集 / 上段メニュー管理 の最上行
または
ショップデザイン / テンプレート選択・編集 / スマホデザインの設定 / 共通headタグ管理 「全ページ共通」
のエディタエリアへ下記のように追記します。
▼ CSSとスクリプト例
<link rel="stylesheet" href="アップロードURLパス/○○.css"> <script type="text/javascript" src="アップロードURLパス/○○.js"></script>
・makeshopでは、<head>タグ内は自動出力されるので「上段メニュー管理」の最上行に
リンクを追記して読み込ませることができます！
・「共通headタグ管理」に追記することもできますが、出力されないページもあるので
確認してから入力しましょう！
参考：オンラインマニュアル「共通headタグ管理」
（4）HTMLを書く！
管理画面の【上段メニュー管理】や【中央画面管理】など表示したい位置に
必要なHTMLもお忘れなく記述します。
完了！
ショップページで動きを確認してみましょう！
いかがでしたでしょうか。
jQueryが少し分かったかも！と思っていただけたら嬉しいです。それではまた！
