イベント告知君　スマホ商品説明文へ　横スクロールタイプの導入

Question

お世話になっております。

下記のフォーラムを参考に横スクロールタイプのイベント告知君を設置しようとしたのですが、
サイズが小さいので、スマホの横幅いっぱいに設置できるタグを教えてほしいです。
※当方iPhone6sで確認しております。

https://ec-masters.club/forum/post_view.php?id=2144&word

よろしくお願い致します。

Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

最初に、下記の内容をメモ帳に貼り付け、
ファイル名の末尾を「.js」にして、
外部JSファイルとして保存していただき、
GOLD内にアップロードしてください。

===== この下の行から ================
jQuery(function($){
var s = 'scale(' + Math.floor( ($('.blockWrap').width() / 510) * 1000 ) / 1000 + ')';
$('#rpoint_box_scroll iframe').css({
  '-o-transform': s,
  '-webkit-transform': s,
  '-moz-transform': s,
  '-ms-transform': s,
  'transform': s
});
});
===== この上の行まで ================

次に、スマートフォン用共通説明文に
下記のHTMLタグを貼り付けることで、
スマートフォンの横幅いっぱいに
イベント告知君を設置することができます。

===== この下の行から ================





===== この上の行まで ================
※外部JSファイルのURLは、実際のURLにご変更ください。
※ショップURLは、御自身のショップに合わせてご変更ください。

Answer

田中　様

お返事ありがとうございます。

作ってみましたが、表示の下のほうが切れてちょっと見栄えが悪く思います。
どうにかならないでしょうか？

Answer

ECマスターズの田中です。

私のiPhone6sにて確認したところ、
開催期間の文字が、少し切れておりました。

楽天GOLD、「rpoint_box」フォルダ内にある「custom_scroll.css」に

.jquery-slider-element { font-size: 7px; line-height: 7px; }

と追記していただき、動作をご確認いただけますでしょうか。

Answer

田中　様

ありがとうございます。
上記の通り追記しましたら文字が切れずに入りました。
ありがとうございました。

イベント告知君 スマホ商品説明文へ 横スクロールタイプの導入

イベント告知君　スマホ商品説明文へ　横スクロールタイプの導入