アンカーテキスト（テキストリンク）の色について｜変更のCSSなど

おのです。

ブログやウェブサイトを運営している人の中には、アンカーテキスト（テキストリンク）の色について考えている人も多いと思います。

例えば、色を変更するCSSや、何色がベストなのか気になるところです。

また、アンカーテキストの色によってはクリックされない可能性もあります。

本記事では、アンカーテキスト（テキストリンク）の色について書いたので、自分にとって理想のリンク色を見つけてください。

1. アンカーテキスト（テキストリンク）の色でベストなのは？

アンカーテキスト（テキストリンク）の色でベストなのは青色です。

一般的に、アンカーテキストの色は青色が使われていることが最も多く、サイト読者にとって青色のリンクは自然で親しみがあります。

サイト読者は、青色のアンカーテキストを見ると直感的にクリックできるリンクだと認識します。そのため、青色のアンカーテキストはコンテンツ内で自然に埋め込まれつつ、効果的なクリックへ誘導することができます。

1-1. 検索エンジン・大手メディアの色

検索エンジンなどのアンカーテキスト（テキストリンク）の色は以下の通りです。※2021年4月現在

Google 検索結果	#1a0dab
Google ドキュメント	#1a73e8
YouTube 概要欄	#065fd4
Bing 検索結果	#1a0dab
Yahoo 検索結果	#000d99
Wikipedia 記事内	#0645ad
はてなブログ記事内	#1487bd
Apple ウェブサイト	#06c
Twitter	#1da1f2

記事内で使うアンカーテキストの色は、GoogleドキュメントかWikipediaと同じにしておけば問題ありません。当ブログでも記事内のリンク色はGoogleドキュメントと同じ色にしています。

また、Google DomainsやGoogle検索の仕組みでも同じリンク色（#1a73e8）が使われています。

色々な色を試すと分かりますが、記事内で使うリンクの色は明るめにしないと目立ちません。例えばGoogleの検索結果と同じ色を記事内で使っても、思った以上に文字と一体化するのでリンクだと分かりにくいです。

GoogleやWikipediaが記事内でそのリンク色を使うのには理由があるからです。単純に考えて、最もクリック数が増える色に設定されていることは間違いありません。

例えば、Googleの検索結果とドキュメント内のリンク色が異なるのは、その方がいいからです。効果が高いのでそのようにしているのです。

意外と知られていませんが、Googleをはじめとする検索エンジン各社や企業は、部分的に色を変えたりクリック率を測定したりして青色リンクの色を常にテストしています。

その根拠として、2016年頃のGoogle検索結果に表示されるリンク色と現在は色が異なります。また、マイクロソフトのBingでも以前までは#0044CCでしたが、現在ではGoogleと同じです。Wikipediaのリンク色はHelp:リンク色ページに書かれています。

正直なところ、私たちのような個人のウェブマスターが細かいアンカーテキストの色を考えているよりも、GoogleやWikipediaと同じにしておけばいいだけの話です。

当ブログのWordPressテーマ（AFFINGER5）のデフォルトリンク色は#4682b4 この色でした。現在のリンク色は、#1a73e8 この色です。また、訪問済みのリンク色は #174ea6 この色です。

このようにして比べると、明らかに現在の方がリンクだと分かりやすく、効果的にクリックへ繋がると考えることができます。

1-2. 良くない色

アンカーテキスト（テキストリンク）の色で良くないのは、青色以外です。

青色以外のリンク色だと、それがリンクなのかどうか分かりません。冒頭でも書いた通り、一般的に多くのサイト読者は青色のリンクをクリックできるリンクだと認識しています。

そのため、アンカーテキストが青色以外のリンクになっている場合、クリックされない可能性が高くなります。

例えば、私のおすすめしているサイトはOnoCodeです。WordPressやSEOについて詳しく書いています。と書かれていても、リンクかどうかがよく分かりません。

1-3. アンカーテキスト以外の青色

アンカーテキスト以外の文字に青色を使うのは避けるようにします。

前述している通り、多くのサイト読者は青色がクリックできるリンクだと認識しています。そのため、文字が青色にもかかわらずクリックできないと非常に困惑し、ストレスとなります。

例えば、米国株全11セクターのうち、ヘルスケアセクターと生活必需品セクターは最も騰落率が低いセクターです。と書いてある場合は青色のテキストはクリックできると直感的に判断しています。

