カラーミーやMakeShopでviewportを設定する方法

4595 Views
2017年05月23日 JavaScriptECサイトカラーミー

カラーミーやMakeShopを使いレスポンシブサイトを作ろうとした時に問題となるのが、viewportが設定できないことかと思います。
なのでJavaScriptを使用し、viewportを設定してあげたいと思います。

SNSでシェア♪

1 以下のコードをHTMLタグの中に追加
2 カラーミーの設定
3 MakeShopの設定
4 まとめ

以下のコードをHTMLタグの中に追加

<script>
  window.onload = function () {
    var viewport = document.createElement('meta');
    viewport.setAttribute('name', 'viewport');
    viewport.setAttribute('content', 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no');
    document.getElementsByTagName('head')[0].appendChild(viewport);
}
</script>

window.onload = function () {

var viewport = document.createElement('meta');

viewport.setAttribute('name', 'viewport');

viewport.setAttribute('content', 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no');

document.getElementsByTagName('head')[0].appendChild(viewport);

}

</script>

コードを追加後、サイトに合わせて以下の内容を設定。

カラーミーの設定

管理画面ログイン後、ツールバーにある
「ショップ作成」→「スマートフォンショップ」をクリック

PC版表示

を選択して保存してあげることでPC版のデザインファイルが使用されます。

MakeShopの設定

管理画面ログイン後、
「ショップ作成」→「会社概要の設定」身をクリック

PC表示設定、スマートフォン表示設定があるので、
スマートフォン表示設定のタブを表示後、

PC表示

を選択して保存してあげることでPC版のデザインファイルが使用されます。

、、、なんで会社概要の設定の中にあるんだろう。。。

まとめ

まだカラーミーとMakeShopしかECシステムを触ったことがありあませんが、
MakeShopは使いにくいです。。。
なぜサイドバーとコンテンツがtableタグの中に含まれてしまうのでしょうか？
まだ使い方が悪いだけなのかな。。。

ともあれ、viewportが無事設定できたのでcssでガンガンカスタマイズできちゃいますね！