• 文字サイズ
解決済

項目選択肢別在庫の画像表示

  • 相談者:非公開
  • 2019/10/23 18:46
いつもお世話になっております。

マスターズの投稿( https://forum.ec-masters.net/post_view.php?id=8507 )
見ながらやってみたのですが、うまくいかなくて

http://maerc.me/170418/?fbclid=IwAR0gxuatE7cQzfT9nQUkYdj45_ZLv-ZW6CECRgBIqH1NRe4n7nddXIOOGW0
こちらを参考にやってみたら、画像スペースは開いたのですが画像が表示されず

どこが間違っているのか教えてください。
よろしくお願いいたします。

▼このページのスマホ版
https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/

▼書いたCSS
@charset "utf-8";
/* CSS Document */

/* 選択肢名前に画像出す - 縦軸専用
---------------------------------- */
/* 天体観測 */

/* 1項目目 黄色 */
.itemSelectPopUp dl:nth-child(4) dd:nth-child(2):before {
background-image: url(https://thumbnail.image.rakuten.co.jp/@0_mall/pyokotto/cabinet/item2/imgrc0065353303.jpg?_ex=200x200&s=0&r=1);
}

/* 2項目目 青 */
.itemSelectPopUp dl:nth-child(4) dd:nth-child(3):before {
background-image: url(https://thumbnail.image.rakuten.co.jp/@0_mall/pyokotto/cabinet/item2/imgrc0065353301.jpg?_ex=200x200&s=0&r=1);
}

/* 3項目目 赤 */
.itemSelectPopUp dl:nth-child(4) dd:nth-child(4):before {
background-image: url(https://thumbnail.image.rakuten.co.jp/@0_mall/pyokotto/cabinet/shohin/compass1540355446.jpg?_ex=200x200&s=0&r=1);
}


.itemSelectPopUp dd:before {
display: inline-block;
position: absolute;
content: "";
width: 80px;
height: 80px;
background-size: 40px;
background-repeat: no-repeat;
background-position: center;
}

.itemSelectPopUp dl .icon {
position: relative;
left: 80px;
}
.itemSelectPopUp dl .name {
padding-left: 80px
}
.itemSelectPopUp dl .caption {
padding-left: 80px
}
.itemSelectPopUp label {
padding: 0 34px 0 0px;
}
.itemSelectPopUp dt {
background-color: #5c4b43 !important;
}
.itemSelectPopUp dd {
min-height: 80px;
height: 81px;
}
.itemSelectPopUp .itemSelectRadio{
top:40%;
}
.itemSelectPopUp .itemSelectRadio + .selected {
top: 44%;
}
キーワード:項目選択肢別在庫画像
投稿内容について報告する



  • 返信者:非公開
  • 2019/10/23 19:29
ECマスターズの伊藤です。


> http://maerc.me/170418/?fbclid=IwAR0gxuatE7cQzfT9nQUkYdj45_………(省略)………
  • 返信者:非公開(質問者)
  • 2019/10/23 19:53
伊藤さん☆ありがとうございます♪

(A)合金ピアス の (1)星の色(黄色)
(B)樹脂ピアス の (1)星の色(黄色)
・・・・・

と、全てに………(省略)………
  • 返信者:非公開
  • 2019/10/23 20:05
ECマスターズの伊藤です。

> .itemSelectPopUp dd:nth-of-type(1):before{
> background-imag………(省略)………
  • 返信者:非公開(質問者)
  • 2019/10/23 20:14
ありがとうございます♪

やってみたのですが、

/* 1項目目 黄色 */
.itemSelectPopUp dd:nth-of-type(1):b………(省略)………
  • 返信者:非公開
  • 2019/10/24 11:27
ECマスターズの伊藤です。

> (1)星の色(黄色)
> のところに(2)で設定した青色、
> (2)に(3)で指定した赤色が来たので
>
> ………(省略)………
  • 返信者:非公開(質問者)
  • 2019/10/24 12:53
あ、ほんとだ
(3)(4)と(2)が異なりますね><
言われた逆をやってしまったのですが

/* 1項目目 黄色 */
.itemSelectPopU………(省略)………
  • 返信者:非公開(質問者)
  • 2019/10/24 13:00
あと、ちなみに
これって1ページに1枚css作らないと無理ですよね?やっぱ。
ファイル分けて増殖してみます☆………(省略)………
  • 返信者:非公開
  • 2019/10/24 15:31
ECマスターズの伊藤です。

> (2)を(3)(4)に合わせたら、無事黄色も表示されました^^☆

無事表示されたようでよかったです。


> ………(省略)………
  • 返信者:非公開(質問者)
  • 2019/10/24 16:45
.itemSelectPopUp dd:before {
display: inline-block;
position: absolute;
conte………(省略)………
  • 返信者:非公開
  • 2019/10/24 18:05
ECマスターズの伊藤です。

> .itemSelectPopUp dd:before {
> display: inline-block;
> pos………(省略)………
  • 返信者:非公開(質問者)
  • 2019/10/24 18:11
ありがとうございます∩^ω^∩
80にしたら大きくなりました(n*´ω`*n)♪

スマホは常にプライベートモードになっているので、キャッシュは大丈夫です………(省略)………
  • 返信者:非公開
  • 2019/10/24 19:17
ECマスターズの伊藤です。

> 80にしたら大きくなりました(n*´ω`*n)♪

無事ご確認いただけたようで、良かったです。


> >その他………(省略)………