こんにちは、ゆんつです。
僕のブログには前から少し問題が生じています。
それは「いくつかのリンクの下線が文字に被って取り消し線のようになる問題」です。
これを見てください。
文字の真ん中に線が引かれ一見「取り消し線」のように見えますが、取り消し線ではありません。
普通は文字の下にあるリンクの下線が上にずれ文字に被ってしまい、まるで取り消し線のようになっているのです。
この状態でも普通にリンクとして機能するし、僕のブログのほとんどのリンクは正常に表示されるので放置していましたが、ずっとこの取り消し線のようなリンクの下線が心に引っかかっています。
今日はこれを何とか改善したいと思います。
ビジュアルエディタでは正常に見える
この取り消し線のようなリンクの下線。
ビジュアルエディタでは下線は文字とは被らず、正常な見た目のリンクとして表示されます。
でもプレビュー画面や、実際に記事を公開してみると下線が文字に重なり取り消し線のようになるのです。
リンクの貼り直しでは治らない
この現象を確認して何度かリンクの貼り直しをしてみました。
でも治りません。
テストページを作成して全く同じリンクを貼るとリンクの下線はズレずに表示されたので、リンクの文字列が悪いわけでも無さそうです。
同じ記事内の別のリンクは正しく表示されています。
さっぱり原因がわかりません
検索しても直接解決に結びつくような有用な情報を見つけることができません。
そして何十回もリンクを貼りなおしても直りません。
ですので代替案を考えます。
ブログカードとして貼る
僕はブログテーマに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>
すると、このように下線が消え文字に下線が被ることが無くなります。
今回は下線を消すことにしました
とりあえず今回はタグを使って文字にリンクの下線が被っているものについては、リンクの下線を見えなくなるようにして文字に被らないようにしました。
本当は根本的な解決策がわかるといいんですが、調べてもわからなかったのでとりあえずこれで我慢します。
もし解決策を知っている人は教えてくださるとうれしいです（追記：その後なぜか症状は改善しました(笑)）。
それでは、またですー。
コメント
ゆんつさん、こんにちは。
わたしはホームページをタイトルを含めて記事をリライトしたら、なぜかリンクの下線が文字に被るようになってしまいました。
元の戻す対処法がないか？ネットでググっていたら、ゆんつさんの記事に出会いました。
ゆんつさんは、aタグにstyle=”text-decoration: none;”を追加して下線そのものを表示しないように対応したとありました。
真似してみましたが、私のスキルが低くくてうまくできませんでした。
結論から言いますと、私の場合はリンクの下線が文字に被るようになってしまった固定ページを、いったんゴミ箱に移動して元に戻したら、リンクの下線が文字に被っている状態が治っていました。
ブログテーマはLuxeritasを使用しています。
状況に至った経緯は上記の通りです。
Broken Link Checkerからリンクエラーの通知が届いたので、リンクエラーではないので
リンクエラー数が多かったので一括操作でゴミ箱に移動と、間違った操作をたまたましてしまった。
あとで修復の操作をしようとして、固定ページがゴミ箱に移動しているが分かり、元に戻したら、なぜかリンクの下線が文字に被っている状態が治っていました。
なにか参考になればと思いコメントしました。
gaw913様
貴重な情報ありがとうございます。
「ゴミ箱に入れて戻す」という方法は思いつきませんでした。
今のところ症状が治まっているので、次に同じ事象に遭遇した時に必ず試してみます。
詳しく状況まで教えていただき本当にありがとうとございます。
同じ状態になって困っていました。
gaw913さんのゴミ箱に入れてから戻すでなおりました。
ページを完全に消去する危険もあるので、バックアップしておいてから実行すると吉です。
貴重な経験の記録と有益な情報ありがとうございました。
ひろす様
コメントありがとうございます。
gaw913さんのコメントが参考になったようで何よりです。
今のところ自分の環境では改善しているので、次に同じ症状が出たときはgaw913さんとひろすさんのコメントを参考にさせていただきます！
ありがとうございました。