【楽天】項目別選択肢のバリエーション画像をCSSで設定する

楽天には項目別選択肢のバリエーション画像を表示する機能があります。

しかし、現在は機能が停止しておりバリエーション画像を表示することができません。

よって、代替手段としてCSSを用います。

この記事の目次

完成イメージ
CSS
解説
まとめ

完成イメージ

実装したイメージは下の通りです。

バリエーション画像が設定されていない「自然の館」さんの商品ページを下地に作成してみました。

CSS

下のCSSを外部CSS、またはインラインで記述して商品ページに読み込みます。

#normal_basket_10007351 td.inventory_choice_name {
  padding-right: 10px;
  padding-left: 10px
}

/* ②縦軸の幅を指定 */
#normal_basket_10007351>tbody>tr:nth-child(3)>td>table>tbody>tr>td>table>tbody>tr>td:nth-child(1) {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px
}

/* ③疑似要素の高さを指定 */
#normal_basket_10007351>tbody>tr:nth-child(3)>td>table>tbody>tr>td>table>tbody>tr>td:nth-child(1)::before {
  width: 100%;
  height: 124px;
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
  content: ""
}

/* ④１枚目の画像を指定 */
#normal_basket_10007351>tbody>tr:nth-child(3)>td>table>tbody>tr>td>table>tbody>tr:nth-child(2)>td:nth-child(1)::before {
  background-image: url(https://placehold.jp/22/3a6f32/ffffff/150x150.png?text=%E5%92%8C%E9%A2%A8%E3%81%97%E3%82%87%E3%81%86%E3%82%86)
}

/* ④２枚目の画像を指定 */
#normal_basket_10007351>tbody>tr:nth-child(3)>td>table>tbody>tr>td>table>tbody>tr:nth-child(3)>td:nth-child(1)::before {
  background-image: url(https://placehold.jp/22/c01b22/ffffff/150x150.png?text=%E3%83%81%E3%82%B2%E9%A2%A8)
}

#normal_basket_10007351 tr td.inventory {
  padding: 0 !important;
  vertical-align: middle
}

/* ⑤ラジオボタン */
#normal_basket_10007351 tr td.inventory input[type=radio] {
  width: 26px;
  height: 26px;
  margin: 0 auto !important;
  cursor: pointer
}