IT便利帳

コンピュータやタブレット端末の便利な使い方やこれは知らなかったといったことを紹介します。

[WordPress]テキストリンクの色を変更→クリックされやすくなるらしい

      2016/08/01  あとで読む   はてブする

WorePress

リンクの文字の色を変えるとクリックされやすくなるそうです。僕はWordPressテーマ「Stinger3」で編集しています。Stinger3のデフォルトは「color: #5484C8;」という色が設定されています。下の色がそれです。

Stinger3:テキストリンクの色

このような薄い青色が設定されています。

 

リンクがクリックされやすくなるという情報は「最適なリンクの色は?(ウェブ力学)」というサイトで知りました。このサイトによると「Bingが検索結果ページのリンクの色を変更した所、年間売上高が8000万ドル増加した」と書かれていてビックリ!これは大至急変更しなくちゃってなりますよね。

代表例としてGoogleは”#1111cc”、Yahoo!は”#0000de”、Bingは”#0033cc”がテキストリンクの色だということがわかりました。

Google:テキストリンクの色
Yahoo!:テキストリンクの色
Bing:テキストリンクの色

 

どれもはっきりとした濃い青色、濃紺です。ややBingが薄目かな?

以上の理由から、IT便利帳もテキストリンクの色を変更してみることにしました。

スポンサーリンク

wordPressテキストリンクの色を変更(PC)

1. WordPress[ダッシュボード]→[外観]→[テーマ編集]に行き、右下の[スタイルシート(style.css)]をクリックします

2. 少しだけスクロールすると以下の箇所があります。この色を変更します。折角なんでGoogleと同じ色(”#1111cc“)にしてみました。

 

3. Googleと同じ色にしてみました。リンクの箇所のアンダーラインも無しにしたいので、text-decorationを”underline”から”none“に変更します。最後に[ファイルを更新]します。

これで終了です。次にスマートフォンの方も変更します。

 

スポンサーリンク

wordPressテキストリンクの色を変更(スマホ)

1. WordPress[ダッシュボード]→[外観]→[テーマ編集]に行き、右下の[(smart.css)]をクリックします。

2. a:はかなり下の所にあります。真ん中よりやや下、786行目辺りにあります。「アコーディオン」の少し上にありました。下のa:hoverはすぐにあるんですけどね。これもGoogleと同じ色(”#1111cc”)にしてみました。

 

3. 以下のように変更して、[ファイルの更新]をクリックし、テキストリンクの色が変更できれば終了です。もしできない場合は、下のように変更したらできました。

↑これで変わらなければ↓を試してみて下さい。

この用に変更するとテキストリンクの色も変更できました。「a:link」は未訪問のリンク色、「a:visited」は訪問済みのリンク色の指定です

 

最後に

以上で設定完了です。濃い青色に変わりましたでしょうか。この設定変更で、リンクしたサイトや、自分の関連リンクもついでに読んでくれたら嬉しいですね。

簡単な設定なので、みなさんも設定変更してみて下さい。PVやCTR、コンバージョンが上がるかもしれませんよ。

最近はBingのテキストカラー「#0033cc」に設定しています。

【関連】蛍光ペン風にテキスト上をマーカーするCSSを設定してみた

【関連】WordPressプラグイン「AddQuicktag」で良く使うタグを簡単挿入しよう

【関連】ホームページHTML<p>と<br>の違いは応用例から理解しよう

「いいね!」で
最新情報をお届け!

Twitter でIT便利帳を

 - WordPress ,

スポンサーリンク

注目キーワード

スマモバ

U-NEXT

Kindle Unlimited

  関連記事

WorePress
WordPressのビジュアルリッチエディタが表示されず入力や編集ができないときにする方法

cある日、WordPressを立ち上げいざ編集をしようとしたら、入力が全くできま …

WorePress
[WordPress]記事中のmoreタグにAdsenseを追加できるプラグインAdMore

当ブログはWordPressで作成しています。Google Adsenseを表示 …

「SiteOrigin Editor」で分割表示させた画面
WP[Page Builder by SiteOrigin]固定ページで画像を横に並列表示、TOPページを簡単カスタマイズ

WordPressのTOPページに固定ページを使って、画像を横に2列や3列に横に …

蛍光ペン風にテキスト上をマーカーするCSS
蛍光ペン風にテキスト上をマーカーするCSSを設定してみた

色々なブログを拝見していると、とても気になるの強調サインがあります。それは蛍光ペ …

WordPressカテゴリーとサブカテゴリーにまとめてチェックを入れる
WordPressのカテゴリーを一括変換する方法と注意点(具体例付き)

先日、WordPressの既存のカテゴリーをサブカテゴリーに下げて、新しい親カテ …

WorePress
[WordPress]過去記事を最上位に固定表示する方法

過去にアップした記事をもう一度注目させたい時に、過去記事を一番上に固定する方法が …

WPプラグイン「Limit Login Attempts Reloaded」インストール画面
Widget logic teamから通知!WPプラグインLimit Login Attempts Reloadedの設定

先日、僕のWordpressのログイン後の画面にメッセージがやってきました。上が …

アフィリエイト表示が切れている
【Stinger3】記事の中にGoogle AdsenseやAmazonアソシエイトを入れる方法

ブログ内に以下のAmazonアソシエイトを貼り付けようとしたら、下側が表示されな …

GTmetrix
GTmetrixのSpecify image dimensions改善方法

GTmetrixというウェブサイトの表示速度を計測してくれるサイトがあります。こ …

Wordpressプラグイン
WorPressプラグイン「Broken Link Checker」の使い方

WordPressプラグインに「Broken Link Checker」というの …