リンク部分のアンダーラインの位置がズレている

解決済
Highlighted
新規メンバー
3 0 0

Debutテーマを使用していますが、商品名にカーソルをもっていくと、リンク部分のアンダーラインの位置が少し下にズレているので、アンダーラインと文字が少し重なってしまいます。

ブログのタグのリンク部分も同様にアンダーラインがズレています。

正常の位置にアンダーラインを調整したいのですが、コード編集にて、「どのファイル」の「どの部分(番号)」を「どのように変更するのか」を教えていただきたく思います。

宜しくお願い致します。

参照URL:https://www.xcrossdash.net

 

下線位置修正について.png

 

 

0 件の「いいね!」
Highlighted
先駆者
154 50 159

現在の状態は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 は、とりあえず「このページの要素に対して」という制限をつけるためのものなので、必要に応じて適宜変更してください。

 

 

Highlighted
新規メンバー
3 0 0

Jizo様 お忙しいところ適切なご返信をいただき有難うございます。

theme.scss.liquid内で、ご指摘いただいた記述がなかなか見当たらず、Ctrl+Fキーにて【product-card】と入力し検索いたしましたところ、

これに似た記述がこの部分だけ見つかりました。(下写真参照)(わかりやすく色つきで囲んでいます)

 

修正箇所検索.png

 

product-card~の記述がこの部分しかないため、この下の部分に対応策としてご指示いただきました記述を追加しましたところ、

カーソルをのせた状態で商品名のアンダーラインが下写真のように無くなりました。(リンクは問題なくクリックでき、指定のページへも移動できました。)

 

修正後.png

 

一番最初のように余計なアンダーラインがなくなったため、とても見やすくなったのですが、こちらの商品名をクリックし、個別の商品ページの下部にある【あなたへのおすすめ】の商品名のアンダーラインはついたままで変わらなかったので、

先頭につけている body.template-index を削除して記述してみました。(下写真参照)(わかりやすく色つきで囲んでいます)

 

修正箇所.png

 

そうすると、トップページの商品リンク(product-card部分)のアンダーラインも、他のページの商品リンク(product-card部分)のアンダーラインも消えて見やすくなりました。

しかし、素人判断でいじったために不安があります。この記述でも、ほかに影響はありませんでしょうか?

特に影響が無ければ、商品名にアンダーラインがない状態でやっていこうと考えております。

0 件の「いいね!」
Highlighted
先駆者
154 50 159

成功

申し訳ありませんが、テーマ全体への影響を加味した調査や改修となりますと有料で承るレベルの作業になってきますので、お応えしかねるのが正直なところです。

 

とはいえ、今回に関していえば「マウスオーバーでproduct-card__titleクラスをつけた要素のborder-bottomが表示される」という程度の挙動なので、大きくレイアウトが崩れる可能性は低く、body.template-indexで制限せずとも問題はないと割り切れるかなとは思います。

繰り返しになりますが、「完全な保証ではなく、問題がないかあってもかなり小さいと推測できる」という点をご理解ください。