どうも、ケイジです!
今回は賢威7テンプレートを使ってフッターをカスタマイズした時にフッターのリンク色とマウスオーバー時のリンク色の変更方法を説明していきたいと思います。

フッターの背景色とのバランスを考えてリンク色を選ぶ

賢威7でフッターのリンク色とマウスオーバー時のリンク色変更方法メイン

別記事でリンク色の変更方法は解説していますが、一般的にリンクは青色というのが世間一般で僕らは知らず知らずのうちに青色をリンクと認識していることと思います。ですが、サイトの背景色は基本的に白や薄い色が多いのに対し、フッター部分は濃い色の背景色になっていることが多かったりします。

 

僕が使っているのは賢威7のクール版ですが、デフォルトの背景色は限りなく黒に近い色になっています。そういう場合は無理やり青色にするのは逆効果です。逆に目立たなくなったり、見にくくなることは一番避けなければいけません

 

今回はフッターのリンク色はそのまま白色にしてマウスオーバー時はオレンジ色になるように設定していきたいと思います。では、早速賢威7でフッターのリンク色を変更する方法を説明していきたいと思います。

 

 

賢威7でフッターのリンク色を変更する方法

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

賢威7でフッターのリンク色を変更する方法1

左側ダッシュボード内→外観→テーマ編集→base.cssを開きます。その中にフッターという部分がありますので探してみましょう。その中でそれぞれ上記画像のように通常時のリンク色とマウスオーバー時のリンク色を指定しているカラーコードがありますので、こちらを変更するだけです。

 

上記画像の上の赤枠の部分が通常時のリンク色を指定していて、下の赤枠部分がマウスオーバー時のリンク色を指定しています。

 

気をつけたいこととしては、フッターの背景色を何色にしているかという部分です。僕のサイトでは限りなくフッター背景色は黒に近いのですが、僕はこの色が気に入っているのでこのままにしました。ということで、通常時のリンク色は黒に近い背景色でもしっかり目立つようでなければいけません。

 

だからこそ通常時のリンク色はそのまま白色にして、マウスオーバー時は若干灰色になる程度の変化でしたのでマウスオーバー時にオレンジ色となるようにしてみました。

 

 

フッター部分以外のリンク色とマウスオーバー時のリンク色も調整する

本記事はフッター部分のリンク色とマウスオーバー時のリンク色について説明していますが、メインコンテンツやサイドバーでも同じことがいえます。リンク色は背景と近くない方がいいので、フッター以外のリンク色とマウスオーバー時のリンク色を変更していないでフッターだけ変更するには違和感を感じるかもしれません。

 

下記記事を参照しフッター以外のリンク色も変更してみてください。

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

賢威7でフッターの背景色と文字色を変更する方法

 

 

まとめ

やはりサイトの見た目的にリンク色と背景色の関係で目立たなくなるようにカスタマイズするのだけは気をつけた方がいいということになりますね。見にくくなってしまうとそれだけ訪問者にストレスを与えてしまいます。背景色は何色にするのか?通常の状態のリンク色は目立たなくなっていないか?マウスオーバー時にはっきりとリンクと分かるような色に設定しているか?

 

このような点に気をつけながらフッターのリンク色をカスタマイズしていけばいいと思います。上記の部分を微調整しながら一番訪問者にとって見やすくカッコイイ色調整をしてください!

 

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