クリック率がアップ！リンク色を青、アンダーバー付きに変更する方法

どうも、スマコマのコマ太郎です。

ウェブページを作るにもセオリーがあります。その１つにリンクは青系、アンダーバー付きの文字にせよというものがあります。

一般的に青はリンクの色だと思われているからですね。

にもかかわらずリンクでない文字に青を使ってしまうと、ユーザーは混乱してしまうのです。時にそれがストレスとなってユーザーの離脱に繋がります。

初心者が作ったページを見ると、文字装飾が多く、どれがリンクなのか分からないなんてことがありますね。そうならないためにも青系はリンク以外に使わないのが賢明なのです。

このように青＋アンダーバー付きは、一目でそれがリンクだと分かるわけです。

とは言え、使っているテンプレートによって、さまざまなカスタマイズがされており、リンクが青ではなくテンプレートのテーマカラーになっていることも多いですね。さらにアンダーバーも付いていない。最近のデザインの傾向なのでしょう。

確かにヤフーのホームページもグーグルの検索結果もリンクは青でも、アンダーバーが付いていません。青文字であれば、リンクであると認識されてきているとも言えます。

でも。

やっぱり記事の中で１つだけリンクを置くなら、アンダーバーがあったほうが目立ちます。だから、ぼくは必ずコンテンツ内のリンクは青で、アンダーバー付きに改造します。

簡単な方法：サイト全体のリンクをアンダーバー付きにしてしまう

もっとも簡単な改造方法は、サイト全体のリンクのスタイルをアンダーバー付きにしてしまう方法です。

これは通常、どんなテンプレートでも２か所を変更するだけで対応可能で、ベースになる style.css ファイル内の前半に基本的な設定がされています。

見つけるべきは、リンクのスタイルを決める <a>タグのパートです。

RGB値は、#333 などテンプレートによって数値が違います。この数字をいじれば、多くの場合サイト全体のリンク色を変更することも可能です。

変更すべきは、

の部分で、これを

に書き換えます。

これでリンクにアンダーバーが付きます。次にすぐ近くにあるはずの

を探します。これはリンクの上にマウスを持って来た時の動作を決めています。大抵は上記のようにアンダーバー付きが指定されていますが、これを逆に none に書き換えます。

この２か所を変更することで、サイト全体のリンクの設定が変更されます。記事内もサイドバーのリンクもアンダーバーあり・なしが逆転したはずです。

これでリンクが分かりやすくなったはずです。

記事内のリンクだけスタイルを変更するヒント

さて、もう１つの方法として記事内（コンテンツ内）だけのリンクの色を変えたり、アンダーバーあり・なしを変更することもできます。

ただし、これはスタイルシートについて理解していないと面倒を引き起こすので、初心者の人にはおすすめしません。

テンプレートごとにスタイルシートの内容が違うため、個別の説明が必要です。でもそれは現実的じゃないですよね。そこで自信のある人のためにヒントだけ書いておきます。

まず記事を定めている <div> を探し、その class または id を調べます。その class または id に対して <a> のスタイルを設定すれば、完了です。

ただ class の場合、優先度が低いので上手く行かないこともあります。上手く行かない時は、その上の id を探すといいです。

このページのテンプレート（TCD MAXX）なら、post_content という class が記事内に適用されているので

を追加CSS([外観]-[カスタマイズ]-[追加CSS]) に追加すれば、青文字アンダーバー付きになりますよ。ぼくはついつい本体の style.css をいじってしまいますが、テンプレートをアップデートするとカスタマイズした部分がリセットされることがあります。

追加CSS

ですからおすすめは、追加CSS に変更分を入れる方法です。