【はてなブログ】記事内のリンクの色は青がおすすめ！【カスタマイズ】

photo by The Logo Smith

こんにちは、だいぱんまんです。
皆さんは、ブログの本文のリンクは何色にしていますか？
ピンク？茶色？グレー？

大手メディアでは、青色をよく使っています。
その理由は、ユーザにとって、それがリンクだと認識しやすいからです。
リンクの初期値が青色ですもんね。

また、大手メディアではそれぞれ微妙に異なる青色を使っています。
それが結構興味深いんですよね。
そこで今回は、各大手メディアのリンク色とそれをブログに実装する方法をご紹介します。

大手メディアのリンクの色

大手メディア	色コード	色
Google	#1a0dab
Yahoo	#1d3994
ニコニコ動画	#006699
YouTube	#167ac6
livedoor	#216bb1
日経	#113366
Amazon	#004B91
楽天	#1d54a7
はてな	#1841ce
WordPress	#1e8cbe

青は青でも、各メディアごとに微妙に色が異なっていますね。
意識的に他と被らないようにしているのでしょうか。

実装してみた

リンクの色はGoogleと同じものを使ってみました。
ついでに、訪問済みのリンクの色、カーソルをあてたときの挙動も実装してみました。
初期のリンクの色は青、訪問済みのリンクの色は紫、カーソルを当てた時は下線が表示されます。

うーん、しっくりくる！
昔から存在するスタイルはいいですね。

はてなブログでのリンクスタイル設定方法

設定方法は、PC、スマホともに「デザイン」⇒「ヘッダ」⇒「タイトル下」に以下のコードを貼り付けてください。
色コードは個別に書き換えてください。
以下のコードは、Googleと同じリンクスタイルになっています。

<style type="text/css">

// 記事内のリンクスタイル
.entry-content a:link{
    color:#1a0dab;
}
// 記事内の訪問済みリンクスタイル
.entry-content a:visited{
    color: #551A8B;
}
// 記事内のリンクにカーソルをあてたときのリンクスタイル
.entry-content a:hover{
    text-decoration:underline;  // 下線をつける
}

</style>

まとめ

今風のリンクスタイルもいいけど、昔ながらのもいいですよね。
是非一度試してみてください。