スマホ共通説明文リンク画像設置について

Question

お世話になります。
以前にスマホに設置の出荷日バナーを移動させるHTMLソースをご指導いただきました。
https://forum.ec-masters.net/post_view.php?id=3344
現在、上の方に設置しています出荷日バナーのところにスーパーセールのセール会場ページへのリンク画像を設置したいのですが、HTMLソースをご指導お願いいたします。

Answer

昨日、ECコンサルタントよりスマホにこれを作ってくださいとメールを送ってきてくれました。

https://www.cyber-records.co.jp/blog/web/html/modal_window/

スマートフォンの商品ページで表示させたく 、試みましたが
 まず、

上記、任意のファイル場所とは何を意味しているのでしょうか。
セールページのURLか、もしくはリンクさせる画像のことなのか分かりません。
 またcssは、同じくスマートフォンの商品ページ共通説明文のところに記載でいいのでしょうか。

セール会場へのリンク画像を表示させたく、試みましたが、 「不適切なデータが含まれている可能性があります。」という表示がでて、進めません。

商品ページ、商品画像のすぐ下に出荷日バナーを貼り付け、ご指導いただいて表示出来てますので
その箇所に、リンク画像を貼り付けた方がすっきりしていていいと思うのですが、インパクトのある
「モーダルウィンドウ」というものの方がいいのか分かりませんが、
両方の設置の仕方をご指導いただけますようお願いいたします。

Answer

ECマスターズの田中です。

内容をまとめてご案内いたしますので、
今しばらくお待ちいただきますようお願いします。

Answer

ECマスターズの田中です。

１つずつ、回答させていただきます。

＞現在、上の方に設置しています出荷日バナーのところにスーパーセールのセール会場ページへのリンク画像を設置したいのですが、HTMLソースをご指導お願いいたします。

つまり、商品名の上に表示させている出荷日バナーを削除して、
代わりに、セール会場ページへリンクしたバナーを設置されたい、
ということでよろしいでしょうか。

その場合、出荷日バナー移動の仕組み自体から
変更を行う必要がございます。

最初に、
GOLDに設置された「sm-delivery.js」の内容を
下記内容に差し替えてください。

= この下の行から ====================
jQuery(function($){
/* 出荷日バナーをかごボタン上に追加 */
$('iframe[src*=deliveryBanner]').css('margin-left','10px').prependTo('#itemCart');
/* セール会場ページへリンクしたバナーを商品名上に追加 */
$('#beforeItemName').prependTo('#itemName');
});
= この上の行まで ====================

次に、下記内容を、スマートフォン用の商品ページ共通説明文に
挿入していただくことで、
セール会場のバナーを、商品名上に表示させることができます。

= この下の行から ====================





= この上の行まで ====================
※セール会場ページのURL、バナー用画像ファイルのURLは、
　実際のURLに置き換えてご利用ください。
※たとえば、バナーを画面いっぱいに表示させるために
　タグに width="100%" 属性を追加するなど、
　見た目の調整は、別途追記して実施をお願いします。

Answer

ECマスターズの田中です。

＞上記、任意のファイル場所とは何を意味しているのでしょうか。
＞セールページのURLか、もしくはリンクさせる画像のことなのか分かりません。

keiさんにて作成していただいた（下記で作成していただく予定の）、
外部CSSファイルのファイル名を意味しております。

CSSは、ページ中にタグで記載するだけではなく、
１つのファイルとして保存しておき、
複数のページで、同じファイルからCSSを読み込むことができます。

ファイルに保存されたCSSを読み込むために使われるのが、
今回ご相談いただいたタグです。
詳しくは、下記ページをご参照ください。
http://www.tagindex.com/stylesheet/basic/setting1.html

＞cssは、同じくスマートフォンの商品ページ共通説明文のところに記載でいいのでしょうか。

楽天GOLDにて、外部CSSファイルとしてご用意ください。

CSSの内容をメモ帳に貼り付け、必要に応じて内容を編集していただいた上で、
ファイル名の末尾を「.css」に設定して保存の上、
楽天GOLDにアップロードしていただく、という流れになります。

Answer

田中さま

