モーダルウィンドウの設定方法

Question

お世話になっております。

PC/スマホ用のモーダルウィンドウの設定方法を教えて頂けたらと思い投稿いたします。

下記のフォーラム質問やサイトも確認しましたが、
知識がないためよく理解できません。

https://forum.ec-masters.net/post_view.php?id=7065
https://www.cyber-records.co.jp/blog/web/html/modal_window/

何卒よろしくお願いいたします。

Answer

ECマスターズの田辺です。

まずはスマホ用の設定方法をご案内させていただきます。
※RMSの、禁止タグを入力できるバグを利用する方法ですので、
今後、RMSの改修により、使用できなくなる可能性があります。

１：
下記内容をメモ帳などのテキストエディタに貼り付けて
ファイル名の末尾を「.CSS」にして、
外部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ショップ名、任意のファイル場所.css、リンク先URL、画像URLは書き換えてご利用ください。


また、PCでモーダルウィンドウを設定できるのは
GOLDで作成したページ（例えばトップページ）のみとなります。

その場合、スマホ用手順１の
画像幅やmarginの数値をPC用に変えていただいて
別名で外部CSSファイルとして保存し、
楽天GOLDにアップロードしてください。

そして、手順２のタグにあります「 =""」を削除していただきまして
GOLDで作成したページに貼り付けていただくことで
PCでの表示も可能です。

Answer

早速のご回答ありがとうございます。
基本的な質問で恐縮ですが、
２点質問があります。

>１：
>下記内容をメモ帳などのテキストエディタに貼り付けて
>ファイル名の末尾を「.CSS」にして、
>外部CSSファイルとして保存し、
>楽天GOLDにアップロードしてください。


GOLDは利用しておりますが、
RMSのどこからどこにアップロードするのかが
分かりません。手順を教えて頂けないでしょうか。

> 

「任意のファイルの場所」ですが、
先にテキストエディタに作ったファイル名.cssの事でしょうか。

お手数をおかけしますが、
何卒よろしくお願いいたします。

Answer

ECマスターズの田辺です。

GOLDはRMSからではなく
FTPソフトをつかってアップロードをしていただきます。
https://club.ec-masters.net/index.php?design_page9

楽天に限ってFTPをご利用される場合は、
楽天より無料でダウンロードして使うことができる
「Ribrary」をご利用いただくことをおすすめいたします。
是非一度、お申込みの上動作をお試しいただければと思います。
https://www.rakuten.co.jp/shops/manual/navi/service/08_053.html


「任意のファイル場所」につきましては、
GOLD（データを保存するスペース）に直接「〇〇.css」を
アップロードしていただいた場合は

https://www.rakuten.ne.jp/gold/URLショップ名/〇〇.css

になり、
GOLDに例えば「modal」というフォルダを作成し、
その中に「〇〇.css」をアップロードした場合は、

https://www.rakuten.ne.jp/gold/URLショップ名/modal/〇〇.css

というようになります。

実際にRibraryを操作していただいてからの方が
イメージがつきやすいと思いますので
まずはRibraryをお試しいただけますと幸いです。

Answer

ありがとうございます。
早速Ribraryを申し込みました。
申し込み完了後、改めて設定してみようと思います。

Answer

お世話になっております。

スマホに設定してみましたが、
どこか違っているようで、上手く表示されません。

モーダルを設定したページ↓
https://item.rakuten.co.jp/dogcat-shop/item-01set5/

作ったタグ↓









どこか違っているか箇所がありましたら、
ご指摘くださいますでしょうか。

よろしくお願いいたします。

Answer

ECマスターズの田辺です。

確認させていただいたところ



のhrefの中（CSSファイルのURL）が
間違っている可能性がございますので、

GOLDのフォルダ名やCSSファイル名と modal/inuneko.css が
大文字・小文字の違いも含め同じ名前かどうかどうか
ご確認いただいてもよろしいでしょうか。

よろしくお願いいたします。

Answer

お世話になっております。

間違いが一箇所あり、
訂正して再度設定したのですが、
上手く行きませんでした。

以下が訂正したタグです。










違っているとすれば、
他にどの様な事がありますでしょうか。

何卒よろしくお願い致します。

Answer

ECマスターズの塚本です。

技術的なご質問になりますので、
確認次第、営業日にご回答させていただきます。

今しばらくお待ちくださいませ。

Answer

ECマスターズの田中です。

inuneko.cssの内容を確認したところ、
rtf形式で保存されておりました。

スタイルシートを編集される際、
Windowsのワードパッド、もしくはMacのテキストエディットに
貼り付けて、形式を変えないまま保存された可能性がございます。

rtf形式ではなく、素のテキストファイルとして
ファイルを保存するテキストエディタを利用して、
「inuneko.css」を保存していただきますようお願いします。

テキストエディタは、例えばWindowsなら「Mery」、
https://forest.watch.impress.co.jp/library/software/mery/
Macなら「CotEditor」といったフリーソフトがございます。
https://itunes.apple.com/jp/app/coteditor/id1024640650?mt=12
他にも様々な種類がございますので、
使いやすいテキストエディタをご利用いただければと思います。

Answer

お世話になっております。
お手数をお掛け致しましたが、
設定できました！

ありがとうございました。

Answer

度々恐れ入ります。
PCのタグは以下で正しいでしょうか。
RMSに
「認められていないHTMLタグ、または「」が入力されています。」
と表示されてしまします。

Answer

ECマスターズの田辺です。

一番はじめにご案内させていただいた通り、
PCでモーダルウィンドウを設定できるのは
GOLDで作成したページ（例えばトップページ）のみとなります。

そのためRMSにはPC用のタグを貼り付けることができません。
ご理解いただけますと幸いです。

記述の誤りもございましたので訂正させていただきますと、

Answer

お時間を頂戴し、申し訳ありません。
解決いたいました。ありがとうございました。

Answer

今更でも申し訳ありません
私もモーダルウインドを表示させようと色々試しておりましたが
タグがエラーになってしまいまして
フォーラムを検索してこのスレに行きつきました

スマホページは設定できましたが
ＰＣのページには表示できないという意味ですね？
他に方法はないのでしょうか？

Answer

ECマスターズの海老塚です。

AFROさん

モーダルウィンドウの設定について、
内容を確認の上、週明けに改めて担当よりご案内いたしますので、
今しばらくお待ちいただきますようお願いします。

Answer

お世話になります
お手間おかけします。。
よろしくお願いいたします

Answer

ECマスターズの伊藤です。

AFROさん

ご回答おまたせいたしました。

> スマホページは設定できましたが
> ＰＣのページには表示できないという意味ですね？
> 他に方法はないのでしょうか？

デザインレシピ

ポップアップバナーを表示させる方法 
https://club.ec-masters.net/index.php?design_popup_bunner

にて、PC版のモーダル（ポップアップ）バナーの
コードをご紹介していますので、
ご覧くださいませ。