お世話になっております。
リンクのテキストについて、サイト内を回遊しているうちに
太い青文字になってしまうのですが、
こちらをShopify上で制御することは可能でしょうか。
また、この現象が起きる際はテキストだけでなく、SNSリンクなども
全て青色になります。
使用テーマはDawnで、8.0にアップデートしております。
知識不足で恐縮ですが、上記の原因と対策についてご教示いただけますと幸いです。
何卒宜しくお願い致します。
Topic summary
ユーザーがShopifyサイトでリンクテキストが太い青文字になる問題について質問しています。Dawn テーマ（バージョン8.0）を使用中で、SNSリンクなどすべてのリンクが青色になってしまう現象が発生。
提案された解決策:
Qcoltd氏がCSSによる制御方法を提示。base.cssファイルに特定のCSSコード（a:link、a:visited、a:activeの色と太さを調整）を追加する手順を説明しました。ただし、既存のCSS設定によっては完全に解消しない可能性があると注意喚起。
新たな課題:
ユーザーが提案されたCSSを適用したところ、すべてのテキストリンクが濃いグレーになり、ソリッドカラー（#04205D）のラベルの視認性が低下。濃い色のボタンでは白いテキストが必要だが、現在の設定では対応できていない状況。
ユーザーはテーマ設定での解決方法を希望しており、ストア情報の開示については社内検討中。議論は継続中で未解決です。
ご質問いただいている、リンクが青色になるのを制御する件ですが、現在の青色になる設定を打ち消すCSSを設定するのが良いかと思います。
また、実際のサイトを拝見できていないので推測にはなってしまいますが、リンク色が青色になるページではリンク色を青色にするCSSがどこかに設定されているかもしれません。
それにより今回ご提示するCSSだけでは青色が解消しない場合もございますので、ご了承ください。
プライベートメッセージなどで、ストアの情報を頂戴できればもう少し調査できるかもしれませんので、差し支えないようでしたらご連絡ください。
(必ず調査、解決できるともお約束はできませんが。。。)
CSS設定方法
- 管理画面より「オンラインストア > テーマ > カスタマイズボタンの横にある「…」 > コードを編集」からコード編集画面を開きます。
- ファイル検索にて「base.css」を検索し表示してください。
- 「base.css」の一番上の行に下記CSSを追記してください。
a:link {
color:rgba(var(--color-foreground), 0.75) !important;
font-weight :normal !important;
}
a:visited {
color:rgba(var(--color-foreground), 0.75) !important;
font-weight :normal !important;
}
a:active {
color:rgba(var(--color-foreground), 0.75) !important;
font-weight :normal !important;
}
ご参考まで。
(キュー小坂)
キュー小坂様
ご回答をいただきましてありがとうございます。
ご提示いただきました内容を反映したところ、テキストリンクがすべて濃いグレーの同色になり、テキスト付画像セクションなどで利用しているソリッドカラー（#04205Dを設定しています）のラベルの視認性が落ちてしまいました。
ボタン色が濃い色の場合はテキストはホワイトカラーになるという設定のまま、
青く太いリンクになってしまうのを防ぐことができると嬉しいです。
こちら、テーマ設定等で解決する方法はございますでしょうか？
ストア情報については、開示可能か一度社内で検討の上、お送りできればと思います。
以上、重ねてのご質問になり恐縮ですが、ご回答いただけますと幸いです。