いつもお世話になります。
モーダルウィンドウの件ですが、ありがとうございました。
外部CSSファイルのファイル名　そうですね、教えていただくと  「.css」となっているのは、.cssのファイル名なんですね。
昨晩、何度もエラーで進めず、もしかしてCSSの記述ってGOLDにアップするのかな・・と下記、そのまま「modal_window.css」というファイル名にしてGOLDにアップはしています。

 ==================== ==================== ====================

input#modal {
	display: none;
}
input#modal + label {
	width: 100%;
	height: 120%;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2147483646;
	background: rgba(0, 0, 0, 0.5);
	cursor: pointer;
}
input#modal + label div {
	position: fixed;
	width: 300px; /*画像の横幅*/
	top: 50%;
	left: 50%;
	margin: -217px 0 0 -150px; /*画像の高さと幅の半分 marginをマイナス */
	background: none;
	border: none;
}
input#modal + label div::before {
	content: "× Close";
	position: absolute;
	bottom: -25%;
	right: 50%;
	margin: 0 -60px 0 0;
	font-size: 3em;
	font-weight: bold;
	color: #ffffff;
}
input#modal:checked + label {
	display: none;
}

 ==================== ==================== ====================

それで先ほど、下記タグをスマホ商品ページ共通説明文に貼り付けしたのですが、
「許可されていないURLの記載があります」と出ます。
何がいけないのでしょうか。

Answer

出荷日バナーをしないで、出荷日バナーの上か下に、セール会場ページへリンクしたバナーを設置することは出来ますか？
セールが終わりましたら、再度出荷日バナーを表示させたいのですが、
ご指導いただいた内容に変更後、セール終了後に、変更前（今の「sm-delivery.js」の内容）に再度変更すればいいのでしょうか。

Answer

ECマスターズの田中です。

＞下記タグをスマホ商品ページ共通説明文に貼り付けしたのですが、
＞「許可されていないURLの記載があります」と出ます。
＞何がいけないのでしょうか。

外部CSSファイルのURLに誤りがございます。
外部CSSファイルは、楽天GOLD内のファイルになりますので、
URLも他の楽天GOLDと同様、
http://www.rakuten.ne.jp/gold/aloha-hawaii-mau/
から始まります。
「298921」を「aloha-hawaii-mau」に置き換えていただきますようお願いします。

＞出荷日バナーの上か下に、セール会場ページへリンクしたバナーを設置することは出来ますか？

はい、可能です。
　と　　の
間に挟まれたHTMLソースが、
そのまま商品名の上に表示されますので、

「sm-delivery.js」に含まれる
$('iframe[src*=deliveryBanner]').css('margin-left','10px').prependTo('#itemCart');
を、
$('iframe[src*=deliveryBanner]').css('margin-left','10px').prependTo('#itemCart, #beforeItemName');
に修正していただくことで、
の先頭にも
出荷日バナーを複製することができます。

＞セールが終わりましたら、再度出荷日バナーを表示させたいのですが、
＞ご指導いただいた内容に変更後、セール終了後に、変更前（今の「sm-delivery.js」の内容）に再度変更すればいいのでしょうか。

はい、「sm-delivery.js」の内容、
およびスマホ商品ページ共通説明文に追記していただいた内容を
元の状態に戻していただければ結構です。

Answer

田中さま
IDとはそういうことだったのですね。
下記で設置してしてみましたが、やはり「許可されていないURLの記載があります」と表示されます。

Answer

ECマスターズの田中です。

失礼いたしました、
http://www.rakuten.ne.jp/gold/aloha-hawaii-mau/modal_window.css
の先頭が「http://」になっておりましたので、
「https://」に修正をお願いいたします。

Answer

田中さま

これぐらいのことも気がつかない自分が情けなく感じます、ありがとうございます、無事に
設定完了の画面にいくことが出来ました。

が、どんな風に出てるのか確認したところ、「ショップの人気商品ランキング」の下「この商品の発送方法」の上に表示されています。

想像していた予定のイメージ、場所が異なるのですが、これはどうしてでしょうか、
モーダルウィンドウというものの表示をするには、どのようにすればいいのでしょうか。

商品ページ設定（スマートフォン）の商品ページ　共通パーツ設定は下記ですが、関係ありますでしょうか？