しかしそれがクリックできないと、サイト読者にとっては意味の分からない文字の装飾となり、非常に見にくい記事となります。

そういったこともあり、リンク以外の文字装飾で青色は使わないようにしてください。

1-4. テキストの箇所による

必ずしもクリックできるアンカーテキスト（テキストリンク）を全て青色にする必要はありません。ウェブサイト上でテキストの箇所によっては青色である必要は無いケースもあります。

例えば、フッターやサイドバーのテキストを全て青色にするとかなり違和感のある印象となります。フッターの場合、背景に色をつけることが多いので文字が青色である必要はありません。

サイドバーでカテゴリーやタグを全て青色にするとかなり不自然です。そもそもサイドバーは青色ではなくてもクリックできると分かります。また、青色のリンクは「テキスト感」がかなり強いので、サイトトップで使いすぎると場合によってはチープで古っぽい印象となる場合もあります。

そういったことから考えて、一般的なブログやウェブサイトであれば青色のアンカーテキストを使うのは主に記事内がメインで、必要無い部分は青色にする必要はありません。

2. アンカーテキスト（テキストリンク）の色を変更するCSS

アンカーテキスト（テキストリンク）の色を変更するCSSを紹介します。

アンカーテキストでは主に、ベースの色、ホバー時の色、訪問済みの色、下線などをCSSで変更することができます。

セレクタとプロパティを組み合わせれば好きなようにカスタマイズできます。

CSSを構成する各名称

2-1. ベースの色

/* アンカーテキストのリンク色 */
a{
color: #1a0dab;
text-decoration: none; /*下線消す*/
}

2-2. 訪問済みの色

/*訪問済みの色*/
a:visited{
color: #ff4081;
}

2-3. マウスホバー時の色

/*マウスホバー時の色*/
a:hover{
color: #174ea6;
text-decoration: underline; /*下線出す*/
}

2-4. クリック時の色

/*クリック時の色*/
a:active{
color: #26a69a;
}

「#1a0dab」の部分がカラーコードです。

2-5. CSSを書く順序

<a>タグに疑似クラス（「:hover」など「:」があるクラス）を使用する場合は順序が決まっています。≫MDN Web Docs｜:link

記述する順序は以下の通りです。

a
a:link
a:visited
a:hover
a:active

記事内のアンカーテキスト（テキストリンク）の色だけを変えたい場合は、a:linkではなくaで大丈夫です。

a:link（未訪問のリンク）を使うと、サイトトップページなどでクリックできるテキスト全てのリンク色が変わってしまうことがあります。

つまり上記をまとめると、以下のようにCSSを記述します。

/* アンカーテキストのリンク色 */
a{
color: #1a0dab;
text-decoration: none; /*下線消す*/
}

/*訪問済みの色*/
a:visited{
color: #ff4081;
}

/*ホバー時の色*/
a:hover{
color: #174ea6;
text-decoration: underline; /*下線出す*/
}

/*クリック時の色*/
a:active{
color: #26a69a;
}

単純にアンカーテキスト（テキストリンク）の色だけを変更したい場合は、aのCSSだけ書き込みます。

2-6. WordPressでCSSを書く場所

WordPressで追加のCSSを書く場所については、次の記事で書いているので参考にしてください。≫WordPressでCSSを書く場所

ちなみに、WordPressのテーマによってはデフォルトでリンクの色が設定できるようになっているテーマもあります。CSSを編集して書き込む前に、一度テーマをチェックしてみましょう。テーマで設定できるのにCSSを書くと重複するのでムダになります。

テキストの色だけ変更する場合

アンカーテキストでのリンクではなく、単純にテキストに色をつけたい場合もあると思います。

その場合は以下のようにHTMLで書くとテキストの色を変更することができます。

<font color="#1e90ff">ここがテキスト</font>

このように表示されます。→ ここがテキスト

おすすめのWebデザイン学習

HTMLやCSSなどのプログラミングを学習したい場合は、オンラインプログラミングスクールのCodeCamp（デザインマスターコース）や、テックアカデミー（Webデザインコース）がおすすめです。※無料体験可能。

また、Udemyではピンポイントで学習したい内容を見ることがでるので、とても簡単にプログラミングやコードの勉強をすることができます。当然、初心者でも問題ありません。

あわせて読みたい