ネットショップ運営サービスの「カラーミーショップ」にてECサイトを制作中です。
カラーミーショップに関しては以前にも書きましたが、
制作中に気づいた点・感じたことなどを書きます。
今回は「その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」を無効にして、新しいバージョンを読み込む方式をとれば良いでしょう。
