カラーミーやMakeShopでviewportを設定する方法
カラーミーやMakeShopを使いレスポンシブサイトを作ろうとした時に問題となるのが、viewportが設定できないことかと思います。
なのでJavaScriptを使用し、viewportを設定してあげたいと思います。
スポンサーリンク
目次
以下のコードを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>
コードを追加後、サイトに合わせて以下の内容を設定。
カラーミーの設定
管理画面ログイン後、ツールバーにある
「ショップ作成」→「スマートフォンショップ」をクリック
PC版表示
を選択して保存してあげることでPC版のデザインファイルが使用されます。
MakeShopの設定
管理画面ログイン後、
「ショップ作成」→「会社概要の設定」身をクリック
PC表示設定、スマートフォン表示設定があるので、
スマートフォン表示設定のタブを表示後、
PC表示
を選択して保存してあげることでPC版のデザインファイルが使用されます。
、、、なんで会社概要の設定の中にあるんだろう。。。
まとめ
まだカラーミーとMakeShopしかECシステムを触ったことがありあませんが、
MakeShopは使いにくいです。。。
なぜサイドバーとコンテンツがtableタグの中に含まれてしまうのでしょうか?
まだ使い方が悪いだけなのかな。。。
ともあれ、viewportが無事設定できたのでcssでガンガンカスタマイズできちゃいますね!
スポンサーリンク