カラーミーショップのサイトにJavaScriptを挿入する方法について解説

こんにちは。中川瞬(@shun01224)です。

中川
カラーミーショップのサイトにJavaScriptを挿入する方法が知りたい
という方のために、JavaScriptの挿入方法について解説をします。

この記事を読むことで、

  1. サイトにJavaScriptの挿入方法がわかる
  2. jQueryの挿入方法もわかる

この記事を書かせて頂いている私は、現在、

輸出・輸入・国内の転売のノウハウをお伝えしています。

時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、

忙しくても副業で収入を得てもらっています。

それではカラーミーショップのサイトにJavaScriptを挿入方法について解説していきます。

 

カラーミーショップでJavaScriptを埋め込む方法

JavaScriptをサイトに埋め込む手順について解説します。

  1. カラーミーショップのダッシュボードにログイン
  2. 上部にある「集客」をクリックし、「検索エンジン対策」を選択
  3. 「共通タグ」をクリックし、ページ下部の「headタグ内フリースペース設定」を選択

「headタグ内フリースペース設定」を選択すると

• PCショップ用の設定
• フィーチャーフォン向けショップ用の設定
• スマートフォンショップ用の設定

の3項目があります。それぞれにscript srcタグを設置します。

一つ注意点があり、外部読み込みのJavaScriptは、

カラーミーショップのサイトには設置できません。

mixhostやxserverのサーバーや自宅のサーバーにアップしましょう。

以上の流れで、JavaScriptを埋め込むことが可能です。

カラーミーカスタマイズで役立つJavaScript

カラーミーカスタマイズでJavaScriptを埋め込むことが可能な物は以下の通りです。

• jQueryを導入する
• bxSliderでコールバック関数を使用する
• 商品説明項目にJavaScriptを使用する

それぞれについて詳しく見てみましょう。

jQueryを導入する

head内にてjQuery 1.7.2 や jQuery 1.11.0を使用しているところが多く見られます。

カラーミーショップでは、旧ブラウザ(IE8以下)を使用しているため、

バージョンが足りず誤作動を起こす可能性があります。

bxSliderでコールバック関数を使用する

コールバック関数とは、

スライドショーを読み込んだタイミングで出現するように指示を出すことを言います。

カラーミーショップでは、自作スライドショーでbxSliderを使用。

画像を読み込む前は「(opacity: 0;)」と非表示にし、

読み込んだ後は「(opacity: 1;)」と締めくくります。

これを行うことで、レイアウトが崩れる心配がなくなります。

商品説明項目にJavaScriptを使用する

商品説明欄にも、商品の説明だけではなく、JavaScriptを埋め込むことも可能です。

設定で「自動改行」にしている場合、行末に<br />タグが付随しています。

これがあるとJavaScriptを読み込めずエラーが出るかもしれません。

以下のコードの様に、「//~」と表記することで、JavaScriptのコードが読み取り、

「OK」が表示されます。

<script>//
alert(“OK”);//
</script>

カラーミーショップのカスタマイズで起こる問題を解決

カラーミーショップのカスタマイズをしていると、トラブルを起こすことがあります。

トラブルを起こさないように気をつけるためには、以下のことに気をつけなければいけません。

• jQueryのバージョン
• 独自タグ
• レイアウト崩れ

以上の内容を気をつけても起きるトラブルについても別個に記載しています。

これらを参考にしてトラブルを回避しましょう。

jQueryのバージョン

カラーミーショップでは、jQueryで起動しているものがいくつもあります。

例を上げると

• Slick
• bxSlider
• Cloud Zoom
• Masonry
• Supersized

などがあります。

これらのプラグインを動かすには、jQuery1.7.2や jQuery 1.11.0を使用しています。

しかし、jQuery1.7.2や jQuery 1.11.0ではバージョンが古く誤作動を起こす可能性があります。

JavaScriptやCSSの外部ファイルを読み込むときは、

<head>内に書かずにテンプレートに記述をすると回避できるので試してみて下さい。

独自タグ

カラーミーショップは、独自タグを使用しています。

この独自タグに関してはしっかりと学習しなければいけません。

なぜなら、独自タグを使用してデータを出力しているからです。

また独自タグは、テンプレートごとにどれが使われているのが決まっています。

各項目でタグが使われていれば、=のあとに表示されます。

もし無ければ、「null」と出るため、このタグは使われていないということが確認できます。

レイアウト崩れ

カラーミーショップを始めたばかりで見受けられるトラブルが「レイアウト崩れ」です。

レイアウト崩れの原因を探すときは、Googleのデベロッパーツールを使用します。

デベロッパーツールの利点は

• ツール上でCSSやHTMLの修正をすると直ぐにブラウザで確認ができる
• jQueryのデバッグができるようになる
• どのCSSが優先で働いているのか確認できる
• スマートフォン画面をエミュレートして動作確認が可能
• ファイルの読み込み時間やエラーとなっている問題点を発見できる

と利点が数多くあります。

デベロッパーツールを使用してレイアウト崩れの原因を発見し、修正しましょう。

問題が解決しない場合

ある程度の問題であれば、上記に書いた「デベロッパーツール」で解決できます。

それでも解決できない場合は、どの辺りで問題が発生したのかを見つけなければいけません。

そのときの問題点の解決策として、以下の2点を確認しましょう。

•範囲を狭くし、問題点を解決する
• 正常、異常の境界線を明確にする

慣れるまでには時間がかかりますが、試行錯誤しながら修正をし、

異常の範囲を狭くしていくことが問題解決への近道と言えるでしょう。

それでも解決できない場合はできるだけ前に戻り、

問題のコードを最初から部分部分でコピー&新しいページにペースト。

問題が見つからなければ、またコピー&ペーストして問題を見つけるといった

地道に問題点を探していくことも大切です。

JavaScriptでサイトを盛り上げましょう

JavaScriptを挿入することで、他のサイトとの差別化が図れます。

最初は不慣れで問題が数多く出る可能性があります。

そのときは、Googleのデベロッパーツールを使用し、問題点を探して修正をしましょう。

地道な作業を繰り返すことで、問題解決能力が上がり、早期修正ができるようになります。

JavaScriptを入れて素敵なサイトに仕上げてください。

物販を実践して結果を出されている方で、丁寧に教えてくれる方をご紹介していますので、

下の記事ぜひ読んでください。