【PC用ブログカスタマイズ】リンクの色をBingと同じ青に変更しました【#0044cc】

スポンサードリンク

今使っているブログテンプレートは、デフォルトではリンクの文字色が「グレー」なんです。リンクの色がグレーなことでおしゃれ感はあるものの、読む人にはどこがリンクなのかわかりにくいですよね。

本日、Bingも使っているという認識しやすい青に変更しました。

メモも兼ねて変更したことを記録したいと思います。

f:id:sanpogarden:20160310193911j:plain

参考にした記事

Amebloの川上さんの記事を参考にさせていただきました。 PCの場合「デザイン」→「カスタマイズ」→「CSSデザイン」でCSSデザインにコピペして書き加えれば完成です。

ameblo.jp

この記事の中で使ったのは、「リンク」と「マウスオーバー時」です。 「リンク」はブルーに、「マウスオーバー時」は赤にしました。

記事コンテンツ内のリンクについては、局長さんの記事を参考にさせていただいています。 (「例:本文のリンク色の変え方」参照)

記事コンテンツ内のリンクも同じ色に変更しました。

matoyomi.hatenablog.com

グレーからブルーと赤に変更しただけで、かなりすっきりしたと思います。見やすくなって嬉しい!

Bingが使用している青「##0044cc」がリンクとして認識されやすい

青の中でも選んだ色は「##0044cc」です。 Bingでも使われている色だそうです。パッと見たところ「リンク」として一番認識されやすい色ということで、Bingはリンクの青色を変更するだけで大幅な売り上げアップがあったそうです

minamura.jp

水村亜里さんのブログに、ZDNet Japanの記事が引用されていて「Bingの検索が青い理由」が紹介されています。

Bingの検索リンクが青い理由 BingのユーザーエクスペリエンスマネージャーであるPaul Ray氏は米国時間3月16日、複数の色合いの中から特定の青色(色に詳しい人のために紹介しておくと、「#0044CC」)を選ぶことで、広告クリック数の増加やユーザー関与の増大により、年間売上高が8000万ドル増加したという。 「Bing」の検索リンクが青い理由--マイクロソフトが配色決定の裏側を説明 - ZDNet Japan

青の微妙な色の選び方でリンクがここまで認識されやすいとは驚きですよね。

ちなみに、赤は「#FF0000」です。カラーコード表から見やすそうな赤を即決!

私のブログのリンクは今までグレーだったので、かなり見づらかったと思います。それでもリンク先の記事を読んでくださった方がいて、有難かったです。 これからは、「リンクは青・マウスオーバーすれば赤」ということで、前よりかなり見やすくなったと思います。

カラーコード表を参考に他の色にも変えられる

他の色を選びたい場合は、カラーコード表を参考に好きな色に変更することができます。

www.colordic.org

カスタマイズ関連記事

このブログはPCとスマホのデザインを別にしているので、今回はPCの表示のみ変更しました。

色々手を加えているので順次記事にして記録したいと思っています。それにしても、書くペースが何かと追いついていなくて「あれもこれも書きたい!」という状態です。まずは速く書けるようになるのが先決かもしれません。

「見出しカスタマイズ」についても記事にしています。少し変更するとかなり雰囲気が変わるので、カスタマイズは楽しいですよね。

sanpogarden.hatenablog.com

Copyright © さんぽガーデン(さんこ)all rights reserved.