スマホ商品ページトップのスライダー設置について

Question

いつも大変お世話になっております。
ECステーションで作成したスライダーをスマホ商品ページの看板上に設置したのですが、矢印が少し大きいので小さく調節をしたいのと、少し右寄りなのでセンターに修正をしたいので、CSSの修正または追加項目があれば教えて頂けますでしょうか。

あと、確認のために何度か表示されたページを更新しているとたまに画像が大きく表示される時があります。こちらも何か修正方法があれば教えてください。

よろしくお願いいたします。

Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

veritaさんのショップの商品ページを確認したのですが、
スライダーの表示を確認することができませんでした。

実際の表示を確認する必要がございますので、
任意の商品ページ（サーチ非表示に設定したダミーの商品ページでも結構です）の
スマートフォン用商品説明文にHTMLソースをご記載いただき、
挿入された様子が確認できるURLをお知らせいただくことはできますでしょうか。

ショップURLの部分は伏せていただいて構いません。
フォーラムにてご返信いただきづらい場合は、
「投稿内容について報告する」のリンクよりお知らせください。

Answer

いつもお世話になっております。
商品ページ設定にて表示をしましたので、どの商品でも確認して頂けるかと思います。

ご確認よろしくお願い致します。

Answer

ECマスターズの塚本です。

veritaさんからいただいたご質問ですが、
担当が本日休みをとっておりまして回答が明日になります。

お時間いただき大変ご迷惑おかけしますが、
今しばらくお待ちいただければと思います。

どうぞよろしくお願いいたします。

Answer

かしこまりました。
現在1商品のスマホページのSP用商品説明文上部にスライダーを貼り付けていますので、
明日またご確認をお願いいたします。
現在張り付けている商品につきましては店舗内検索で[22914]と検索して頂けますでしょうか。

よろしくお願いいたします。

Answer

ECマスターズの田中です。

お待たせいたしました、
確認できる状態をご用意いただき、ありがとうございました。

> 矢印が少し大きいので小さく調節をしたい

につきましては、たとえば
.bx-wrapper .bx-prev, .bx-wrapper .bx-next { transform: scale(0.6); }
というスタイルシートの規則を、
楽天GOLDの「ecstation」フォルダ内の「toolbox」フォルダ内の
「jquery.bxslider.css」末尾に追記していただく、
といった方法でご対応いただくことができます。
（※数字は０〜１の間で設定可能です、数字が小さいほどサイズが小さくなります）

ですが、

> 少し右寄りなのでセンターに修正をしたい
> 確認のために何度か表示されたページを更新しているとたまに画像が大きく表示される時があります。

この２点について確認したところ、
本来ページ自体に埋め込んだ上でJavaScriptにより見た目の調整を行うところを、
iframeを経由してページに設置しているため、
仕組み上調整が難しく、このような現象が起こっているようです。

根本となる原因の特定が非常に難しいので、
まずは、先程の「jquery.bxslider.css」の末尾に
html, body { width:100vw; margin: 0; padding: 0; }
上記規則を加えた上で表示をご確認いただき、
それでも改善しない場合は、

slick.js
http://uzurea.net/explanation-of-jquery-slider-slick/

など、別の仕組み（スライドバナーで使われている、bxSlider以外の仕組み）を
利用して、改めてスライドバナーを作成の上、
ページへの埋め込みをお試しいただく必要がございます。