スマホイベントバナーなどの設置位置について

Question

お世話になります。

現在、スマホ商品ページ共通パーツ設定に下記を設置していますが、下の方に表示されてしまいます、
下記２点ご指導をお願いいたします。
以前に同じようなことをご指導いただいておりますが、
https://forum.ec-masters.net/post_view.php?id=6431
内容が変わるとどこをどのように変更すればいいのか分からなくなります。

再度ご指導をお願いいたします。

1）スマートフォンでフリック画像の上に下記ママ割のバナーを表示する方法
 



2）フリック画像の下にＥＣステーションさんの出荷日バナーを設置しており、出荷日バナーの上か下に
御社のHTMLタグ作成フォームで使わせていただいてます、スマホ用のイベント告知君を設置する方法

Answer

ECマスターズの田辺です。

1）2）を同時に商品画像の上に表示させる方法を
ご案内させていただきます。

１：
1）2）それぞれの先頭タグ内にclass名をつけていただきます。

例）
ママ割
 
　↓
 

イベント告知君

Answer

ＥＣマスターズ 田辺さま

お世話になります。
イベント告知君は表示されました、ありがとうございます。
ママ割の方ですが、 「"a" の属性 "class" が入力されています。」とエラーの表示が出ます、
再度ご指導をお願いいたします。

Answer

ECマスターズの田辺です。

ひとつご案内が足りていませんでした。
申し訳ございません。

ママ割のとに
それぞれ「 =""」を入れていただくことで
classを入れることができますので
以下のようにご変更をお願いいたします。

Answer

ECマスターズ　田辺さま

お世話になります。
無事表示できました、ありがとうございます。

表示させているバナーの上にバナー1個分ぐらいの隙間が出来るのですが、これは詰めることはできますでしょうか。

また、今は、2つのバナーを表示させていますが、
1つのバナーの際は
before($('.hahanohi'),$('.eventkokuchi'));
のどちらかを削除すればいいのでしょうか。

Answer

ECマスターズの田辺です。

隙間はバナーによるものではなく、
共通パーツ設定にて以下のタグを設定されていることで
余分な隙間が作られておりました。



タグを削除していただくことで
きれいに表示されるかと思いますので
お試しくださいませ。

Answer

ECマスターズ 田辺さま

お世話になります。
ありがとうございました、タグの削除にて隙間がなくなりました。

何度も同じ内容で申し訳ありませんが、再度ご指導ください。
フリック画像の上に、ママ割バナーとイベント告知君を表示させていますが、
ママ割期間中はママ割バナーとGWのお知らせ画像ををフリック画像の上に表示させたいと思います。
イベントバナーと発送の目安のバナーをフリック画像の下に表示させたいので、表示の仕方を教えてください。

上記のやり方で、試してみましたが、リンクバナーではないimg タグ（休暇のお知らせバナー）の場合どのようにすればいいか分かりません。

Answer

ECマスターズの田辺です。

＝この下から＝＝＝＝＝＝＝＝
jQuery(function($){
$('#itemImageSlider').before($('.hahanohi'),$('.eventkokuchi'));
});
＝この上まで＝＝＝＝＝＝＝＝

というのが、
フリック画像（#itemImageSlider）の上（.before）に
ママ割（.hahanohi）とイベント告知君（.eventkokuchi）を
移動させるという指示ですので、

フリック画像の下に移動させる場合は.beforeではなく
.afterを使って記述します。

また、GWのお知らせ画像と発送目安のバナーにも
同様に指示をするためにclassをつかって名前をつけます。

リンクバナーではない場合にはimgタグの中に
classを入れていただいて構いません。
その際に「 =""」も一緒に入れていただきますようお願いいたします。
※前後に半角スペースを入れてください。

例えば、
GWのお知らせ画像を「gw」、
発送目安のバナーを「hassoubi」という名前にした場合は
JSファイル内の記述は以下のようになります。

＝この下から＝＝＝＝＝＝＝＝
jQuery(function($){
$('#itemImageSlider').before($('.hahanohi'),$('.gw'));
$('#itemImageSlider').after($('.eventkokuchi'),$('.hassoubi'));
});
＝この上まで＝＝＝＝＝＝＝＝

Answer

ECマスターズ 田辺さま

