FROM CACHE - jp_header

画像のCSSについて

mira0
Shopify Partner
114 0 2

 少しわかりづらいのですが、画像にCSSで border-radiusを当てたのですが、画像右上のように背景が白くなってしまいます。

こちらを消す方法などあれば教えていただきたいです。テーマはSenseでテキスト付き画像の編集になります。

スクリーンショット 2023-05-28 16.21.50.jpeg

  • CSS
1件の返信1

Qcoltd
Shopify Partner
1051 429 417

興味があり調査してみました。

 

どのセクション(もしくはブロック)の画像の角丸を変更されたいかによるのですが、

もし、元々、角丸になっていた箇所の丸みを変更されたい場合は、

テーマのカスタマイズ画面の、下記の項目で変更できます。

screenshot_20230601_01.png

 

この図の場合は、コレクションカードの丸みを変更する、となりますが、

他にも商品カードの設定なども用意されています。

 

 

もし、こちらから目的の箇所の角丸の変更ができない場合は、

border-radiusを設定する要素を変更されるのが良いかと思います。

画像ではなくもっと上の親要素のうち、box-shadowが設定されている要素に、

border-radiusを設定することで違和感がなくなるはずです。

 

カード系であれば、

アセット(assets)のcomponent-card.liquidに

設定がまとめられているように見受けられましたので、

こちらから設定すべきCSS Classを探されると良いかもしれません。

 

実際のサイトのURLを、

プライベートメッセージでお送りいただければ、

もう少し具体的な説明もできるかもしれません。

(必ず回答をする約束はできないですが。。。)

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/