商品ページ　共通パーツ設定
大バナーエリア表示　表示する
大バナーエリアのデザイン　フリック型
小バナーエリア表示　表示する
小バナーエリアのデザイン　フリック型
目玉商品表示・商品ページ共通説明文表示　表示する

Answer

ECマスターズの田中です。

https://www.rakuten.ne.jp/gold/aloha-hawaii-mau/modal_window.css
をブラウザで直接確認したところ、
「ページが表示できません」エラーが発生いたしました。

「modal_window.css」は、確かにアップロードされておりますでしょうか。
GOLDの中に、フォルダを作成して、その中に保存されておりませんでしょうか。
以上、ご確認いただきますようお願いします。

＞商品ページ設定（スマートフォン）の商品ページ　共通パーツ設定は下記ですが、関係ありますでしょうか？
こちらは、モーダルウィンドウの動作に関係する可能性はかなり低いです。

Answer

田中さま

ゴールドの  /css のところに保存されていますが・・・
Ribrary　アップロードをクリックしてmodal_window.cssを取り込みました。
保存するのではないということでしょうか、アップロードとはどういう風にすればいいのでしょうか、
すみません、アップロードと保存の違いがまったく理解出来ていないです。

Answer

ECマスターズの田中です。

＞ゴールドの /css のところに保存されていますが・・・
承知しました。
その場合、URLをご変更いただく必要がございます。

楽天GOLDに接続した直後に見える場所は
https://www.rakuten.ne.jp/gold/aloha-hawaii-mau/
というURLで示すことができ、
その下にあるフォルダは、/区切りでフォルダ名を記載していくことで
表現することができます。

たとえばイベント告知君は、
楽天GOLDの「rpoint_box」フォルダの中に
「rpoint_box.html」という名前で保存されておりますので、

先程のURLに、
「rpoint_box」フォルダであることを示す「rpoint_box/」と
ファイル名の「rpoint_box.html」を加えて、
https://www.rakuten.ne.jp/gold/aloha-hawaii-mau/rpoint_box/rpoint_box.html
が、正しいURLになります。

今回の「modal_window.css」も、
楽天GOLDの「css」フォルダに保存されておりますので、

https://www.rakuten.ne.jp/gold/aloha-hawaii-mau/
に「css」フォルダであることを示す「css/」と
ファイル名の「modal_window.css」を加えて、
https://www.rakuten.ne.jp/gold/aloha-hawaii-mau/css/modal_window.css
が、正しいURLとなります。

Ribraryをご利用でしたら、楽天GOLD内のファイルのURLを
かんたんにコピーすることができますので、
今後同様のケースが発生しましたら、
Ribraryにて、ファイルのURLをコピーしていただくと、一番確実です。

Answer

田中さま

お世話になります。
ファイル名ではなく、RibraryのURLをコピーしてそれを貼りつけないといけないのですね、
すみません、ありがとうございます。

画像ですが、表示はされましたが、　「×close」が「～close」になり、画像と重なってしまっています、これはcssの下記の部分の変更で合っていますでしょうか、高さはどこを変更するのでしょうか

input#modal + label div::before {
	content: "× Close";
	position: absolute;
	bottom: -25%;
	right: 50%;
	margin: 0 -60px 0 0;
	font-size: 3em;
	font-weight: bold;
	color: #ffffff;

Answer

ECマスターズの田中です。

＞「×close」が「～close」になり、

CSSファイルを読み込む際、文字化けを起こしていることが原因です。

「modal_window.css」の先頭に、文字コードを指定する
@charset "Shift_JIS";
をご記載ください。

＞画像と重なってしまっています

まずは、
font-size: 3em;
を
font-size: 12pt;
にご変更いただき、
文字の大きさ変更でご対応いただけるか、ご確認ください。

Answer

田中さま

ありがとうございました、無事設置出来ました。
いつもお世話になりありがとうございます。

お忙しい中、ありがとうございました。
あらたにPCに縦帯バナーの貼り付け方をご指導いただきたく、別でご質問させていただきます。
ESステーションさんの方で、縦帯バナーの付け方のタグ詳細の紹介がありましたが、左につけるバナーが
カテゴリメニューの上にかぶさってしまいます。
そんなこともあり、右に貼り付ける方法をお伺いさせていただいてますが、ご連絡がないため、検索で調べてようやく先ほど右は設置出来ました。
右だけでもいいと思いますが、今後のためにも左に縦帯バナーの貼り付け方をご指導いただきたく質問させていただきます。

