デザインレシピの、告知君とショップ内検索窓表示について

Question

ビーノでページを作っているので、他の方の質問を参考に、メインのフリースペースに告知君とショップ内検索窓を入れたのですが、ビーノはレスポンシブのため、スマホにもそのまま表示されて、現在虫眼鏡が告知君バナーの下から見えているようなじょうたいになってしまいました。

cssでsp表示しない記述が、ネットで調べても素人でちんぷんかんぷんで分からなくて困っています。
どのようにすれば、よいのでしょうか。

現状告知君の記述だけをフリースペースにいれて、検索窓はビーノのテンプレを使っています。
ですが、ショップページから見るとそちらも表示が小さくて、幅いっぱいにしたいのですができません。
レスポンシブのためか、SPにも少しはみ出て表示されています。

長くなってわかりにくくすみません。。

希望は告知君とショップ内検索窓をデザインレシピのように横並びで入れて、SPページもピシッと告知君を幅内に納めたいです。

Answer

ECマスターズの土屋です。

>スマホにもそのまま表示されて、現在虫眼鏡が告知君バナーの下から見えているようなじょうたい
>になってしまいました。
>cssでsp表示しない記述が、ネットで調べても素人でちんぷんかんぷんで分からなくて困っています。
>どのようにすれば、よいのでしょうか。

現在SPサイズで表示されている、イベント告知君ですが
横スクロール型のイベント告知君を
選択されている為、「スマホGOLDページ用」にチェックを入れて
頂き更新して頂いてもよろしいでしょうか。
https://ec-masters.gyazo.com/1d5845c56be35b3aec75cd0f1893a4a5/draw

横スクロールを選択してしまいますと、こちらは
SP対応しておらず、レイアウトが崩れる原因と
なってしまいます。

>希望は告知君とショップ内検索窓をデザインレシピ
>のように横並びで入れて

PCページで横並びにしたい場合ですと
検索窓と、イベント告知くんのURLを一緒に囲む
必要がございます。方法としましては、
デザインレシピの「イベント告知君と検索窓を設置する」
という項目を選択し、赤枠のhtmlを貼り付けて頂き。



こちらにdivタグにイベント告知くんの
iframeタグの挿入をお願いいたします。

https://ec-masters.gyazo.com/925cc4c6083ebd625d321d8cdfb42a73

>SPページもピシッと告知君を幅内に納めたいです。

こちらは、SPページにイベント告知くんと
検索窓を一列に並べたいという認識でお間違い
ないでしょうか。

お間違いない場合は、
下記の記述を加えていただくことで、
一列で表示することができるようになります。
(例)

@media screen and(max-width: 640px) {
    .emRPBandSearch {
        display: block !important;
    }
}

Answer

質問なのですが、先日電話でお話ししたスマホバナーが上下になってしまう件を新たにフォーラムに質問したのですが、なぜか消えてしまっています。………（省略）………
ログインして全文を読む

Answer

ECマスターズの土屋です。

>質問なのですが、先日電話でお話ししたスマホバナーが上下になってしまう件を
>新たにフォーラムに質問したのですが、なぜか消えてしまっています。

先日は、お問い合わせ頂き誠にありがとうございます。
また、フォーラムの投稿ですが、こちらでは確認
することが出来ませんでした。

大変お手数なのですが、もう一度質問内容をお伺いしても
よろしいでしょうか。

どうぞよろしくお願いします。

Answer

パソコンの画面で、告知君バナーが商品ページに出る際、小さくなっていて、右側に変な余白ができるのが気になり、直したいです。
TOPページではおっきく表示されています。
HTMLほぼ知識ありません。
すみません。素人向けにおしえていただけますでしょうか。

電話では告知君と検索窓の配置が上下にずれてしまう件をお願いしましたが、検索窓はビーノのテンプレートをそのまま使うことにしました。###HR######IMG0defda0ed3c45ea1543b9eea701de06aa.jpegIMG0### ###IMG16a827b517b64284c5872fd90267e018a.pngIMG1###

Answer

ECマスターズの土屋です。

>パソコンの画面で、告知君バナーが商品ページに出る際、
>小さくなっていて、右側に変な余白ができるのが気になり、直したいです。

再度ご投稿誠にありがとうございます。

商品ページのイベント告知君を確認させて
頂きました所、イベント告知君の設定で
「横スクロール型」が設定されている為、
商品ページのイベント告知君が小さく表示されてしまって
いるのが原因だと考えられます。

対策としましては、商品ページに
設置しているイベント告知君の設定を
「スマホGOLDページ用」に切り替える必要がございます。

以下の手順で変更することが可能です
１イベント告知君の詳細ページにアクセス
２「スマホGOLDページ用」にチェックし
「作成結果」のコードをコピー
３商品ページに設置しているイベント告知君を
書き換える。

上記の手順で試して頂ければ幸いです。

引き続きどうぞよろしくおねがいします。