スマホファーストビューに発送日バナーとスライドバナーの設置方法について

Question

スマホページのファーストビューにECステーションさんのスライドバナーを設置したいのですが、
発送日バナーも一緒に表示させる方法はありますでしょうか。
発送日バナーの種類（横長など）に変更して2段スライドバナーの下に出荷日バナーを表示、もしくはスライドバナーの中に発送日バナーを入れることは無理でしょうか。

発送日バナーの右横スペースにお知らせやクーポンなど表示させるのに毎回悪戦苦闘しています、
ASTRAさんのシステムで表示が可能なようで申し込みも検討しておりますが、設置時に簡単な説明は
あるようですが納品後のサポートはないようなので、不安もあり検討中です。

Answer

ECマスターズの田中です。

スライドバナーと発送日バナーを一緒に表示させたい場合は、
発送日バナーの種類をご変更の上、
スライドバナー・発送日バナーを２段で表示させるのが
わかりやすいかと思います。

発送日バナーをご変更される際は、ぜひ
ECマスターズのツールボックスに含まれる
「スマホ用出荷日バナー」をご利用ください。
https://manual.ecsystem.jp/212/

PC用を想定した通常の「出荷日バナー」と異なり、
スマートフォンで画面横幅いっぱいに表示されることを
想定した作りになっておりますので、
右横スペースについてご検討いただく必要がなくなるかと思います。

もし、ファーストビューに移動させる方法が分かりづらい場合は、
ファーストビューに表示させる内容を
予めdivタグで囲んでおき、
（例として、 と  で囲んだとします）

JavaScriptを
$('#itemImageSlider').before($('.showFirstView'));
のように、divタグごとファーストビューに移動させる形にご変更いただくことで、
今後編集される際もわかりやすくなるのでオススメです。

Answer

いつもお世話になっております。
お休みの日にご返信をいただきありがとうございます。

「スマホ用出荷日バナー」「スライドバナー」はTOPページでは使用しています。
TOPページでの個々での貼り付けはタグをコピーして張り付けるだけですので
スキルのない私でも出来るのですが、商品ページでの2種類・3種類の表示が
悪銭苦闘して設置してもずれてしまったり、スムーズに出来ません。
ですが、LIVEで清水さんがおっしゃってる通り、スマホのTOPページにはアクセスが
ないこともあり、商品ページで表示させたく、再度ご教示お願いいたします。

TOPページで使用
スマホ用出荷日バナー
出荷日バナー

新しく作成する商品ページ用スライドバナー



予め と  で囲む場合
下記の表記ということでよろしいでしょうか。

出荷日バナー


そして
画像上にスライドバナーとスマホ用出荷日バナー、画像下に御社のイベント告知君を表示させるために
JSファイルでGOLDにアップするのは、下記で合ってますでしょうか。

$('#itemImageSlider').before($('.showFirstView1'),$('.deliverySmp'));
$('#itemImageSlider').after($('.eventkokuchi'));
});


スマホの商品ページ共通説明文に記載タグですが、デザインレシピを見させていただくと



とありますが、

Answer

ECマスターズの田中です。

> 予め と  で囲む場合
> 下記の表記ということでよろしいでしょうか。

はい、いただいた表記で結構です。

> 画像上にスライドバナーとスマホ用出荷日バナー、画像下に御社のイベント告知君を表示させるために
> JSファイルでGOLDにアップするのは、下記で合ってますでしょうか。

画像上に移動させるのは、
 〜  の内容ですが、
$('#itemImageSlider').before($('.showFirstView1'),$('.deliverySmp'));
ですと、class="showFirstView1" と class="deliverySmp" のついたタグを上に移動させる動作となってしまい、
showFirstView1もdeliverySmpも無いため、何も移動できなくなってしまいます。
正しく「showFirstView」を上に移動させるために、上記１行の代わりに
$('#itemImageSlider').before($('.showFirstView'));
とご記載いただきますようお願いします。

> ECステーションさんのスライドバナー作成にあたり
> デザインレシピで「304pxより小さいサイズで作成して」とありますので

こちらは、作成したスライドバナーを、
サイズ調整なくしてそのまま表示させる場合のご案内です。

keiさんのスライドバナーでは、
style="width:100vw; height:calc(60px + (100vw * 165) / 616);" 
のように、横幅いっぱいに表示させるためのスタイルシートが
すでに適用されております。

ソースから、横幅616x高さ165のバナーを設置するための
設定であると推測されますが、
もし、既存のスライドバナーがあればそれと同じサイズ、
わからない場合は616x165にてバナーを作成していただきますようお願いします。

Answer

お世話になります、早々のご返信ありがとうございました。
１行目スライドバナーと出荷日バナーの表示は
$('#itemImageSlider').before($('.showFirstView'));
だけでいいのですね、２つの表示をする場合、,$('.deliverySmp'));もいると思ってました、確認出来て
よかったです、ありがとうございます。
ちなみにこれは と で
囲んでいる からという認識でも大丈夫でしょうか。

スライドバナーは、そのバナーのURLの確定、確認をしたかったので、素材画像に入れていた関係のない画像を使って仮のバナー作成でしたのでした、幅の大きめの画像になってしまいました、すみません。
幅の長い画像を使ってもレスポンシブにチェックを入れれば、横幅いっぱいに表示されるということですね、仮の画像を使っての連絡ですみません。
新しく同じサイズでバナー作成いたします。
バナー完成後、設置してみて上手く表示できない場合は、再度こちらのページで質問させていただきますのでご教示いただけますようお願いいたします。

休日にも関わらす、ご対応をいただきましてありがとうございました。

Answer

ECマスターズの田中です。

> ちなみにこれは と で
> 囲んでいる からという認識でも大丈夫でしょうか。

はい、囲んでいるので、囲んだぶんがまるごと移動する形になります。
また問題などございましたら、当質問への返信にてお知らせくださいませ。

Answer

お世話になります。
下記、商品ページ　共通パーツ設定に貼り付けました、商品画像の上下に表示したいのですが、商品ページの下の方にしか表示されません。
何が間違っているのか、ご教示お願いいたします。




出荷日バナー

Answer

ECマスターズの田中です。

「showFirstView.js」の１行目に必要な記述が削除されておりましたので、
jQuery(function($){
を、一行目として挿入していただきますようお願いします。

Answer

ありがとうございました、無事表示できました。