Shopify テーマ、Liquid、ロゴ、その他の類似トピック
Debutテーマを使用していますが、商品名にカーソルをもっていくと、リンク部分のアンダーラインの位置が少し下にズレているので、アンダーラインと文字が少し重なってしまいます。
ブログのタグのリンク部分も同様にアンダーラインがズレています。
正常の位置にアンダーラインを調整したいのですが、コード編集にて、「どのファイル」の「どの部分(番号)」を「どのように変更するのか」を教えていただきたく思います。
宜しくお願い致します。
参照URL:https://www.xcrossdash.net
解決済! ベストソリューションを見る。
成功
申し訳ありませんが、テーマ全体への影響を加味した調査や改修となりますと有料で承るレベルの作業になってきますので、お応えしかねるのが正直なところです。
とはいえ、今回に関していえば「マウスオーバーでproduct-card__titleクラスをつけた要素のborder-bottomが表示される」という程度の挙動なので、大きくレイアウトが崩れる可能性は低く、body.template-indexで制限せずとも問題はないと割り切れるかなとは思います。
繰り返しになりますが、「完全な保証ではなく、問題がないかあってもかなり小さいと推測できる」という点をご理解ください。
現在の状態はtext-decolationではなくborder-bottomによる実装が主要因の模様です。
具体的にはtheme.scssの以下の記述です。
なお、行数はブラウザでの調査ではわかりませんので、クラス名などで検索して箇所を特定してください。
.product-card:hover .product-card__title, .product-card:focus-within .product-card__title {
border-bottom-color: #ffd1d1;
}
対応策はいくつか考えられますが、以下のような記述を上記の下などに加えるとご希望の形になるかと思います。
body.template-index .product-card:hover .product-card__title {
border: none;
text-decoration: underline;
}
先頭につけている body.template-index は、とりあえず「このページの要素に対して」という制限をつけるためのものなので、必要に応じて適宜変更してください。
Jizo様 お忙しいところ適切なご返信をいただき有難うございます。
theme.scss.liquid内で、ご指摘いただいた記述がなかなか見当たらず、Ctrl+Fキーにて【product-card】と入力し検索いたしましたところ、
これに似た記述がこの部分だけ見つかりました。(下写真参照)(わかりやすく色つきで囲んでいます)
product-card~の記述がこの部分しかないため、この下の部分に対応策としてご指示いただきました記述を追加しましたところ、
カーソルをのせた状態で商品名のアンダーラインが下写真のように無くなりました。(リンクは問題なくクリックでき、指定のページへも移動できました。)
一番最初のように余計なアンダーラインがなくなったため、とても見やすくなったのですが、こちらの商品名をクリックし、個別の商品ページの下部にある【あなたへのおすすめ】の商品名のアンダーラインはついたままで変わらなかったので、
先頭につけている body.template-index を削除して記述してみました。(下写真参照)(わかりやすく色つきで囲んでいます)
そうすると、トップページの商品リンク(product-card部分)のアンダーラインも、他のページの商品リンク(product-card部分)のアンダーラインも消えて見やすくなりました。
しかし、素人判断でいじったために不安があります。この記述でも、ほかに影響はありませんでしょうか?
特に影響が無ければ、商品名にアンダーラインがない状態でやっていこうと考えております。
成功
申し訳ありませんが、テーマ全体への影響を加味した調査や改修となりますと有料で承るレベルの作業になってきますので、お応えしかねるのが正直なところです。
とはいえ、今回に関していえば「マウスオーバーでproduct-card__titleクラスをつけた要素のborder-bottomが表示される」という程度の挙動なので、大きくレイアウトが崩れる可能性は低く、body.template-indexで制限せずとも問題はないと割り切れるかなとは思います。
繰り返しになりますが、「完全な保証ではなく、問題がないかあってもかなり小さいと推測できる」という点をご理解ください。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024