Yahoo!ショッピングのイベント告知君が右下に見切れています

Question

お世話になっております。

Yahoo!ショッピングに別担当者が設置したイベント告知君が
右、下で見切れていて、修正を掛けたいです。

ソースを見ると、

の位置だとわかるのですが、そもそもこれをどのファイルで規定しているかも分かっていません。

その変更箇所とともに、iPhone6などのスマホから見て、右と下に見切れないようにするための
変更ソースを数字を入れて具体的にお教えいただけますでしょうか？

よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> ソースを見ると、
> 
> の位置だとわかるのですが、そもそもこれをどのファイルで規定しているかも分かっていません。

イベント告知君ですが、現在、スマホサイズに対応する
設定がないため、
JavaScriptをご使用いただき、サイズの調整を
行っていただきたいと思います。


$(function(){
$('#ypoint_box_scroll iframe').each(function(){
$(this).css({transform: 'scale(' + Math.floor( ($(this).parent().width() / 510) * 1000 ) / 1000 + ')', transformOrigin: '0 0'});
});
});


【イベント告知君のタグ 適用できるか要確認】


としていただくことで、
画面サイズに合わせて、横幅を変更して表示していただくことができますので
お試しくださいませ。

Answer

伊藤さん

ご案内ありがとうございます。

JavaScriptを使うとのことですが、具体的に
からまでを例えばkeitaisize.jsなどとして
ストアトップにそこへのパスを記載すればいいでしょうか？

知識不足で申し訳ないですが、
素人でもわかるように順を追って教えていただけますか？

よろしくお願いします。

Answer

ECマスターズの伊藤です。

> JavaScriptを使うとのことですが、具体的に
> からまでを例えばkeitaisize.jsなどとして
> ストアトップにそこへのパスを記載すればいいでしょうか

ご連絡頂いている方法でも設置可能となっておりますが
現在、イベント告知君を設置している箇所を
ご案内しているタグに差し替えていただくだけで
ご対応いただくことができます。

Answer

伊藤さん

>ご連絡頂いている方法でも設置可能となっておりますが
>現在、イベント告知君を設置している箇所を
>ご案内しているタグに差し替えていただくだけで
>ご対応いただくことができます。

index.htmlの該当箇所を差し替えてみましたが、
【イベント告知君のタグ 適用できるか要確認】
だけが表示されるようになってしまいました。


を

$(function(){
$('#ypoint_box_scroll iframe').each(function(){
$(this).css({transform: 'scale(' + Math.floor( ($(this).parent().width() / 510) * 1000 ) / 1000 + ')', transformOrigin: '0 0'});
});
});


【イベント告知君のタグ 適用できるか要確認】

に差し替えるという理解で正しいでしょうか？

よろしくお願いします。

Answer

伊藤さん、もう１つありまして、キャッシュレス対応のイベント告知君を
設置したところ、キャッシュレスの画像表示のところで下に見切れが発生
しているようです。

キャプチャー画像を添付しますので、ご確認ください。

イベント告知君では横スクロールにして、特に設定は変えていません。

よろしくお願いします。

Answer

伊藤さん、画像がうまく添付できなかったので、再度アップします。###HR######IMG0021d92d48039f760cc5bacb2078c214a.jpegIMG0######BR###

Answer

ECマスターズの伊藤です。

> index.htmlの該当箇所を差し替えてみましたが、
> 【イベント告知君のタグ 適用できるか要確認】
> だけが表示されるようになってしまいました。

大変失礼いたしました、
【イベント告知君のタグ 適用できるか要確認】
の箇所に、イベント告知君のタグを入れていただくよう
ご案内するべきのところ、
異なったご案内となっておりました。

下記に、

を追加したタグをご用意いたしましたので
イベント告知君のタグを削除後、
下記の店舗名の箇所を修正いただき
表示させたい箇所に登録してください。

＝＝＝＝＝以下を登録＝＝＝＝＝

$(function(){
$('#ypoint_box_scroll iframe').each(function(){
$(this).css({transform: 'scale('   Math.floor( ($(this).parent().width() / 510) * 1000 ) / 1000   ')', transformOrigin: '0 0'});
});
});




＝＝＝＝＝以上を登録＝＝＝＝＝


> キャッシュレス対応のイベント告知君を
> 設置したところ、キャッシュレスの画像表示のところで下に見切れが発生
> しているようです。

イベント告知君のバナーサイズは
横468 x 縦60
となっております。
こちらと異なったサイズとなっているため
下が見切れてしまっている状態となっています。

キャッシュレス還元バナーですが、
イベント告知君(Y)の設定にございます
「キャッスレスポイント還元バナー表示」
にチェックを入れていただいておりますので、
カスタムイベントにて登録いただいたものと
設定にて表示させている、２つが表示されています。

特に意図がないようでしたら
カスタムイベントの方は、削除いただいて
よろしいかと思いますので
ご検討くださいませ。

Answer

伊藤さん、おはようございます。

カスタムイベントはファイル削除で表示されなくしました。

ただ、まだ右と下で見切れが発生します。

引き続きよろしくお願いいたします。

Answer

ECマスターズの伊藤です。


> カスタムイベントはファイル削除で表示されなくしました。

ご対応ありがとうございます。
現在、イベント告知君(Y)の設定も
オフになってしまっていますので、
こちらは、チェックボックスにチェックが入っている状態で
「反映」をクリックしてください。

