商品の画像に、ロゴマークを追加したい!

解決済
長田行弘
観光客
4 0 0

設定(ここでは例ですが):肉屋

やりたいこと:特定のブランド肉の写真にだけ、そのブランドのロゴマークを表示させたい。

イメージ:商品の写真があって、ロゴマークにabsolute等を使って左上の方に配置したい。

 

リキッドでの条件分岐など全然わからない新米ですが、ご教授よろしくお願いします。

0 件の「いいね!」
Jizo_Inagaki
航海者
424 157 432

成功

詳細が不明のためあっているかわかりませんが、Liquidに詳しくない場合はCSSのみで対応する方法が検討できるかと思います。

具体的には以下のような方法です。

  • 対象となる画像のラッパー要素のidを探す
  • 特定したidにafterかbefore擬似要素で画像を設定する
  • 位置を調整する

対象画像の分だけIDを並べないといけない方法ですが、対象箇所によって画像表示用コードにclassを設定することが難しい可能性も考えられるため、作業難度的にこの方法の方が良いように思いました。
なおテーマや対象箇所によってはidがないかもしれず、その際は他の要素も利用して対象を特定する必要があります。

CSSの記述に関しましては「擬似要素 バッジ」あたりで検索いただくと具体的なサンプルコードが見つかるかと思いますので、それらを参考にしていただければと思います。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
長田行弘
観光客
4 0 0

返信ありがとうございます。

そのような方向性で試してみます。

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

0 件の「いいね!」