賢威7.0で文字のリンク色・マウスオーバー時の色を変更する方法

賢威7で文字のリンク色を変更する方法を解説していきます。通常時のリンク色と、マウスオーバー時のリンク色の変更がありますので、１つずつ見ていきましょう。

通常のリンク色を変更する

『外観』→『テーマの編集』→『base.css』を編集していきます。

通常のリンク色を変更する際にはまずは『賢威テンプレートの共通設定』を探しましょう。その中の

a{
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	color: #03c;
}

こちらのcolor: #03c;を変更していきます。今回は#00FFFFのaquaに変更してみます。

a{
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	color: #00FFFF;
}

【変更前】

【変更後】

最初は#03c;の青色になっています。オシャレなテンプレートなんかだと最初からリンク色がグレーだったり、ピンクになっているものも最近は多くありますが、リンク色は基本的に青にしておいたほうが良いです。

青＝リンクのイメージがあるので、クリックして貰える確率は上がるはずです。

僕はいつも#00bや#03cなどの青を選択しています。

マウスオーバー時のリンク色を変更する

マウスオーバーというのは、リンクの上にマウスを合わせた時に色が変化するあれです。初期設定ではオレンジっぽい色になっています。

同じく『賢威テンプレートの共通設定』の先ほどの変更部分の少し下にある

a:focus{
	color: #f60;
}

こちらのコードを編集していきます。

color: #f60;の部分を変更していきます。黄色に変えてみましょう。

a:focus{
	color: #FFFF00;
}

【変更前】

【変更後】

黄色はちょっと見づらいですね。

リンク色も色々とカスタマイズしてみるのはいいと思いますが、見やすい色というのもあるのであまりごちゃごちゃしたものにはしない方がいいと思います。基本的にはデフォルトのままもOKです。

変更するときは、自分がいいな～と思うサイトのリンク色などを参考に変更してみるのがいいでしょう。