こんにちは、節税サラリーマンです。
本ブログでは、バズ部さんが作成されたWordPresテーマ、「Xeory Base」を利用しています。
選定に際しては、なるべくウィジェットを減らしたく、SEOに関する機能がある程度組み込まれていること、見た目（デザインとフォント）がシンプルですばらしく、「Xeory Base」を採用させていただいた次第です。
こちらの経緯は、下記記事ご参照ください。
ブログ運営に慣れてくると、「Xeory Base」を採用した大事なポイントをすっかり忘れ、デザイン細かいところばかり気になってきます。
今回、そんな細かいところをひとつカスタマイズしましたので、ご案内させていただくと共に、皆様参考になれば幸いです。
記事内リンクのクリック率を高めたい
「Xeory Base」は「コンテンツ・イズ・キング」を実現するためのWordPressテーマであることから、コンテンツ（記事）を読ませることに特化しており、シンプルな画面、色使い、読みやすいフォントが組み込まれています。
そのため、外部リンク、内部リンクを組み合わせたコンテンツを作成した場合、リンクに下線が引かれず、そこがリンクなのかぱっと見わかりづらいのです。
internet黎明期から、ページリンクのフォントカラーは青で、下線ありと相場は決まっています、ところが、「Xeory Base」では、薄目の青で、下線も無いのです。
今回こちらをカスタマイズしたく考えております。
リンクのフォントカラーを変える
まず、リンクの色が青になった理由を考えてみましょう。ここは、比較する色を大きく、赤、青、黄の3色に絞って考えます。オレンジや、緑を検討しても良いのですが、きりがないため、下記の3色とさせていただきたく考えております。
色の比較
・黄
これは端からだめですね。白やグレーを背景に、黄色を認識することはかなり難しいですので、視認性からも問題かと思います。また、黄には心理的に警戒すべき色として、日本人の意識に刷り込まれています。
信号の黄色もそうですし、工事現場の黄/黒のストライプ、阪神タイガースファン（冗談です。）等、この色を見ると、感覚的に注意、警戒感を感じてしまいます。警戒してほしいところに、ポイントで使うと大きな効果がある色です。
・赤
赤も良いですが、黄と同じく、赤には止まれの意識が刷り込まれております。信号の赤、進入禁止の道路標識などは典型的ですね。
また、緑と同時表示された場合、赤を認識できない色盲、色弱の方が一定比率（日本人の場合5%程度）おり、誰もが使うinternetでは気になる比率になります。
・青
おそらく一番無難で消去法で選ばれたのだと思います。皆さんが思い浮かべる企業サイトのほとんどが青ベースで作成されています。
例外はコーポレートカラーが赤の場合でしょうか？ちなみに楽天は「クリムゾンレッド」をコーポレートカラーとしていますね。
どの青を使うか？
「青は藍より出でて藍より青し」との言葉もありますが、青という言葉からイメージできる色の種類は相当数あります。節税サラリーマンは、長いものに巻かれる気持ち満載ですので、Googleが使用している青を利用しようと思います。
具体的にいうと、下記の青です。
カラーコード：#1122CC
今回、こちらの青に変更する作業を行います。
リンクに下線を引く
仮に、テキストリンクに下線が引かれていない場合、PCであればマウスオーバーで下線が表示されます。しかしながら、スマートフォン接続の場合、そこがリンクであることを明確に伝える手段がありません。
先ほど申し上げたように、下線でリンクの有無を把握することが通常ですので、テキストに下線を引くことで、ダイレクトにリンクの有無を伝えたく考えております。
実作業
※ご注意
今回スタイルシートを編集いたしますので、作業実施前に、バックアップ（メモ帳等に貼り付け）されることをお薦めいたします。
まずはダッシュボードの左メニューから「外観」＞「テーマの編集」をクリックします。その後、右下方にある「スタイルシート（style.css）」をクリックすると、下記のような画面が表示されます。
表示されているテキストから「* all」を探します。
この際に、キーボードでコントロール(ctrl)を押しながらFを押すと、右上に検索窓が出てきますので、そこに「all」と入力すると探しやすい思います。
その少し下あたりを見ていただくと、以下のコードがあると思います。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
a {
text-decoration: none;
color: #2581c4;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
そのコードを以下のように書き換えます。
=＝＝＝＝＝＝＝＝＝＝＝＝＝
a {
text-decoration: underline;
color: #1122cc;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
変更点が少しわかりづらいですが、
2行目の「none」を「underline」に書き換えました。
3行目の「#2581c4」を「#1122cc」に書き換えました。
最後に更新ボタンクリックをお忘れなく。
結果
以下のような表示なりました。
これなら誰が見てもリンクだと認識できますね。
今回の記事作成で下記の記事を参考にいたしました。
クリック率が高くなるテキストリンク色があった！？文字リンクは青なのはなぜ？
まとめ
いかがだったでしょうか？
本ブログもスマートフォンからの検索、流入が約50%となっており、テキストに下線が無くても気にならないをいう方もいらっしゃるとは思います。しかしながら、最近の傾向では画像（バナー）リンクよりも、テキストリンクの方がクリックされれやすい傾向もあるようです。
節税サラリーマンが考えるところでは、スマートフォンで閲覧されている場合、画像リンクをクリックしづらい事もあり、画像リンクのクリック率が低下傾向なのではと思っております。
細かいところですが、今回対応させていただきました。