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

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

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

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

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

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

ここで質問。どれがリンクっぽいですか?(全部リンクになってます)
リンクのテスト
リンクのテスト
リンクのテスト

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

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

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

でも。

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

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

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

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

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

a { color:RGB値; text-decoration:none; }

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

※テンプレートによっては、リンクの色はテンプレートの設定で変更することができます。その場合、そちらで変更しましょう。
※スタイルシートを変更する際は、失敗したとき戻せるように必ずバックアップ(コピー)を取っておいてください。

変更すべきは、

text-decoration:none;

の部分で、これを

text-decoration:underline;

に書き換えます。

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

a:hover { text-decoration:underline; }

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

a:hover { text-decoration:none; }

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

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

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

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

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

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

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

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

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

.post_content a { color:#333; text-decoration:underline; }
.post_content a:hover { text-decoration:none; }

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

追加CSS

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

 コメント/質問、お気軽にどうぞ。

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

画像をポップアップ表示させるプラグイン

画像をクリックするとポップアップさせ、閉じるボタンも表示するプラグイン

ダサいページは、もう作りたくない!なら色数と原色に気を使いなさい

ウェブサイトの色(RGB値)をワンクリックで調べる無料ツール

画像形式はどれがいいの?

ブログを作るなら知っておきたい画像ファイル形式の話(JPG、PNG、GIF)

範囲指定してスクリーンショットが作れるWindows標準ソフト

余白をコントロールして分かりやすくする

文章と対応する画像が分かりにくかったのでCSSで余白を調整してみた