Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/kejimari/keijiism.com/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
Pocket

どうも、ケイジです!
賢威7テンプレート使用時のリンクの色を変更する方法を説明していきたいと思います。

リンク色は青色が一般的

賢威7でリンク色とマウスオーバー時のリンク色を変更する方法メイン

リンク色は基本的に青色が一般的です。Googleやヤフーでもリンクは基本青色を使っていますし、他の多くのサイトでもリンクは青色の場合がすごく多いです。だからこそ違和感を与えないためにもリンクは青色として使っていくことをおすすめします。

 

賢威7の場合は例えばクール版だとリンク色が灰色だったりします。そして背景も灰色なのですごく目立ちにくくてリンクとわかりですし、さらにリンク色は背景色と同じだとSEO的に不利になるためカスタマイズした方がいいでしょう。では早速下記でリンク色を変更する方法を説明していきたいと思います。

 

 

賢威7のリンク色変更方法

ダッシュボード→外観→テーマ編集→base.css

賢威7のリンク色変更方法

左側ダッシュボードの外観の中にあるテーマ編集を開きます。すると右側にbase.cssという項目がでてくるのでこちらをクリックします。賢威7ではbase.css内に賢威テンプレートの共通設定とありますので、この項目を探してください。その中の上記画像の赤枠で囲っているcolorの部分がリンク色になっていますのでこちらを変更しましょう。

 

青色は#1111ccや#0033cなどが一般的でGoogleなんかは#1111ccのカラーコードのリンク色となっています。ほかに好きな色があるのであれば検索エンジンでカラーコードと検索して好きな色のコードをこの部分に入力してください。

 

 

賢威7のマウスオーバー時のリンク色変更方法

ダッシュボード→外観→テーマ編集→base.css

賢威7でマウスオーバー時のリンク色変更方法1

同じくbase.css内で先程リンク色を変更したすぐ下の部分でマウスオーバー時のリンク色の色を変更することができます。(マウスオーバーとはリンクにマウスを合わせた時の状態

 

デフォルトではマウスオーバー時は若干青色になるくらいなので、もともとのリンク色を先程のように青色などに変更した際は、マウスオーバー時も変更しなければ違和感が出てきますし、カーソルを合わせているのに変化がなければクリックしようと思っている人にはすごく不親切なので変更していきましょう。

 

賢威7のクール版ではもともと#5077A2という若干の青色のマウスオーバーリンク色が設定されていますが、ここはオレンジに変えてみました。ちなみにオレンジのカラーコードは#f60となります。特に何色でも構いませんが、リンク色と区別した方がよりリンクにマウスが合わさっていることが伝わるのでおすすめです。

 

 

リンク色カスタマイズ前と後の変化

賢威7-デフォルト時

賢威7リンク色変更前

 

リンク色カスタマイズ後

賢威7リンク色カスタマイズ後

 

 

まとめ

リンク色は見にくいという理由とSEO的効果のためにサイト背景色と同じ色にしないように変更しましょう。さらにリンク色を変更するのであればマウスオーバー時のリンク色も一緒に変更してあげないと分かりにくくなるので、リンク色を変更するならばマウスオーバー時のリンク色も同時に変更してしまいましょう。

 

賢威7カスタマイズ一覧まとめ記事へ