リンクの下線が文字に被るのが直りません

ブログ初心者

こんにちは、ゆんつです。

僕のブログには前から少し問題が生じています。

それは「いくつかのリンクの下線が文字に被って取り消し線のようになる問題」です。

これを見てください。

文字の真ん中に線が引かれ一見「取り消し線」のように見えますが、取り消し線ではありません。

普通は文字の下にあるリンクの下線が上にずれ文字に被ってしまい、まるで取り消し線のようになっているのです。

この状態でも普通にリンクとして機能するし、僕のブログのほとんどのリンクは正常に表示されるので放置していましたが、ずっとこの取り消し線のようなリンクの下線が心に引っかかっています。

今日はこれを何とか改善したいと思います。

スポンサーリンク

ビジュアルエディタでは正常に見える

この取り消し線のようなリンクの下線。

ビジュアルエディタでは下線は文字とは被らず、正常な見た目のリンクとして表示されます。

でもプレビュー画面や、実際に記事を公開してみると下線が文字に重なり取り消し線のようになるのです。

リンクの貼り直しでは治らない

この現象を確認して何度かリンクの貼り直しをしてみました。

でも治りません。

テストページを作成して全く同じリンクを貼るとリンクの下線はズレずに表示されたので、リンクの文字列が悪いわけでも無さそうです。

同じ記事内の別のリンクは正しく表示されています。

さっぱり原因がわかりません

検索しても直接解決に結びつくような有用な情報を見つけることができません。

そして何十回もリンクを貼りなおしても直りません。

ですので代替案を考えます。

ブログカードとして貼る

僕はブログテーマにCocoonを使用しています。

Cocoonを使っている場合、単純にURLを貼り付けると自動的にリンクがカードのような見た目になります。

リンクのシンプルさは損なわれますが、ブログカードにしてしまえばリンクの下線は表示されません。

下線を表示されないようにする

HTMLのタグを使ってリンクの下線を消すこともできます。

それにはaタグにstyle=”text-decoration: none;”を追加します。


<a href="https://www.mercari.com/jp/search/?keyword=%E3%83%86%E3%83%AC%E3%83%9B%E3%83%B3%E3%82%AB%E3%83%BC%E3%83%89" style="text-decoration: none;>メルカリで「テレホンカード」で検索した結果</a>

すると、このように下線が消え文字に下線が被ることが無くなります。

今回は下線を消すことにしました

とりあえず今回はタグを使って文字にリンクの下線が被っているものについては、リンクの下線を見えなくなるようにして文字に被らないようにしました。

本当は根本的な解決策がわかるといいんですが、調べてもわからなかったのでとりあえずこれで我慢します。

もし解決策を知っている人は教えてくださるとうれしいです。

それでは、またですー。

ブログ初心者
スポンサーリンク
ゆんつをフォローする
スポンサーリンク
こんぷれ

コメント