モーダルウィンドウの設置方法について

Question

お世話になります。下のモーダルウィンドウをhttps://item.rakuten.co.jp/urbene/c/0000000920/
のカテゴリにだけ出したいのですが、どこに入れればいいでしょうか？


	









p{
margin:0 auto;}
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 {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
position: fixed;
width: 300px; /*画像の横幅*/
height:300px; /*画像の縦幅*/
bottom: 0;
left: 0;
margin: 15% auto;
position: fixed;
right: 0;
top: 0;
}
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;
}
input#modal + label img{
width:300px; /*画像の横幅*/
height:300px; /*画像の縦幅*/
}

Accepted Answer

ECマスターズの伊藤です。

> 下のモーダルウィンドウをhttps://item.rakuten.co.jp/urbene/c/0000000920/
> のカテゴリにだけ出したいのですが、どこに入れればいいでしょうか？

コードを拝見する限り、PC版かと思いますが
お間違い無いでしょうか。


PC版の場合は、

店舗設定 ＞ デザイン設定 ＞ 共通テンプレート設定 ＞ ヘッダー・フッター・レフトナビ
・ヘッダーコンテンツ
・レフトナビゲーション
・フッターコンテンツ

にご登録いただき

上記カテゴリにのみ適用するよう
別にテンプレートをご用意いただくことで
ご対応いただくことができます。


楽天のシステム上

・ヘッダーコンテンツ
・レフトナビゲーション
・フッターコンテンツ

以外には、モーダルウィンドウのコードの
ご登録ができませんので、
上記方法にて、ご対応いただきますよう
お願いいたします。

Answer

因みにヤフーの場合はどこに入れればいのでしょうか？

Answer

ECマスターズの伊藤です。

> 因みにヤフーの場合はどこに入れればいのでしょうか？

ヤフーの場合は、スマホではCSSが
許可されていませんので
ご利用いただくことができません。

PCはCSSをご利用いただくことができますが
CSSをトリプルにアップして
ご利用頂く必要がございます。


（１）
コード内に記述されている

【この部分】

をメモ帳に貼り付けて
popup.css
など、.cssファイルとして保存
※、は不要です。
※popup.css.txt　のように、最後に.txtがつかないよう、ご注意ください。

（２）
（１）で作成したファイルをトリプルにアップロード

（３）
コード内より
～
を削除

（４）
コード内に

を追加

（５）
編集したコードを

（HTML可）

と記述されている箇所に、登録をお願いいたします。

全ページに適用したい場合は
ヘッダー・看板のフリースペースに、ご登録くださいませ。

Answer

下記をhttps://store.shopping.yahoo.co.jp/urbene/75acceaa552.html
の（HTML可）のところに入れたのですが、表示してくれません。どのようにしたらいいでしょうか？

Answer

ECマスターズの伊藤です。

> 下記をhttps://store.shopping.yahoo.co.jp/urbene/75acceaa552.html
> の（HTML可）のところに入れたのですが、表示してくれません。どのようにしたらいいでしょうか？

拝見したところ、ページ内に
モーダルに関する記述が見当たりませんでした。

HTMLを記述頂いた箇所が
ページに読み込まれているか

コードの前後に何かしらの文字

例：日時を入力＝＝＝＝
191229-10:00









例＝＝＝＝

を入れていただき、
文字が表示されているか
ご確認をお願いいたします。

表示がされていない場合は
登録箇所がページに表示されておりませんので、
表示される箇所に、ご登録頂ますよう
お願いいたします。

Answer

すみません、添付の画像のようにページ下部に表示されてしまうため消していました。

Answer

（HTML可）のところに入れますと下記のように文字化けしてしまいます

Answer

ECマスターズの伊藤です。

> （HTML可）のところに入れますと下記のように文字化けしてしまいます

改めて確認したところ

使用可能なHTMLタグ一覧
https://store-info.yahoo.co.jp/s/shopping/toolmanual/snl/g/729.html

に、labelタグが許可されておらず
そのために、テキストとして認識されておりました。

また、labelタグが使えないため
ヤフーでは、モーダルをご利用いただくことができません。

間違ったご案内となってしまい
大変申し訳ございません。