ブログ・サイトのテキストリンクの文字の色を変えるとクリックされやすくなるそうです。
私が使用しているテーマは「color: #5484C8;」という色が初期設定されています。下の色がそれです。
このような薄い青色が設定されています。
リンクがクリックされやすくなるカラーという情報は「最適なリンクの色は？（ウェブ力学）」というサイトで知りました。
このサイトによると「Bingが検索結果ページのリンクの色を変更した所、年間売上高が8000万ドル増加した」と書かれていてビックリ！
これは大至急変更しなくちゃってなりますよね。
代表例としてGoogleは"#1111cc"、Yahoo!は"#0000de"、Bingは"#0033cc"がテキストリンクの色だということがわかりました。
どれもはっきりとした濃い青色、濃紺です。ややBingが薄目かな？
以上の理由から、ブログ「IT便利帳」でもテキストリンクの色を変更してみることにしました。
WordPressテキストリンクの色を変更（パソコンの場合）
まずはパソコンで見る場合のWordPressテキストリンクの色の変更方法です。
（今のWordPressテーマはレスポンシブが主流なので、パソコン・スマホ関係なく1つの変更でOK）
1. WordPress［ダッシュボード］→［外観］→［テーマ編集］に行き、右下の［スタイルシート(style.css)］をクリックします
2. 少しだけスクロールすると以下の箇所があります。この色を変更します。折角なんでGoogleと同じ色（"#1111cc"）にしてみました。
a {
color: #5484C8;
text-decoration: underline;
}
3. Googleと同じ色にしてみました。リンクの箇所のアンダーラインも無しにしたいので、text-decorationを"underline"から"none"に変更します。最後に［ファイルを更新］します。
a {
color: #1111cc;
text-decoration: none;
}
これで終了です。
次にスマートフォンの方も変更します。
WordPressテキストリンクの色を変更（スマホの場合）
次にスマホで見る場合のWordPressテキストリンクの色を変更する方法です。
（テーマがレスポンシブの場合は変更しなくてもOK）
1. WordPress［ダッシュボード］→［外観］→［テーマ編集］に行き、右下の［(smart.css)］をクリックします。
※smart.cssはスマホで表示させるフォルダ名です。各テーマで名称が異なります。
2. a:はかなり下の所にあります。真ん中よりやや下、786行目辺りにあります。
「アコーディオン」の少し上にありました。下のa:hoverはすぐにあるんですけどね。これもGoogleと同じ色（"#1111cc"）にしてみました。
a {
color: #136889;
text-decoration: underline;
}
3. 以下のように変更して、［ファイルの更新］をクリックし、テキストリンクの色が変更できれば終了です。もしできない場合は、下のように変更したらできました。
a {
color: #1111CC;
text-decoration: none;
}
これで変わらなければ↓を試してみて下さい。
a:link {
color: #1111CC;
text-decoration: none;
}
a:visited {
color: #1111CC;
text-decoration: none;
}
この用に変更するとテキストリンクの色も変更できました。「a:link」は未訪問のリンク色、「a:visited」は訪問済みのリンク色の指定です。
※最近のWordPressテーマはレスポンシブなので、PCとスマホを使い分けてコードを入力する必要はありません。
最後に
以上で設定完了です。濃い青色のテキストリンクに変わりましたでしょうか。かなり目立つようになったと思います。
この設定変更で、リンクしたサイトや、自分の関連リンクもついでに読んでくれたら嬉しいですね。
簡単な設定なので、みなさんも設定変更してみて下さい。PVやCTR、コンバージョンが上がるかもしれませんよ。
最近はBingのテキストカラー「#0033cc」に設定しています。
【関連】蛍光ペン風にテキスト上をマーカーするCSSを設定してみた
