超有名サイトのテキストリンクの一覧表とコピペ用ソースをつくってみました

テキストリンクのクリック率を上げるためには?

テキストリンクの方がクリック率が高いというのは、以前からよく言われています。

ではどのようなテキストリンクのクリック率が高いのでしょうか?
まず色ですが、「リンクは青色」という認識が、多くのユーザーに浸透しているので、テキストリンクは基本的に青色が良いようです

しかし、青色と言っても色合いが異なるものがたくさんあります。
また、下線(アンダーライン)の有無やマウスオーバーの色など、組み合わせも数限りなくあります。

一体どれが良いのかわからなくなってしまいますよね。
そこでネット界の巨人たちに学べばいい!と思いまして、超有名サイト5社(Google、yahoo!、Bing、Amazon、楽天)の「青色のテキストリンク」を一覧表にしてみました。

ソースも載せましたので、よろしければお使いください。

超有名サイト5社の「青色テキストリンク」一覧表

サイト名 見本 色見本 リンクの色 下線 マウスオーバー 訪問済み
Google #1A0DAB #1A0DAB なし 色の変化なし
下線がつく
#660099
yahoo! #0E1BBB #0E1BBB あり 色が#CC3434へ #4C2472
Bing #001BA0 #001BA0  なし 色の変化なし
下線がつく
#600090
Amazon #0066C0 #0066C0  なし 色が#CF5500へ #003399
楽天
#1F53A7 #1F53A7  なし 色が#C00000へ
下線がつく
色の変化なし

※2017年1月時点のものです。
※検索エンジンは検索結果の色・WEB通販は商品リンクの色を参考にしました。

青色テキストリンクを実装する方法

サイト全体のテキストリンクを変更したいとき

サイト全体のテキストリンクを変更したいときは各テーマのカスタマイザーを使用するか、子テーマのスタイルシートに全体のテキストリンクの変更をする記述をします。

WordPressのテーマにカラーカスタマイザーがある場合

WordPressのテーマでカラーカスタマイザーがついているもの(STINGER PLUS+やSimplicity2など)をお使いの方は、カスタマイザーでリンク色やリンクホバー色の指定をすることができます。

Simplicity2のカスタマイザー

Simplicity2のカスタマイザー

カスタマイザーがないor面倒な方

カラーカスタマイザーがついていないWordPressのテーマ(STINGER8など)をお使いの方、またはいちいちカスタマイザーで変えるのが面倒な方は、子テーマのスタイルシート(style.css)に以下のお好みのソースをコピペしてください。

Googleのようなテキストリンクのソース(全体)
yahoo!のようなテキストリンクのソース(全体)
Bingのようなテキストリンクのソース(全体)
Amazonのようなテキストリンクのソース(全体)
楽天のようなテキストリンクのソース(全体)

個別に変更したいとき

このページのここだけ変更したいよ~という方は、以下のソースを子テーマのスタイルシート(style.css)にソースをコピペした後、変更したいリンクを<div>タグで囲んでください。

Googleのようなテキストリンクのソース(個別)
子テーマのスタイルシート(style.css)にソースをコピペした後、変更したいテキストリンクを<div id=”likegoogle”></div>で囲んでください。

yahoo!のようなテキストリンクのソース(個別)
子テーマのスタイルシート(style.css)にソースをコピペした後、変更したいテキストリンクを<div id=”likeyahoo”></div>で囲んでください。

Bingのようなテキストリンクのソース(個別)
子テーマのスタイルシート(style.css)にソースをコピペした後、変更したいテキストリンクを<div id=”likebing”></div>で囲んでください。

Amazonのようなテキストリンクのソース(個別)
子テーマのスタイルシート(style.css)にソースをコピペした後、変更したいテキストリンクを<div id=”likeamazon”></div>で囲んでください。

楽天のようなテキストリンクのソース(個別)
子テーマのスタイルシート(style.css)にソースをコピペした後、変更したいテキストリンクを<div id=”likerakuten”></div>で囲んでください。