カラーミーショップにてサイト制作中(その1)HTMLとjQueryのバージョンに注意

カラーミーショップにてサイト制作中(その1)HTMLとjQueryのバージョンに注意

ネットショップ運営サービスの「カラーミーショップ」にてECサイトを制作中です。

カラーミーショップに関しては以前にも書きましたが、

カラーミーショップのカスタマイズ勉強中:情報が乏しくて大変です

2016.08.13

制作中に気づいた点・感じたことなどを書きます。
今回は「その1」。

カラーミーショップ

XHTML1.0で制作する

今回の制作は、テンプレートを使わないオリジナルの内容です。

カラーミーは幾つかテンプレートが用意されてますが、レスポンシブデザインのものが限られており、いっそオリジナルで作ろうと思い立ちました。

制作手順としては、まずはHTMLとCSSによる普通のWEBサイト(仮サイト)を制作して、それをカラーミーに移植していきます。

ここらへんはWordPressでオリジナルテーマのサイトを作る場合と同じですね。

で、この仮サイト制作時に留意しないといけないのは、HTMLのバージョンはXHTML1.0で作るということです。
それはカラーミーがHTML5に対応してなくて、未だにXHTMLを使っているからです。

なので、HTML5以降のタグ、たとえば「header」「footer」「article」「section」などは使用できません。

最初にここを間違ってしまうと、後で手直しが面倒くさいです。

jQueryのバージョンが古い

次に、カラーミーにjQueryを使った機能を実装する場合の注意点です。

カラーミーはデフォルトで「jQuery1.7.2」が実装されています。

コードを確認すると分かりますが、headタグ内に以下のように記述があります。

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

「1.7.2」はけっこう古いバージョンで(現在はjQuery3.x系が主流)、機能によっては動作しないものもあります。

たとえばカラーミーにBootstrapを組み込んだ場合、ハンバーガーメニューが開閉しません。
「jQuery1.7.2」だと動作してくれません。

こういう場合、新しいバージョンを組み込みたいわけですが、「1.7.2」がデフォルトで実装されていて、これを排除出来ません。

そのまま新しいバージョンを載せると、互いに干渉して不具合が起きる可能性があります。
jQueryで異なる複数のバージョンを載せるのはタブーですからね。

これの解決策としては以下のブログが詳しいです。

jQuery「noConflict」を使って同一ページ内でバージョンの異なる複数のライブラリを組み込む方法

一旦「1.7.2」を無効にして、新しいバージョンを読み込む方式をとれば良いでしょう。

 

関連記事

カラーミーショップにてサイト制作中(その7)ショップブログプラスのカスタマイズ

2016.12.07

カラーミーショップにてサイト制作中(その6)Bootstrapの実装方法

2016.12.02

カラーミーショップにてサイト制作中(その5)ショップ運営には販促用カレンダーが便利

2016.11.28

カラーミーショップにてサイト制作中(その4)カラーミーキットとは?

2016.11.20

カラーミーショップにてサイト制作中(その3)トップと枝ページのレイアウトを変える

2016.11.14

カラーミーショップにてサイト制作中(その2)オリジナルデザインとスライドショー

2016.11.11