はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

リンク文字色は青色推奨、HTMLのデフォルト色でも良い、CSSで下線を消しても色は変えない方がいい

ブログ運営初心者にも分かりやすいようにリンクの文字色を変更する方法や理由を解説する。ブログでデザインに凝りたいというのでなければ、リンク文字色は青色にしておく方がいいよ。

概要

リンク文字色をCSSで定義する方法を解説する。未訪問のページと訪問済みページの文字色を異なる色に定義できるが、このページではどちらも同じ色にする方法を述べる。

リンクを青文字にする理由

前提

背景色が白などの薄い色で、文字色が黒などの濃い色のサイトの場合で述べる。背景色が青色の場合にリンクの文字色も青色にすると見辛くなるのは言うまでもない。

色を変える理由

リンクでない部分の文字色に黒系の色を設定していて、リンクも同じような色だとリンクがあるのに気づかれにくい。よって、他とは違うことを視覚的に分かりやすいように色を変える。

例えば、次の二行は両方共にリンクを設定しているが、一見しただけでは二行目にリンクがあるのに気づかない。

  1. はぴらき合理化幻想
  2. はぴらき合理化幻想

青色にする理由

  1. 赤や緑などの他の色よりも、青色は認識しやすいという研究結果がある。
  2. 多くのサイトでリンクに青色が設定されているので、リンクだと推測しやすい。

詳細に関しては次のページが参考になる。

どの青色がいいのか?

青色といっても濃い青色や薄い青色、暗い青色や明るい青色がある。特にこだわりがないのなら、HTMLのデフォルト色を指定しておけばいい。

筆者は、Googleアドセンスのリンク文字色と同じ色にしている。Googleは広告をクリックしてもらうことでお金を稼いでいる。クリックされればされるほど儲かるので、クリックしてもらいやすい色を膨大なデータから導き出しているはず(筆者の勝手な推測)。

以上の理由から、筆者は後述するコードで定義している青色にしている。

CSSコード

コピペで使えるコード

次のコードをCSSに追加すればリンク文字色が青になる。そのままコピペしても使えるが、サンプルコードなのでニーズに合わせて適宜改変して使ってほしい。

a:link,
a:visited {
  color: #00f;
}
a:hover {
  color: #f03;
}

コードの解説

  1. 上記コード内で青文字の#00fが青色を定義している。
  2. 赤文字の#f03はカーソルでリンクをホバーした時の色を定義している。ホバーした時に反応があるとリンクだとより分かりやすい。

コピペしても色が変わらない場合

上記コードで文字色が変わらない場合の原因は次の2つが考えられる。

  1. 設定をミスっている。
  2. CSS定義で優先順位負けしている。

上記1.の場合は設定手順を確認すれば対処可能。上記2.の場合は初心者には対処困難なので、詳しい人にお金を払ってなんとかしてもらおう。

売れ筋ランキング: HTML、CSS の中で最も人気のある商品です

未訪問と訪問済みを同じ色にする理由

詳細は次のページで確認できる。

ハイパーリンクの文字色は未訪問か訪問済みかを分けてCSSで簡単に設定できる。しかし、未訪問と訪問済みで異なる文字色にするのではなく、同じにしておいた方がサイト管理者にとっては有利かな。

訪問済みハイパーリンクの文字色をデフォルトから変更するCSS設定 - はぴらき合理化幻想

はてなブログでCSSをカスタムする方法

詳細は次のページで確認できる。

まとめ

ブログ記事の中にリンクを入れたのなら、気づかれやすいようにしておく方がいい。リンク文字色に青色を設定し、パソコン利用者向けにはカーソルでホバー中に分かりやすくしておくと親切だね。

てすとてすと