バッジを商品画像に重ねず、商品画像の下（商品画像とタイトルの間）に表示させたい

[n_ogawa3]

テーマは「Craft」を使っています。

現在、以下画像のようにバッジが商品画像に重なって表示されます。

このバッジを商品画像に重ねず、商品画像とタイトルの間に表示させたいです。

コードの修正が必要になると思うのですが、具体的にどのように修正したらいいか教えていただきたいです。

よろしくお願いいたします。

[Qcoltd · Accepted solution]

@n_ogawa3 様

Craftのバージョン12.0.0で確認しました。

テーマカスタマイズの、「テーマ設定」を編集します。

(1) 下図のように、カスタムCSSに入力します。

入力内容は下記です。

.card__badge {
  display: none;
}

.card--card.card--media > .card__content .card__badge {
  display: block;
}

(2) さらに、「バッジ」の「カードでの位置」を「左上」に変更します。

そうしますと、商品画像とタイトルの間に、バッジが表示されます。

(元々、商品名のエリアにもバッジがあり、デフォルトでは非表示になっているのを、強制的に表示させています。)

十分に検証していないため、何か表示に不具合があるかもしれません。

ご参考まで。

(キュー田辺)

[n_ogawa3]

迅速なご回答ありがとうございました。

ずっとお返事できず、すみません。

時間が取れず、まだ試せてないのですが、ぜひこちらを試してみたいと思います。

ありがとうございました。