ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

TCDテーマANTHEM:商品一覧で商品タイトルの文字色を変更する方法

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

Q.トップページの「商品一覧」や商品アーカイブの商品タイトルの文字色を変更したいです。

トップページの「商品一覧」・商品アーカイブで、各商品の文字色は白色に固定されています。
背景色は商品記事編集画面の【商品の情報設定 > 基本設定 > 色の設定 > メインカラー】から変更できますが、このメインカラーに淡色を設定した場合に商品名が見づらくなることがあります。

▼変更箇所イメージ(赤枠箇所)  →デモサイトトップページの「商品一覧」
変更箇所イメージ

A.下記の方法でご対応ください。

TCDテーマ > 基本設定の「カスタムCSS」に入力してください。

・全商品名の文字色を変更する

.product_list .title { color: 〇; }

〇を任意のカラーコードに変更してください。

・商品ごとに商品名の文字色を設定する

.product_list .title[style*="●"] { color: 〇; }

〇を任意のカラーコードに変更してください。
●には各商品に設定しているメインカラーを入力してください(メインカラーを判別して、商品ごとに文字色を設定しています)。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事