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

Question

いつもお世話になっております。

マスターズの投稿( https://forum.ec-masters.net/post_view.php?id=8507 )
見ながらやってみたのですが、うまくいかなくて

http://maerc.me/170418/?fbclid=IwAR0gxuatE7cQzfT9nQUkYdj45_ZLv-ZW6CECRgBIqH1NRe4n7nddXIOOGW0
こちらを参考にやってみたら、画像スペースは開いたのですが画像が表示されず

どこが間違っているのか教えてください。
よろしくお願いいたします。

▼このページのスマホ版
https://item.rakuten.co.jp/pyokotto/pi-6/

▼書いた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%;
}###HR######IMG00be865bf7c86d778b934e29f0fdc0b4d.pngIMG0###

Answer

ECマスターズの伊藤です。


> http://maerc.me/170418/?fbclid=IwAR0gxuatE7cQzfT9nQUkYdj45_ZLv-ZW6CECRgBIqH1NRe4n7nddXIOOGW0
> こちらを参考にやってみたら、画像スペースは開いたのですが画像が表示されず
> 
> どこが間違っているのか教えてください。
> よろしくお願いいたします。

画像の表示以外の部分は
問題なくできているようです。

画像の指定している箇所の
.itemSelectPopUp dl:nth-of-type(1) dd:nth-of-type(1):before
の()内の数字で、どの位置に画像を表示するか
指定していただくことができます。

dl:nth-child(数字)
この部分の数字で
1 → (A)合金ピアス
2 → (B)樹脂ピアス
:

dd:nth-child(数字)
この部分の数字で
1 → (1)星の色(黄色)
2 → (2)雪の色(青)
：

となりますので

(A)合金ピアス　の　(1)星の色(黄色)
の場合は

