PC用のイベントバナー(カウントダウンタイマー)をスマホページに設置するやり方
現在、ツールボックスの「イベントバナー」(カウントダウンタイマー)は
レスポンシブ(スマホ)対応となっておりません。m(_)m
就きましては、「ページクリエイター」などで
作成したスマホページに設置する際は
以下のやり方である程度キレイに収まりますので
企画部にてご案内しますのでご参考ください。
1)ツールボックスでの設定
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
ツールボックス>イベントバナー>新規作成>テンプレ選択>アップロード>HTMLソース取得
今回記事で使用するテンプレ
・SSミニ_黒帯_スマホ向け調整_期間要確認
・SSミニ_白帯_スマホ向け調整_期間要確認
・SSミニ_ハッピ女の子_スマホ向け調整_期間要確認
上記にて開催期間を設定し、アップロードし、
貼り付けソースを取得します。
2)HTMLを用意します
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
下記の<div>~</div>の間に
1)で取得したソースを入れます。
<div style="text-align:center; background-color:#111111;">
</div>
※「SSミニ_白帯_スマホ向け調整_期間要確認」を選択した場合は
background-color:#fff;に変更願います。
NEW!!
※「SSミニ_ハッピ女の子_スマホ向け調整_期間要確認」も
新たにご用意致しました。(2018/8)
サンプル:https://www.rakuten.ne.jp/gold/iimonostore/ss201809-m.html
3)ページクリエイターに設置
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
ページクリエイターにて表示したい場所に
HTML直接入力ブロックを配置していただき
そこへ登録をお願いします。
※楽天スマホ商品ページに設置する場合は 2)の作業は行わずに裏技適用にてそのまま入れる形になります。
その際は「SSミニ_ハッピ女の子_スマホ向け調整_期間要確認」のタイプがお勧めになります。
(但し、ページ左側には寄ってしまいます。)
⇒裏技に就きましては2020/9にて全面的に終了となっております。
ご参考:楽天市場 スマホページ「本来利用できないHTMLタグの修正」について
https://manual.ecsystem.jp/20200530iframe/
関連:
HTML直接入力ブロック
うまくいきましたでしょうか?
こちらでのご対応を宜しくお願い致します。
--------------------------------
※HTML直接入力ブロックに記述するHTML、javascriptに就きましては
ECステーションサービスとしては正式サポート外となります。
予めご了承の程お願い申し上げます。
(とは言え、なにかあれば企画部あてご連絡ください。)
--------------------------------