2016.12.07カラーミーショップにてサイト制作中(その1)HTMLとjQueryのバージョンに注意ツイートシェアはてブ送るPocketネットショップ運営サービスの「カラーミーショップ」にてECサイトを制作中です。関連記事カラーミーショップのカスタマイズ勉強中:情報が乏しくて大変です2016.12.07制作中に気づいた点・感じたことなどを書きます。*カラーミーショップXHTML1.0で制作する今回の制作は、テンプレートを使わないオリジナルの内容です。カラーミーは幾つかテンプレートが用意されてますが、レスポンシブデザインのものが限られており、いっそオリジナルで作ろうと思い立ちました。制作手順としては、まずはHTMLとCSSによる普通のWEBサイト(仮サイト)を制作して、それをカラーミーに移植していきます。ここらへんはWordPressでオリジナルテーマのサイトを作る場合と同じですね。この仮サイト制作時に留意しないといけないのは、HTMLのバージョンはXHTML1.0で作るということです。それはカラーミーがHTML5に対応してなくて、未だにXHTMLを使っているからです。HTML5以降のタグ、たとえば「header」「footer」「article」「section」などは使用できません。最初にここを間違ってしまうと、後で手直しが面倒くさいです。jQueryのバージョンが古い次に、カラーミーにjQueryを使った機能を実装する場合の注意点です。カラーミーはデフォルトで「jQuery1.7.2」が実装されています。コードを確認すると分かりますが、headタグ内に以下のように記述があります。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で異なる複数のバージョンを載せるのはタブーですからね。これの解決策としては以下のブログが詳しいです。新・WordPressテーマ「Lightning」でサイト制作:まとめページWordPressテーマ「BusinessPress」でWEBサイトを制作:まとめページ便利なWordPressプラグイン:まとめページ無料画像編集ソフト「PhotoScape」使用方法:まとめページランサーズ受注ノウハウ:まとめページブログ主プロフケンです。後半開始⇒帰郷して職業訓練⇒2人会社勤務⇒フリーランスとなる。◇Twitterは更新通知+小ネタ用です。