ecforceについて

Question

お世話になっております。
現在、自社サイトをecforceで構築準備を行っております。

商品ページ作成にあたり、商品管理＞基本設定＞商品ページ情報＞詳細（サブ）に入力しているのですが、
プレビューで見るとPCが横幅画面いっぱいに表示されてしまいます。
例えば

のように画像を80%で設定しても、そのようになりません。

ecforceに問い合わせをしたところ、具体的な記述内容に関しましてはご案内いただくことが出来ませんでした。

表示イメージとしては下記の店舗様のような感じです。

https://cily.jp/shop/products/cily_eyeshadow_002

同じecforceの「ec_force_basic_theme」というテーマテンプレートをご利用さているようで、
完全にレスポンシブ対応となっています。

オープン前のため実際のページをご覧いただくことは難しいのですが、
どうぞよろしくお願いいたします。

Answer

ECマスターズの三輪です。

いただいたご質問ですが、確認いたしますので、
恐れ入りますが、ご回答まで今しばらくお待ちくださいますよう
お願いいたします。

Answer

ECマスターズの三輪です。

> 商品ページ作成にあたり、
> 商品管理＞基本設定＞商品ページ情報＞詳細（サブ）に入力しているのですが、
> プレビューで見るとPCが横幅画面いっぱいに表示されてしまいます。

原因として、スタイルシート（CSS）の影響を受けている可能性があるため、
いただいたソースコードを下記の通りに書き換えた上で、
表示を確認していただけますでしょうか。


.itemimg { width: 80%; }

Answer

ECマスターズ 三輪様

お世話になっております。
ご教示いただいたソースコードに書き換えたところ、80%で表示させることが出来ました。
ありがとうございます。
PCが左寄せで表示されてしまったため「margin:auto;」を追加したところ、中央表示になりました。
こちのコードの記載で誤り等ございましたら、ご指摘いただきたいです。
また、レスポンシブ対応なのでスマホも80%での表示になるのですが、スマホのみ100%で表示させる方法はございますか？

Answer

ECマスターズの田中です。

無事表示いただけて何よりです。

margin:auto;
の指定に、特に誤りはございません。
上下の余白を作りたくないことを明示する場合は、
margin:0 auto;
としていただいても結構です。

> また、レスポンシブ対応なのでスマホも80%での表示になるのですが、スマホのみ100%で表示させる方法はございますか？

いただいたページでも使われている、
メディアクエリをご利用ください。
https://sole-color-blog.com/blog/71/

いただいたページでは、
@media (max-width: 750.98px){ と } で囲むことで
スマートフォン用のスタイルシートを適用しております。
画面幅（750.98の数字）は、必要に応じてご変更の上ご利用願います。

Answer

お世話になっております。
下記を追記することでスマホは100%で表示することが出来ました。
ありがとうございます。

@media (max-width: 750.98px){
        .itemimg{
    		width: 100%;
        }

こちらにつきましても誤り等ございましたらご指摘いただけますと幸いです。


追加でお伺いしたいのですが、使用するecforceの「ec_force_basic_theme」というテーマテンプレートの
トップページについて、元々の仕様でスライドショーと商品カテゴリーの画像にグラデーションが入る仕様になっています。
こちらのグラデーションをなくすことは可能でしょうか？

ecforceに確認したところ、アクション > コードの編集 より記述等で対応とのことですが、具体的な方法を
ご教示いただくことは出来ませんでした。
また、コード編集したテーマはサポート対象外となり、自動更新の対象外とのことです。
こちらは編集してしまうとサポートの対象外になることと、自動更新の際変更したコードが上書きされてしまう
ことを考えると、あまり手を加えない方がいいのでしょうか？
自動更新を行わないよう設定しておき、タイミングを見てこちらで更新をして、コードを再設定することも
可能なのでしょうか？

こちらの店舗様のトップページが、同じテーマを使用しているのでグラデーションの仕様になっています。
https://cily.jp/

Answer

ECマスターズの田中です。

いただいたソースは、{ に対して } の数が不足しておりますので、
末尾に } を１つ追加していただきますようお願いします。

> 追加でお伺いしたいのですが、使用するecforceの「ec_force_basic_theme」というテーマテンプレートの
> トップページについて、元々の仕様でスライドショーと商品カテゴリーの画像にグラデーションが入る仕様になっています。
> こちらのグラデーションをなくすことは可能でしょうか？

ページに読み込まれるCSSに、
下記の規則を追記していただくといかがでしょうか。

[class*=p-category_panel__block]:before,
.p-kv_slider__track__list__item__inner:before {
    background: initial !important;
}

Answer

ECマスターズの田中です。

コード編集を行われるとサポート・自動更新の対象外となってしまう、
とのことですので、
先にご案内差し上げたCSSを差し込むことができる他の設定項目が無いかどうか、
ご確認いただきますようお願いします。

Answer

ECマスターズ　田中様

いただいたソースを追記してみましたが、グラデーションは表示されたままでした。
CSSを差し込むことができるのが、自動更新の対象となるテーマの箇所からのコード編集のみで、他に差し込める箇所はないように思われます。
また、いただいたソースは該当と思われるテーマのコード編集の箇所に、下記のように一番下に追記してみました。

----------------------------------------------------------------------------------------------------------------


{{ 'shop/base' | javascript_include_tag }}


  {{ 'notice' | flash: 'control-alert alert-success', 'text u-color__bg--bg u-color__text--alert' }}
  {{ 'alert' | flash: 'control-alert alert-danger', 'text u-color__bg--bg u-color__text--alert' }}
  {{ content_for_index }}

  {% comment %} welcome modal {% endcomment %}
  {% comment %} {% unless customer_signed_in %}
    
      
      
        NEWS LETTER
        新商品、お得なお知らせなどを定期的に配信中、今機会に是非登録してください。
        
          
          登録
        
        
      
    
  {% endunless %} {% endcomment %}
  {% comment %} end of welcome modal {% endcomment %}


[class*=p-category_panel__block]:before,
.p-kv_slider__track__list__item__inner:before {
background: initial !important;
}

Answer

ECマスターズの田中です。

いただいた箇所に記載する場合は、
styleタグで囲んで、下記のようにご記載いただきますようお願いします。


[class*=p-category_panel__block]:before,
.p-kv_slider__track__list__item__inner:before {
background: initial !important;
}

Answer

ECマスターズ 田中様

styleタグで囲むことでグラデーションは表示されなくなりました。
ありがとうございます。
ただ、コードを追加することにより、フッターの表示が崩れてしまいます。
一度ecforce側にも自動更新について確認したいこともございますので、
また改めてご相談させていただきたいと思います。

Answer

ECマスターズ 田中様

お世話になっております。
ecforceに確認したところ、自動更新をするに設定していないと、更新の度に該当箇所を確認して
手動でコードを追加する必要がありそうです。
そうなると作業に手間がかかってしまうので、自動更新は設定することにしようと思います。

また、グラデーションをなくすCSSを差し込むことの出来る箇所は、他にないようです。
とりあえずはグラデーションにしても対応出来そうなバナーを用意しようと思います。
色々とご教示いただきありがとうございました。