モーダルウィンドウの具体的な設置について。（楽天）

Question

フォーラム内の過去の質問でもありましたが、よくわからなかったので、具体的に質問いたします。
モーダルウィンドウの設置方法を教えてください。

設置場所（楽天）https://www.rakuten.co.jp/chikyugenkimura/

バナーURL（PC）https://www.rakuten.ne.jp/gold/chikyugenkimura/img/pcmod.jpg
バナーURL（SP）https://www.rakuten.ne.jp/gold/chikyugenkimura/img/spmod.jpg

参考ページ（楽天）https://item.rakuten.co.jp/directplus/c/0000000301/



PCはTOPページ、SPはTOPページと商品ページに反映させたい。
よろしくお願いいたします。

Answer

ECマスターズの田中です。

いただいた「参考ページ（楽天）」では、
https://forum.ec-masters.net/post_view.php?id=7870
で紹介されているページの方法で実装されておりますので、
wolf999さんのページにも、同じ方法で設置していただくことができます。

最初に、モーダルウィンドウの見た目を整えるための
CSS（スタイルシート）をご記載いただく必要がございます。
RMSに直接記載もできるのですが、字数が非常に多いため、
GOLD上に１つのファイルとしてご記載いただく方式で紹介されております。

メモ帳で作ることもできますが、文字化けを起こす可能性がございますので、

「Mery」フリーの高機能テキストエディター
https://forest.watch.impress.co.jp/library/software/mery/

などのテキストエディタをご利用いただくことをオススメします。

テキストエディタ上に、CSSとして紹介されているコードを貼り付け、
/*画像の横幅*/
/*画像の高さと幅の半分 marginをマイナス */
の左に記載されている数字を調整していただきますようお願いします。

PC用のpcmod.jpgの場合はそれぞれ
600px;
-500px 0 0 -300px;
SP用のspmod.jpgの場合はそれぞれ
320px;
-280px 0 0 -160px;
に修正していただく形になります。

編集ができましたら、
ファイル名の末尾を「.css」にして
外部CSSファイルとしてパソコンに保存していただき、
バナーと同様に、Ribraryなどを利用して
楽天GOLDにアップロードしていただきますようお願いします。

無事アップロードできましたら、
RMS上の設置したい場所（トップ説明文、商品ページ共通説明文など）に
「CSS読み込み」と「HTML」の２つのコードを
ご記載いただくことで、設置することができます。

「CSS読み込み」に記載されている
「ショップID」は、wolf999さんのショップの文字列に、
「任意のファイル場所」は、アップロードしていただいたCSSファイルのファイル名に、
「HTML」に記載されている
「urlを入力」は、モーダルウィンドウ上のバナーのリンク先のURLに、
「画像urlを入力」は、バナーURL（PCもしくはSP）に、
それぞれ修正していただくようお願いします。

大まかに全体の流れをご説明させていただきましたが、
細部で不明な点もあるかと思いますので、
まずは作業に着手していただき、

RMSに設置するソースの内容がわからない、
RMSのどこにソースを書けばいいのかわからない、
CSSファイルの書き換え方がわからない、
CSSファイルのURLがわからない、
CSSファイルの作り方がわからない、

など、不明な点がございましたら、
改めてご返信いただきますようお願いいたします。

Answer

ECマスターズの田中です。

モーダルウィンドウについて、
１点ご注意いただきたい点がございます。

こちらのモーダルウィンドウは、
JavaScriptなどによる表示/非表示の管理が行われておらず、
ページにアクセスすると必ず表示されるようになっております。

たとえば、全商品ページに一律に表示されますと、
他の商品ページを見ようとしても
同じ内容のモーダルウィンドウが毎回表示されてしまい、
お客様が煩わしさを感じてしまう可能性がございます。

設置の際は、お客様が不便に感じられることのないよう、
ご注意いただきますようお願いします。

Answer

昨日は、設置方法ありがとうございます。
Meryを使いRibraryを利用して、PC用、SP用のCSSを楽天GOLDにアップロードしました。
その後、うまくいかないのでお聞きします。

PC用
以下のタグをRMSのデザイン設定、共通説明文（大）に設置しました。うまく動作せず。










SP用
以下のタグをECステーションの丸ごとスマホのTOPページ内にHTML直接入力で入れましたがうまく動作せず。










タグの確認と、設置方法を教えて下さい。

ちなみに、PC用CSSです。画像変えたのでpxの値を変更しました。
これと同様にSPも作成しました。
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: 750px; /*画像の横幅*/
top: 50%;
	left: 50%;
	margin: -360px 0 0 -375px; /*画像の高さと幅の半分 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;
}

Answer

ECマスターズの塚本です。

こちらで確認したところ、記述されているCSSファイル
のURLに誤りがあるようですので、正しいかご確認いただけますでしょうか。

Ribraryをご利用いただいている場合は、
Ribraryの機能で正確なURLをコピーすることができます。

Answer

お世話になります。
ご指摘の通り、CSSが大文字となっていました。

https://www.rakuten.ne.jp/gold/chikyugenkimura/img/pc_mod.CSS

しかし、訂正しても反映しません。
他考えられる部分は何でしょう？

Answer

お世話になります。

タグに一部間違いを発見。
修正後、反映しました。

ありがとうございました！