【css】文字リンクに下線を引くか問題。

f:id:Kawan0116:20210430224118p:plain

皆さんのブログでは、文字リンクに下線を引きますか?

作業で頻繁にグーグル先生に教えてもらっていますが、ほとんどのサイトで下線は表示されていないですね。

リンクは下線を引く?

個人的にリンクは下線を引くのが好きです。

「あ、ここはリンクなんだな」と認識されやすいと思っていて、当ブログでは、リンクに下線を引いていました。

もちろん、文字色も青にしています。

これで、なおさら「ここはリンクなんだな」と分かってもらえるような気がします。

デザイン的に見て

しかし、デザイン的に見て「ちょっとここは・・・」と思ったところは、下線は引きませんし青色にもしません。

例えば、トップページの記事タイトルはリンクになっていますが、デザイン的に「青はちょっと・・・」って思って対応していません。

本当は下線を引いたり青色にするのが良いとは思うのですが、とても悩んでいます。

もう少し考えてどうするか答えを出したいと思っています。

グーグルの検索結果で

一方、グーグルの検索結果は下線が引いてありません。

「おぉ、あのグーグルでさえも下線を引いてないのか!?」

って思いましたね。ちなみに、ヤフーでは下線が引いてあります。

どちらにするか迷うところ・・・。

下線を取っ払った

散々悩みましたが、下線を取っ払いました。

しかし、文字色だけは青色にしています。

もちろん、全てではありません。

タグの色や記事タイトルなど、デザイン的に「ちょっとなぁ~」と思ったところは下線を引きません。

しばらくの間、ちょっとこれで試したいと思っています。

「青色→リンク」というのが常識になっている?

それはさておき、「青色→リンク」というのは常識になっているのでしょうか。

個人的には、まぁ、PCを使っている人だったら、そう認識されると思います。

なので、やはり個人的には青色から離脱するのは難しいかなと思っています。

このブログは「はてなブログ」なのですが、デザインテンプレートが沢山あります。

全て試した訳ではないですが、中には青色でない場合もありますね。

最後は好みになるのかなと思います。

まぁ、下線はいつでも復活出来るしね

まぁ、下線はいつでも復活できます。

CSSでちょろっと書くだけ。

こんな感じですね。

a {
text-decoration: underline;
}

基本的に、aタグのところで下線が引かれます。

さいごに

文字リンクに下線を引くかどうかですが、これは永遠のテーマだと思いますね(笑)。

デザインの観点から考えると、あった方が良いのか悪いのか・・・。

下線があるのとないのとでは、見た目がかなり変わりますので、迷いますね。

当ブログは、下線なし路線にしましたが、ちょっと様子を見て再度対応したいと思います。

2021年5月1日追記

部分的に下線を使うことにしました。

タグで下線を使っています。

タグって何も演出しないと、ただのアイコン、もしくは文字だと思われると予想。

下線を引くことで、「これはリンクだな」と思っていただけるようにしました。

これでどうなるか・・・。

ちょっと様子を見ます。

・・・様子を見た結果、ボタンにしようと決めました。

青色に下線でもリンクであることを理解されない場合もあると想定し、ボタンにしました。

この辺りについては、恐らく、そのまま向かうと思います。

ボタンなら「押せるモノ」だと理解されますものね。

よって、ボタンにしました。