イベント告知君(Y)設定ページ
https://tool.ec-masters.net/service/eventy/

※反映ボタンクリック後、反映されるまで1-2時間ほど
お時間がかかります。


> ただ、まだ右と下で見切れが発生します。

イベント告知君のタグが、修正頂いていないようです。
下記のタグに差し替えていただき、ご登録をお願いいたします。
＝＝＝＝＝以下を登録＝＝＝＝＝

$(function(){
$('#ypoint_box_scroll iframe').each(function(){
$(this).css({transform: 'scale(' Math.floor( ($(this).parent().width() / 510) * 1000 ) / 1000 ')', transformOrigin: '0 0'});
});
});




＝＝＝＝＝以上を登録＝＝＝＝＝
※店舗名の修正を忘れずにお願いいたします。

Answer

伊藤さん

右と下の見切れの件ですが、いま確認したところ、きちんとソースは入っています。

index.htmlで規定しています。

再度ご確認ください。

Answer

ECマスターズの伊藤です。

> 右と下の見切れの件ですが、いま確認したところ、きちんとソースは入っています。
> 
> index.htmlで規定しています。

確認をさせていただいたところ
修正していただいているページが
PC用ページとなっているようです。

お手数ですが、スマホ用のトップページの
修正をお願いいたします。

Answer

伊藤さん

きちんと全体を把握しておらず失礼しました。

sp/index.htmlを修正してもまだ見切れます。

後、ついでに言うと、ブランドリストを
で囲んでいるのですが、３ブランドごとに
並ばず、歯抜けになってしまっています。

これらについてアドバイスいただければ幸いです。

Answer

ECマスターズの伊藤です。

> sp/index.htmlを修正してもまだ見切れます。

大変失礼いたしました。
先にご案内している内容に、間違いがございましたので
お手数ですが、再度、下記の内容で
ご登録をお願いいたします。

＝＝＝＝＝＝＝＝＝＝

$(function(){
$('#ypoint_box_scroll iframe').each(function(){
$(this).css({transform: 'scale(' + Math.floor( ($(this).parent().width() / 510) * 1000 ) / 1000 + ')', transformOrigin: '0 0'});
});
});




＝＝＝＝＝＝＝＝＝＝
※店舗名の変更をお願いします。


> 後、ついでに言うと、ブランドリストを
> で囲んでいるのですが、３ブランドごとに
> 並ばず、歯抜けになってしまっています。

float:leftで横並びを指定頂いていると思いますが
高さ指定が無いため
２段め以降は、高さが一番低いところに
回り込んでしまうという現象が起こっています。

こちらを回避するために
・liに高さを指定する
・画像の高さを揃える
など、高さの調整をお願いします。

また、上記をご対応頂いても
一番最初のliのみ、margin(余白）を削除する
ご指定を頂いているため、
画像＋余白が2段め以降
枠より大きくなってしまい

[画像] [余白 画像][余白 画像]
＝＝＝＝
[余白 画像][余白 画像]
[余白 画像]

といった具合に回り込んでしまいます。

そのため、liの余白や
横幅の調整をお願いいたします。

Answer

伊藤さん

アドバイス通り、変更しましたが、まだ見切れます。。。

後、liの高さ指定はheight="80"などとすればいいでしょうか？

急場しのぎで高さの高いブランドは後ろに持ってきました。

もう少しお付き合い下されば幸いです。

Answer

ヨーコさん

ECマスターズの小野です。

いただいたご質問ですが、
担当に確認しまして改めて回答させていただきますので、
少々お待ちくださいませ。

Answer

ECマスターズの伊藤です。

> アドバイス通り、変更しましたが、まだ見切れます。。。

ご対応いただき、ありがとうございます。

確認させていただいたのですが、内容に間違いがないにも関わらず
うまくJavaScriptが適用できていないようですので
ご迷惑おかけいたしますが、
原因を確認しますので少々お時間を頂戴したいと思います。


> 後、liの高さ指定はheight="80"などとすればいいでしょうか？

float: left;をご指定頂いてるため

では、高さの調整が効かないようです。

sp/css/style.css 
424行目あたりに記述頂いている
.megamenuの設定に、clear:bothを追加してみて
いただけますでしょうか。

.megamenu{
	width:100%;
	margin:1.923% 0 0 0;
	clear: both; /* 追加 */
}

Answer

伊藤さん

liの高さ調整の方はうまくいきました。

後はイベント告知君の方をよろしくお願いします。

Answer

ECマスターズの田中です。

> 後はイベント告知君の方をよろしくお願いします。

sp/index.htmlの内容を確認したところ、
タグを記載した時点で
動作に必要なjQueryが読み込まれておらず、
エラーが発生しておりました。

伊藤からご案内差し上げた からまでの内容を、
index.htmlのタグの直前に
移動していただきますようお願いします。

Answer

田中さん

ありがとうございます。

バナーサイズはこれで解消されましたが、
下の期間が若干見切れています。

ご確認の上、ご指導よろしくお願いします。

Answer

ECマスターズの田中です。

> 下の期間が若干見切れています。

こちらにつきましては、
楽天の横スクロール版と同様の修正を
ECマスターズにて行わせていただきましたので、
お手数ですが、改めて表示をご確認いただきますようお願いします。

Answer

田中さん

ようやく表示が直りました。

お手数をおかけしました。