スマホでの項目選択肢別画像の表示について

Question

いつもお世話になっています。
こちら（https://forum.ec-masters.net/post_view.php?id=8507）の質問を参考に

PC用商品説明文に





上記記載してPCでの表示はうまくできました→（https://item.rakuten.co.jp/lb-market/200-450/）

しかしスマホでの表示ができません。
スマホ用に別に記述しなければならないのでしょうか？

HTML等詳しくないのでスマホ表示について詳しく教えていただけないでしょうか？

宜しくお願い致します。

Answer

ECマスターズの伊藤です。

> しかしスマホでの表示ができません。
> スマホ用に別に記述しなければならないのでしょうか？

PCとスマホでは、表示方法が異なるため
別々に記述していただく必要がございます。

スマホ用の記述ですが、ご参考頂いたフォーラムの
一番最後の回答にて、お答えしておりますので、
まずはそちらをご確認いただけますでしょうか。

ご不明な点がございましたら、
返信よりご質問くださいませ。

Answer

お世話になります。
返信ありがとうございます。

画像URLを入れた下記記述を【スマートフォン用商品説明文】に入れればいいのでしょうか？

@charset "utf-8";
/* CSS Document */

/* 1項目目 */
.itemSelectPopUp dl:nth-of-type(1) dt:before {
background-image: url(https://image.rakuten.co.jp/lb-market/cabinet/05645434/200-450.jpg);
}


/* 以下略。項目を増やす際は、複製の上、nth-of-type(*)の数字と画像URLを修正してください。 */


.itemSelectPopUp dl {
height: 80px;
}
.itemSelectPopUp dt:before {
display: inline-block;
position: absolute;
content: "";
left: 0;
width: 80px;
height: 80px;
background-size: 80px;
background-repeat: no-repeat;
}
.itemSelectPopUp label {
padding: 0 34px 0 0px;
}
.itemSelectPopUp dt {
background-color: タイトル部分の背景色 !important;
/* ※タイトル部分の背景色は、カラーコードもしくは色の名前にご変更ください。変更しない場合は行ごと削除願います。*/
min-height: 80px;
height: 81px;
text-indent: 80px;
}
body .itemSelectPopUp dt>span:after,
body .itemSelectPopUp dl.opened dt>span:after{
top: 33px;
}

Answer

ECマスターズの伊藤です。


> 画像URLを入れた下記記述を【スマートフォン用商品説明文】に入れればいいのでしょうか？

失礼いたしました、ご案内している内容は
CSSを楽天GODLにアップロードしていただく
方法となっておりました。

スマートフォン用商品説明文に入れて頂く場合は
＝＝＝＝＝
@charset "utf-8";
/* CSS Document */
＝＝＝＝＝
を削除していただき、
それ以外をとで挟んで頂ますよう
お願いいたします。

＝＝＝＝＝

/* 1項目目 */
.itemSelectPopUp dl:nth-of-type(1) dt:before {
background-image: url(https://image.rakuten.co.jp/lb-market/cabinet/05645434/200-450.jpg);
}
〜〜〜略〜〜〜
body .itemSelectPopUp dt>span:after,
body .itemSelectPopUp dl.opened dt>span:after{
top: 33px;
}

＝＝＝＝＝

Answer

何度も申し訳ありません。
下記を【スマートフォン用商品説明文】に入れると【「」の数が一致していません。】と出て更新できません。


/* 1項目目 */
.itemSelectPopUp dl:nth-of-type(1) dt:before {
background-image: url(https://image.rakuten.co.jp/lb-market/cabinet/05645434/200-450.jpg);
}

.itemSelectPopUp dl {
height: 80px;
}
.itemSelectPopUp dt:before {
display: inline-block;
position: absolute;
content: "";
left: 0;
width: 80px;
height: 80px;
background-size: 80px;
background-repeat: no-repeat;
}
.itemSelectPopUp label {
padding: 0 34px 0 0px;
}
.itemSelectPopUp dt {
background-color: タイトル部分の背景色 !important;
/* ※タイトル部分の背景色は、カラーコードもしくは色の名前にご変更ください。変更しない場合は行ごと削除願います。*/
min-height: 80px;
height: 81px;
text-indent: 80px;
}
body .itemSelectPopUp dt>span:after,
body .itemSelectPopUp dl.opened dt>span:after{
top: 33px;
}

Answer

ECマスターズの伊藤です。

大変失礼いたしました。
下記に変更して、再度更新をお試しいただけますでしょうか。

 
/* 1項目目 */ 
.itemSelectPopUp dl:nth-of-type(1) dt:before { 
background-image: url(https://image.rakuten.co.jp/lb-market/cabinet/05645434/200-450.jpg); 
} 

.itemSelectPopUp dl { 
height: 80px; 
} 
.itemSelectPopUp dt:before { 
display: inline-block; 
position: absolute; 
content: ""; 
left: 0; 
width: 80px; 
height: 80px; 
background-size: 80px; 
background-repeat: no-repeat; 
} 
.itemSelectPopUp label { 
padding: 0 34px 0 0px; 
} 
.itemSelectPopUp dt { 
background-color: タイトル部分の背景色 !important; 
/* ※タイトル部分の背景色は、カラーコードもしくは色の名前にご変更ください。変更しない場合は行ごと削除願います。*/ 
min-height: 80px; 
height: 81px; 
text-indent: 80px; 
} 
/* span:after, 
body .itemSelectPopUp dl.opened dt>span:after{ 
top: 33px; 
}

Answer

度々すみません。

今度は【HTMLタグ "*/ body"に使用不可能な文字 "/"が使用されています。】と出て更新できません。

Answer

ECマスターズの伊藤です。

お手数おかけしてしまい、申し訳ございません。
下記内容にて、再度更新いただけますでしょうか。

 
/* 1項目目 */ 
.itemSelectPopUp dl:nth-of-type(1) dt:before { 
background-image: url(https://image.rakuten.co.jp/lb-market/cabinet/05645434/200-450.jpg); 
} 

.itemSelectPopUp dl { 
height: 80px; 
} 
.itemSelectPopUp dt:before { 
display: inline-block; 
position: absolute; 
content: ""; 
left: 0; 
width: 80px; 
height: 80px; 
background-size: 80px; 
background-repeat: no-repeat; 
} 
.itemSelectPopUp label { 
padding: 0 34px 0 0px; 
} 
.itemSelectPopUp dt { 
min-height: 80px; 
height: 81px; 
text-indent: 80px; 
} 
body .itemSelectPopUp dt span:after,
body .itemSelectPopUp dl.opened dt span:after{ 
top: 33px; 
}