出荷日バナー　スマホに設置方法

Question

いつもお世話になります。

ECステーションさんの出荷日バナーをスマホに設置したく
下記のフォーラムを元に
https://ec-masters.club/forum/post_view.php?id=2057&word[]=%E5%87%BA%E8%8D%B7%E6%97%A5%E3%83%90%E3%83%8A%E3%83%BC

各商品ページで表示されるよう、スマホの商品ページ設定　商品ページ共通説明文に入れましたが、商品ページを見ても表示されていません。
何がいけないのでしょうか。

Answer

ECマスターズの田中です。

商品ページ共通説明文に入っているタグを確認したところ、
src属性で指定されているURLが、見つからない状態になっておりました。

ECステーションの管理画面、もしくはPCページより
現在利用中の出荷日バナーのURLを取得し、置き換えてください。

別件ですが、同タグのheight属性にて、
height=92"
上記の通り、前のダブルクォーテーションが不足しており、
ブラウザによってはレイアウトが崩れる可能性がありますので、
height="92"
このように修正をお願いします。

Answer

ECマスターズ田中さま

お世話になります。
ありがとうございました、無事表示できました。

あんな下の方に出るんですね、買い物かごより上に表示させるには、商品説明文の中に設置するしか方法はないのでしょうか。
本日ECステーションさんよりPC版で画面左に出荷日バナーが表示される方法を教えていただき、早速設置しましたが、スマホでの表示は可能なのでしょうか。
可能でしたら、教えていただけますようお願いいたします。

Answer

ECマスターズの田中です。

＞買い物かごより上に表示させるには、商品説明文の中に設置するしか方法はないのでしょうか。

買い物かごより上の入力できる欄は商品説明文しかありませんので、
共通説明文に設置する場合は、JavaScriptを利用して移動させる必要があります。

＞本日ECステーションさんよりPC版で画面左に出荷日バナーが表示される方法を教えていただき、早速設置しましたが、スマホでの表示は可能なのでしょうか。

PC用商品ページにて、画面右に表示されている出荷日バナーのことで間違いないでしょうか。
スマホでも可能ではありますが、出荷日バナーの横幅はスマートフォンの画面の約1/3以上を占めるため、
固定表示するとお客様の利便性を大きく失う可能性がありますので
ご注意ください。

＞可能でしたら、教えていただけますようお願いいたします。

最初に、共通説明文内のタグに、class属性を追加してください。
今回は、
class="spShipBanner"
と追記していただいたことにします。

次に、商品ページ用共通説明文に、下記のタグをご記入いただくと、
画面左に固定表示することができます。

===== この下の行から ================

.spShipBanner {
position: fixed;
top: 画面上端からの距離px;
left: 画面左端からの距離px;
width: 出荷日バナーの横幅px;
height: 出荷日バナーの高さpx;
z-index: 999;
}

===== この上の行まで ================
※画面上（左）端からの距離、出荷日バナーの横幅（高さ）は、半角数字に置き換えてご利用ください。

Answer

ECマスターズ 田中さま

いつもお世話になりありがとうございます。

>出荷日バナーの横幅はスマートフォンの画面の約1/3以上を占めるため、
　 固定表示するとお客様の利便性を大きく失う可能性がありますので
 　ご注意ください。

やはりそうですね、今、下の方にオススメの表示を出しており、クーポン発行時、クーポンが見にくかったので、
これも善し悪しと思っていました。
スマホで出荷日バナーを表示させるのはどこに表示するのが一番ベストでしょうか。
今、現状ですと下の方にあり、そこまで見る方が少ないように思えます、商品説明文内ですが、商品によっては10枚
画像表示をしておりますので、それを少なくしてJavaScriptというのを利用した方がいいのでしょうか？

JavaScriptというものがまったく分かりません、勉強不足で申し訳ありませんが方法を教えてください。

またPCページも同様に、お買いものかご上あたりに〇〇円で送料無料の画像を入れたいのですが、これも同じように
JavaScriptというものを利用することになるのでしょうか。

Answer

ECマスターズの田中です。

＞スマホで出荷日バナーを表示させるのはどこに表示するのが一番ベストでしょうか。
想定外の要因もあり、一概にベストと言い切れる方法は断言できませんが、
たとえば、JavaScriptを利用して、買い物かご（正確には、項目選択肢および個数欄）の上に
移動させる方法があります。

JavaScriptは、HTMLページの中で実行できるプログラムで、
利用することでページの要素を操作することができますが、
JavaScriptを利用するために記述が必要なタグは
楽天によって禁止タグに設定されていること、
また、楽天側ではJavaScriptが使われることを考えていないため、
ページのHTMLの構造が変更され、同じプログラムが使えなくなり、
改変が必要になる可能性があることを予めご承知おきください。

以上を踏まえた上で、JavaScriptを利用した移動を行われる場合は、
最初に、下記内容で外部JSファイルを作成し、
楽天GOLD内に保存してください。
（下記内容をメモ帳に貼り付け、ファイル名の最後に「.js」をつけて保存してください）

===== この下の行から ================
jQuery(function($){
$('iframe[src*=deliveryBanner]').css('margin-left','10px').prependTo('#itemCart');
});
===== この上の行まで ================

楽天GOLD内への保存ができましたら、
下記HTMLタグを共通説明文、もしくはスマートフォン用商品説明文に
挿入することで、
ページ読み込み時に外部JSファイルに書いたプログラムが動作し、
出荷日バナーを移動させることができます。

===== この下の行から ================

===== この上の行まで ================

＞またPCページも同様に、お買いものかご上あたりに〇〇円で送料無料の画像を入れたいのですが、これも同じように
＞JavaScriptというものを利用することになるのでしょうか。

こちらは、スタイルシートを利用します。

ヘッダー・フッター・レフトナビ、もしくは商品説明文（大）の中に
下記のHTMLソースをご記入いただくことで、
個数欄、および買い物かごボタンの上に画像を挿入することができます。

===== この下の行から ================

span.unit:before { content: " "; display: block; margin-top: 7px; padding-top: 30px; width: 画像の横幅px; height:画像の高さpx; background: transparent url(画像ファイルのURL) 0 0 no-repeat; }

===== この上の行まで ================
※画像の横幅、画像の高さ、画像ファイルのURLは、実際の半角数字およびURLに置き換えてご利用ください。

Answer

ECマスターズ田中さま

休日にも関わらず、ご対応をくださいましてありがとうございます。
スマートフォンの方には、無事表示できました、とてもわかりやすくご説明くださり、すぐにできました、ありがとうございます。

PCの方ですが、レフトナビに下記のように記入いたしましが表示されません。
また画像の大きさですが大きすぎでしょうか？

span.unit:before { content: " "; display: block; margin-top: 7px; padding-top: 30px; width: 300px; height:200px; background: transparent url画像ファイルURL 0 0 no-repeat; }

Answer

ECマスターズの田中です。

＞PCの方ですが、レフトナビに下記のように記入いたしましが表示されません。

画像ファイルのURLには、前後に()が必要です。
例：url(http://sample.com/sample.jpg)
もし、()を記載されていない場合は、ご記載をお試しください。

＞また画像の大きさですが大きすぎでしょうか？

レイアウトを崩す大きさではないので、問題ないと思います。
実際に表示ができた後に、再度不自然な大きさではないかご確認いただければと思います。

Answer

ＥＣマスターズ　田中さま

お世話になります、()が抜けておりました、記載し無事表示させることができました、いつもありがとうございます。

出荷日バナー スマホに設置方法

出荷日バナー　スマホに設置方法