.itemSelectPopUp dl:nth-of-type(1) dd:nth-of-type(1):before{
background-image: url(https://thumbnail.image.rakuten.co.jp/@0_mall/pyokotto/cabinet/item2/imgrc0065353303.jpg?_ex=200x200&s=0&r=1);
}

と、指定していただけますと
画像を表示していただくことができます。

Answer

伊藤さん☆ありがとうございます♪

(A)合金ピアス　の　(1)星の色(黄色)
(B)樹脂ピアス　の　(1)星の色(黄色)
・・・・・

と、全てに指定しなければ、ちゃんと反応しないでしょうか？

例えば

.itemSelectPopUp dd:nth-of-type(1):before{
background-image: url(https://thumbnail.image.rakuten.co.jp/@0_mall/pyokotto/cabinet/item2/imgrc0065353303.jpg?_ex=200x200&s=0&r=1);
}

と書いたら
(A)合金ピアス　の　(1)星の色(黄色)
(B)樹脂ピアス　の　(1)星の色(黄色)
(C)(D)全ての(1)に(https://thumbnail.image.rakuten.co.jp/@0_mall/pyokotto/cabinet/item2/imgrc0065353303.jpg?_ex=200x200&s=0&r=1)この画像が反応しますか？？？

Answer

ECマスターズの伊藤です。

> .itemSelectPopUp dd:nth-of-type(1):before{
> background-image: url(https://thumbnail.image.rakuten.co.jp/@0_mall/pyokotto/cabinet/item2/imgrc0065353303.jpg?_ex=200x200&s=0&r=1);
> }
> 
> と書いたら
> (A)合金ピアス　の　(1)星の色(黄色)
> (B)樹脂ピアス　の　(1)星の色(黄色)
> (C)(D)全ての(1)に(https://thumbnail.image.rakuten.co.jp/@0_mall/pyokotto/cabinet/item2/imgrc0065353303.jpg?_ex=200x200&s=0&r=1)この画像が反応しますか？？？

ご認識の通り
.itemSelectPopUp dd:nth-of-type(1):before{
background-image: url(https://thumbnail.image.rakuten.co.jp/@0_mall/pyokotto/cabinet/item2/imgrc0065353303.jpg?_ex=200x200&s=0&r=1);
}
で、全ての(1)に
同じ画像を表示していただくことができます。

Answer

ありがとうございます♪

やってみたのですが、

/* 1項目目 黄色 */
.itemSelectPopUp dd:nth-of-type(1):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 dd:nth-child(2):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 dd:nth-child(3):before {
background-image: url(https://thumbnail.image.rakuten.co.jp/@0_mall/pyokotto/cabinet/shohin/compass1540355446.jpg?_ex=200x200&s=0&r=1);
}

と書いたら、
(1)星の色(黄色)
のところに(2)で設定した青色、
(2)に(3)で指定した赤色が来たので

(2)(3)(4)と数字を変えてみたのですが

(1)星の色
の画像だけ表示されません。
何故でしょうか？？？

▼只今のcss

@charset "utf-8";
/* CSS Document */

/* 選択肢名前に画像出す - 縦軸専用
---------------------------------- */
/* 天体観測 */

/* 1項目目 黄色 */
.itemSelectPopUp dd:nth-of-type(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 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 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%;
}###HR######IMG0a99ab2c6f8c1ecf7a4b4247e734dcf76.pngIMG0######BR###

Answer

ECマスターズの伊藤です。

> (1)星の色(黄色)
> のところに(2)で設定した青色、
> (2)に(3)で指定した赤色が来たので
> 
> (2)(3)(4)と数字を変えてみたのですが
> 
> (1)星の色
> の画像だけ表示されません。
> 何故でしょうか？？？

先日ご連絡していた内容が
nth-child(数字)
nth-of-type(数字)
が混在していて、混乱させてしまったようで
申し訳ありません。

.itemSelectPopUp dd:nth-of-type(1):before{
.itemSelectPopUp dd:nth-child(2):before {
.itemSelectPopUp dd:nth-child(3):before {

(2)(3)の nth-child(数字) を
(1)と同様に nth-of-type(数字)
に修正していただき
正常に表示されるか、ご確認いただけますでしょうか。

Answer

あ、ほんとだ
(3)(4)と(2)が異なりますね＞＜
言われた逆をやってしまったのですが

/* 1項目目 黄色 */
.itemSelectPopUp 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 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 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);
}

(2)を(3)(4)に合わせたら、無事黄色も表示されました＾＾☆

表示された画像を大きくしたい場合は、

.itemSelectPopUp dd:before {
    display: inline-block;
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    background-size: 40px;←ここ？？？？？？
    background-repeat: no-repeat;
    background-position: center;
}

ですか？

Answer

あと、ちなみに
これって1ページに1枚css作らないと無理ですよね？やっぱ。
ファイル分けて増殖してみます☆

Answer

ECマスターズの伊藤です。

> (2)を(3)(4)に合わせたら、無事黄色も表示されました＾＾☆

無事表示されたようでよかったです。


> 表示された画像を大きくしたい場合は、
> 
> .itemSelectPopUp dd:before {
> display: inline-block;
> position: absolute;
> content: "";
> width: 80px;
> height: 80px;
> background-size: 40px;←ここ？？？？？？
> background-repeat: no-repeat;
> background-position: center;
> }
> 
> ですか？

はい、ご認識の通りで間違いございません。


> あと、ちなみに
> これって1ページに1枚css作らないと無理ですよね？やっぱ。

文字数に余裕があるようでしたら
スマートフォン用商品説明文に
画像を指定している箇所を
記述していただき
=====

.itemSelectPopUp dd:nth-child(数字):before{
background-image: url(【画像URL】);
}
：

=====

その他の箇所は
外部リンク（koumoku.cssに記述）としていただくと
適用している画像が、わかりやすくなり
編集も楽になるかと思います。

Answer

.itemSelectPopUp dd:before {
display: inline-block;
position: absolute;
content: "";
width: 80px;
height: 80px;
background-size: 40px;←ここ
background-repeat: no-repeat;
background-position: center;
}

触ってみたのですが、変化が無く、

.itemSelectPopUp dd:before {
display: inline-block;
position: absolute;
content: "";
width: 80px;←ここも？？？
height: 80px;←ここも？？？
background-size: 40px;
background-repeat: no-repeat;
background-position: center;
}

でしょうか？？？

まとめかた、ありがとうございます☆

Answer

ECマスターズの伊藤です。

> .itemSelectPopUp dd:before {
> display: inline-block;
> position: absolute;
> content: "";
> width: 80px;←ここも？？？
> height: 80px;←ここも？？？
> background-size: 40px;
> background-repeat: no-repeat;
> background-position: center;
> }
> 
> でしょうか？？？

background-size: 40px;
の箇所のみの変更で、問題ございません。

現在、60pxに設定頂いていると思いますが
80pxにしていただきますと
変化がわかると思います。

また、もしかすると、キャッシュの影響で
CSSが反映されていない可能性がございます。

その場合は、シークレットモードで
ご確認頂ますよう、お願いいたします。

シークレットモードの起動方法は、下記URLをご参照ください。
https://bit.ly/2Uup9r7

Answer

ありがとうございます∩^ω^∩
80にしたら大きくなりました(n*´ω`*n)♪

スマホは常にプライベートモードになっているので、キャッシュは大丈夫です＾＾☆

あ！

＞その他の箇所は
外部リンク（koumoku.cssに記述）としていただくと

って、スマホ用共通説明文に入れても大丈夫ですよね♪

Answer

ECマスターズの伊藤です。

> 80にしたら大きくなりました(n*´ω`*n)♪

無事ご確認いただけたようで、良かったです。


> ＞その他の箇所は
> 外部リンク（koumoku.cssに記述）としていただくと
> 
> って、スマホ用共通説明文に入れても大丈夫ですよね♪

はい、ページ内で読み込まれていれば
問題ございませんので、スマホ用共通説明文でも大丈夫です。