お世話になります。
jQuery(function($){
$('#itemImageSlider').before($('.hahanohi'),$('.gw'));
$('#itemImageSlider').after($('.eventkokuchi'),$('.deliveryBanner'));
});
にて表記し、確認画面へ進めると全部表示されているのですが、スマホでみると
ママ割とイベント告知君しか表示されません。
GWバナーは
にて設置しましたが、何が間違っているかご指導をお願いします。
また出荷日バナーも表示されないのは、deliveryBanne　という名前が間違っているからなのでしょうか。

Answer

ECマスターズの田辺です。

まず、GWバナーにつきましては
クラスの書き方が間違っておりましたので
以下のように修正をお願いいたします。

誤）class="=gw"
正）class="gw"

そして、出荷日バナーは
iframeタグの中にクラス名が入っておりませんでしたので、
deliveryBannerであれば
同じようにclass="deliveryBanner"を
入れていただきますようお願いいたします。

Answer

ECマスターズ　田辺さま

何度もありがとうございます、無事設置出来ました。
.before・.afterのことなど分かりやすくご指導いただきましてありがとうございます。

出荷バナーは、iframeの後にスペースをたくさんつける方法で設置しておりました、
出荷日バナーを単独で表示する場合は、ESステーションさんで作成したものがGOLDにアップされるため、今までの方法、2画像を表示させる場合は、今回の方法で設置するという解釈で合っているでしょうか。
また何かの機会にご指導をお願いいたします。

Answer

ECマスターズの田辺です。

無事に設置できたようでよかったです。

ご質問いただいている内容は、
iframeを設置する方法のことでよろしいでしょうか。

iframeやclassのように
スマホページでは禁止タグや禁止属性が多くございますので、
エラーを回避して入力できるようにする方法がございます。

その方法の１つとして
開始タグと終了タグに「 =""」を入れる方法をご案内しておりますが、
https://club.ec-masters.net/index.php?design_page5

スペースをたくさんつける方法も
同じような効果がございますので
基本的にはどちらの方法をご利用いただいても構いません。

Answer

度々申し訳ございません、Yahoo！　PCとスマホでTOPページ・各商品ページにてGW休暇のお知らせを表示させる方法をご指導ください。
Yahoo!はつい最近オープンさせたばかりで、PC  TOPページでは表示させましたが、PC、スマホともに各商品ページでの表示の方法が分かりません。

Answer

ECマスターズ　田辺さま

iframeの件、ありがとうございます。
どちらの方法でも大丈夫とのこと、承知いたしました。

https://club.ec-masters.net/index.php?design_page5
自分のしたいことのタグの種類が変わるとピンとこなくて当てはめることが出来ずにおりましたが、
今回ご指導いただき、意味がようやく理解出来ました。
（おそらく理解出来たと思います。）
ご丁寧なご指導ありがとうございます。

Answer

ECマスターズの田辺です。

yahoo!では、
楽天と同様にヘッダーに入れていただくことで
PCにて各商品ページにGW休暇のお知らせを表示させることができます。

ヘッダーはこちらより編集することができます。
ストア構築 ＞ ストアデザイン ＞ ヘッダー・看板

スマホで表示させる場合は、
「バナースペース」を設定していただくことで
各商品ページにて共通で表示させることができます。
https://store-info.yahoo.co.jp/s/shopping/toolmanual/design/l/576.html
ストア構築 ＞ ストアデザイン ＞ スマートフォン商品ページ

しかし、フッターに表示され、
楽天のように上部に移動させることができかねますので
どうしても上部に表示させたい場合には
お手数ですが各商品ページのスマートフォン用情報に
お知らせバナーを入れていただきますようお願いいたします。

Answer

ECマスターズ　田辺さま
Yahoo!では、ヘッダー・看板のヘッダー共通設定デザインですが、
看板の下にフリースペースパーツがありますが、その部分にimgタグを入れるのでしょうか。

Answer

ECマスターズの田中です。

> 看板の下にフリースペースパーツがありますが、その部分にimgタグを入れるのでしょうか。

はい、その部分に入れていただきますようお願いします。
（並べ変えて、看板の上に出すことも可能です）

Answer

ECマスターズ田中さま

お世話になります、無事設置出来ました、遅い時間までご対応いただきありがとうございます。

スマホ イベントバナーなどの設置位置について

スマホイベントバナーなどの設置位置について