メイクショップ　レスポンシブデザインについて

Question

お世話になっております。

メイクショップで下記のページがレスポンシブになっていないのですがどのようにすればレスポンシブになるのでしょうか？


カテゴリページ
http://www.earth-tribe.jp/shopbrand/ct5

カートページ
http://www.earth-tribe.jp/shop/basket.html


ちなみにスマホページのデザインを適用するはチェックを外した状態です。
ＰＣデザインをそのままスマホにもレスポンシブで適用させています。


以上、ご教示の程よろしくお願いいたします。

Answer

ECマスターズの田中です。

ショップを拝見したところ、
カテゴリページ・カートページと同様に、
商品ページの内容もレスポンシブになっておらず、
上記ページも含めてヘッダーとフッター、およびトップページは
レスポンシブになっていることがわかりました。

レスポンシブになっている部分は、
スタイルシートを利用して、
スマートフォン向けに適用させる規則を
作成されておりましたので、

共通CSS管理
http://ms-manual.makeshop.jp/commoncss/

上記、共通CSSを利用して、
レスポンシブになっていない部分に対して、
スマートフォン向けに適用させる規則を
新たに作成していただく必要がございます。

スマートフォン向けに適用させる規則を書くには、
下記ページで紹介されている「メディアクエリ」をご利用ください。
https://sole-color-blog.com/blog/71/

実際のライカさんのショップでは、
http://dp38276899.lolipop.jp/makeshop2/css/common.css
上記の外部CSSファイルにて、基本的に
@media screen and (max-width: 640px) {
というメディアクエリで、
スマートフォン向けの規則が記載されております。

Answer

ご連絡いただきありがとうございます。

いろいろやってみたのですがうまくいかずでして。。。

スタイルシート添付したので具体的にどこを修正するといいかご教示いただくことは可能でしょうか？

お手数ですがご確認の方よろしくお願いします！

Answer

ECマスターズの田辺です。

恐れ入りますがフォーラムでは画像ファイル以外の
添付を確認することができませんので
こちらのメールアドレス宛てに
スタイルシートを添付していただいてもよろしいでしょうか。

club@ec-masters.net

よろしくお願いいたします。

Answer

ECマスターズの田中です。

修正というよりは、新たに規則を付け加えていただくイメージとなります。
たとえば、いただいたcommon.cssに

= この下の行から ====================
@media screen and (max-width: 640px){
  #topimgframe {
    width: 100%;
    margin-left: 0;
  }
}
= この上の行まで ====================

と書き加えていただくことで、
スマートフォンで閲覧時に、検索窓下の流れる画像の枠を
画面内におさめることができます。
（画像を表示するtopimg-next.htmlが、狭い幅の表示に対応しておらず、
　右側が見切れた状態で表示されますので、別途調整が必要です）

このように、ページ内の要素を１つ１つご確認いただいた上で、
スマートフォンで閲覧した時にどのように表示されるべきなのかを、
スタイルシートで記述していただく形になります。

なお、このスタイルシートは全てのページに等しく適用されますので、
たとえば、カテゴリページだけに適用させたかった規則が
商品ページの思わぬ場所に適用されて表示が乱れる、
といったトラブルを起こさないよう、
ご注意いただきながら、規則を追加していただきますようお願いします。

メイクショップ レスポンシブデザインについて

メイクショップ　レスポンシブデザインについて