Answer

ECマスターズの田中です。

＞左に縦帯バナーの貼り付け方

必要なスタイルシートは既に設置されておりますので、
右縦帯バナーが挿入されているとの間に、


 

上記タグを挿入していただければ結構です。

＞左につけるバナーが
＞カテゴリメニューの上にかぶさってしまいます。

スタイルシートに、
バナーがコンテンツと被りそうになったら
非表示にするための設定がございますので、
こちらの修正をお願いいたします。

具体的に申し上げますと、
〜の中にある
@media screen and (max-width: 1220px) {
の「1220」の数字を変えることで調整できます。
（この場合、ブラウザの横幅が1220px以下になると、縦帯バナーが非表示になります）

カテゴリメニューに被りそうになったら非表示になるよう、
数字の調整を行っていただきますようお願いします。

Answer

配達1回で受け取るとポイント2倍のリンクバナーと
プラチナ会員・ゴールド会員の777円OFFクーポンバナーをスマホの上の方の出荷日バナーの上か下に
設置したく
ご指導いただいたように
「sm-delivery.js」に含まれる
$('iframe[src*=deliveryBanner]').css('margin-left','10px').prependTo('#itemCart');
を、
$('iframe[src*=deliveryBanner]').css('margin-left','10px').prependTo('#itemCart, #beforeItemName');
に変更してsm-delivery.jsの名前でゴールドにアップロードしました。

下記をスマホの「商品ページ共通説明文」に設置したところ
「許可されないHTMLタグ "a" の属性 """ が入力されています。」と表示が出てエラーになります。
どのようにすれば、商品画像上の出荷日バナーの付近に、出荷日バナーと他のバナーを表示させることができるのでしょうか、再度ご指導をお願いいたします。

Answer

ECマスターズの田中です。

いただいたソースに対して、３点、修正をお願いいたします。

１点目ですが、
原則として、同じページの中に同じID属性を持つ要素は１つだけでなければなりません。
いただいたソースの場合、
 と  の括りが３つ存在してしまいます。
元々、一つにまとまった形を想定しておりますので、
先頭と末尾以外に２つ含まれている




を、削除していただきますようお願いします。

２点目ですが、

Answer

田中さま

お世話になります。
ありがとうございました、無事表示させることが出来ましたが、現状、人気商品ランキングの下に表示されています、上の方の商品画像の下の出荷目安表示バナーのところに表示させたいので、再度ご指導をお願いいたします。

Answer

ECマスターズの田中です。

現在は、いわゆる「セール中」の状態、
つまり  〜  が存在する状態と
なっておりますので、

「sm-delivery.js」の内容は、最初の返信でご案内差し上げた

= この下の行から ====================
jQuery(function($){
/* 出荷日バナーをかごボタン上に追加 */
$('iframe[src*=deliveryBanner]').css('margin-left','10px').prependTo('#itemCart');
/* セール会場ページへリンクしたバナーを商品名上に追加 */
$('#beforeItemName').prependTo('#itemName');
});
= この上の行まで ====================

上記の状態である必要がございます。
（上記ソースの５行目にある命令で、バナーを商品名上に移動させております）

上記の状態からさらに、２・３行目の

/* 出荷日バナーをかごボタン上に追加 */
$('iframe[src*=deliveryBanner]').css('margin-left','10px').prependTo('#itemCart');

を

/* 出荷日バナーをかごボタン上と商品名上に追加 */
$('iframe[src*=deliveryBanner]').css('margin-left','10px').prependTo('#itemCart, #beforeItemName');

にご変更いただくことで、
出荷日バナーとリンク付きバナーの両方が、商品名上部に表示されるようになります。
（/* と */で囲まれた部分はコメントと呼び、実際の動作に影響しない部分ですので、
　分かりやすい表現に変えていただいても結構です）

このように、
 〜   の有無によって
「sm-delivery.js」の内容を切り替える必要がございます。

セールの開始・終了ごとに有無を切り替えられる際は、
「sm-delivery.js」に含まれる各命令の意味をご理解いただいた上で
切り替え作業を行っていただくことで、
今回のようなトラブルを防ぐことができますので、
可能な限り命令の意味をご理解いただいた上で、
作業を行っていただきますようお願いいたします。

Answer

理解度が低くご迷惑をおかけし、申し訳ございませんでした。

Answer

お世話になります。

ご指導いただきました内容、
jQuery(function($){
/* 出荷日バナーをかごボタン上と商品名上に追加 */
$('iframe[src*=deliveryBanner]').css('margin-left','10px').prependTo('#itemCart, #beforeItemName');
/* セール会場ページへリンクしたバナーを商品名上に追加 */
$('#beforeItemName').prependTo('#itemName');
});

セールの際に、上記にてjsファイルを書き換えましたが、出荷日バナーが商品画像の下に表示されませんでした。何がだめで表示されないのか分かりません。

今回、年末年始のお知らせ表示も商品画像下に表示させたく、再度チャレンジしてみましたがやはり下の方にしか表示されませんでした。（リンクなしの場合がわからなかった為、リンクURLはTOPページ
にて）

上記、出荷日バナーとリンクなしのバナー2つを商品画像下に表示させる方法は

/* セール会場ページへリンクしたバナーを商品名上に追加 */
$('#beforeItemName').prependTo('#itemName');

を除いて作成すればいいのでしょうか。

今は、ECコンサルタントさんに教えていただいた










　　　　　　　　

にて、をなしにしてお休みのお知らせを商品画像上に表示出来ているので急ぐ訳ではありませんが、画像下に表示出来る方法を覚えておきたいと思いますのでよろしくお願いします。

それと
出荷日バナーだけでも再度表示のため
jsファイルを下記内容に戻し、GOLDに上書きしましたが、商品画像の下に表示されません。
現在、項目選択肢の上に表示されています。

jQuery(function($){
$('iframe[src*=deliveryBanner]').css('margin-left','10px').prependTo('#itemCart');
});


スマホ商品ページ共通説明文

 

ご面倒おかけいたしますが、再度ご指導をお願いいたします。

Answer

ECマスターズの田中です。

＞セールの際に、上記にてjsファイルを書き換えましたが、出荷日バナーが商品画像の下に表示されませんでした。何がだめで表示されないのか分かりません。

恐れ入りますが、実際に表示されない様子を確認しないと
原因をお調べすることができませんので、
ご了承のほどよろしくお願いいたします。

＞上記、出荷日バナーとリンクなしのバナー2つを商品画像下に表示させる方法は
＞（中略）
＞を除いて作成すればいいのでしょうか。

こちらのソースは除かないようお願いします。

全体の流れを改めてご説明させていただきますので、
改めて１つずつご確認いただきますようお願いします。

今回のリンクなしバナー、および出荷日バナーは
全商品ページ共通で表示させたいため、
まずは商品ページ用共通説明文に、各バナーを設置いたします。

ですが、このままですと
ページのかなり下方に設置されてしまいますので、
JavaScriptを利用して、上方に移動させている、
という仕組みになっております。

今回いただいた

/* セール会場ページへリンクしたバナーを商品名上に追加 */
$('#beforeItemName').prependTo('#itemName');

上記JavaScriptソースも、
とで
囲まれた部分（つまり、リンクなしのバナー）を
商品画像の下（正確には、商品名の上）に移動する、
という役割を持っておりますので、
消してしまうと、商品画像の下にバナーが表示されなくなってしまうのです。

商品画像下のバナーに対して、リンクを設定しているのは、
との中で、
各バナー用のタグを囲んでいる
 および  各タグですので、
このタグを削除することで、画像にリンクが設定されなくなります。

＞出荷日バナーだけでも再度表示のため
＞jsファイルを下記内容に戻し、GOLDに上書きしましたが、商品画像の下に表示されません。
＞現在、項目選択肢の上に表示されています。

元々、項目選択肢の上にだけ表示される設定でしたが、
今後も継続して商品画像の下に表示させたい、
ということでよろしいでしょうか。

その場合は、jsファイルを下記の内容でご設定ください。

jQuery(function($){
$('iframe[src*=deliveryBanner]').css('margin-left','10px').prependTo('#itemCart, #itemName');
});