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

[長田行弘]

設定（ここでは例ですが）：肉屋

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

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

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

[Jizo_Inagaki · Accepted solution]

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

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

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

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

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

[長田行弘]

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

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

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