【解決済】Simple Plus:商品の文字情報をサムネ外に固定したい

[torino]

Simple plusを購入しサイトを構築して楽しんでいます。

このテーマは商品画像一覧において、テーマの「カスタマイズ」＞「テーマオプション」＞「一覧画像設定」や「トップページ設定」の「画像の角丸を設定して下さい」の値によりサムネイル内外のどちらかに商品名や価格等が表示されるかが決まります。
サムネイル内に情報を表示させる設定の際、商品画像が背景透過だったりそうじゃなかったり、そもそも扱っている商品の色合いが物により極端に白や黒によっているものがバラバラにあるという都合上、商品の文字情報が画像内の同系色に喰われて視認性が極端に悪くなります。
商品名や価格の文字の色を変更したりサムネイルの透過部分（

）にだけ背景色を設定したりと試行錯誤してみましたがいい解決策が思い浮かばずサムネイル内に文字情報を表示させる事は諦めました。

そこで教えていただきたいのですが「文字情報を常にサムネイル外の下に表示はしたいがサムネイルの角丸のアールを自由に設定したい」と希望しています。
文字情報がサムネイルの中にくるのか外に来るのはを判定している構成ファイルはどれなんでしょうか。

詳しい方、ぜひともご教示いただければと思います。
よろしくお願いいたします。

[furuta]

torino 様

こんにちは。テーマ「Simple plus」をご利用いただきありがとうございます。
画像の角丸の外に商品名などを表示されたい場合には CSS の変更のみで対応可能です。
管理画面＞カスタマイザーより角丸の値を変更した際には、各 article に対しg-rounded-50g-rounded-40といったクラスが付与されます。「Simple Plus」では、そのクラスに対し角丸の中か外かということをスタイルで調整をおこなっております。
子テーマを作成し適用されているクラスをもとに調整をおこなってみてください。
なお、カスタマイズしているファイルは複数あり、こちらに記載することはできかねますのでご了承いただけたらと思います。

[torino]

huruta様

お世話になります。
教えていただいた情報を参考に、chromeのデベロッパーツールで該当部のクラスの変数の挙動を確認してからCSSやtheme-customizer_preview.jsのg-roundedの判定部のカスタムをしてみましたが狙った挙動にならず、結局template-parts/frontの各ファイルのecho ‘ ‘;にg-rounded-40を追加＋下の行の削除という力技で狙った通りの「文字情報を常にサムネイル外の下に表示はしたいがサムネイルの角丸のアールを自由に設定したい」という結果になりました。

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

[投稿者]

投稿