こんにちは、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）ファイルを読み込む

【ショップデザイン（PC）】>【トップページ編集】>【上段メニュー管理】 の最上行
　または
【ショップデザイン（PC）】>【トップページ編集】>【共通headタグ管理】「全ページ共通」

のエディタエリアへ下記のように追記します。

▼ CSSとスクリプト例

・makeshopでは、<head>タグ内は自動出力されるので「上段メニュー管理」の最上行に
　リンクを追記して読み込ませることができます！
・「共通headタグ管理」に追記することもできますが、出力されないページもあるので
　確認してから入力しましょう！
　参考：オンラインマニュアル「共通headタグ管理」

（4）HTMLを書く！

管理画面の【上段メニュー管理】や【中央画面管理】など表示したい位置に
必要なHTMLもお忘れなく記述します。

完了！

ショップページで動きを確認してみましょう！

いかがでしたでしょうか。
jQueryが少し分かったかも！と思っていただけたら嬉しいです。それではまた！