賢威のリンクの色を変更したり下線を入れる方法!マウスオーバーした時は?

Pocket

lgf01a201402082200
リンクの色を変えるときはサイトのデザインに合わせて色を変えたり、クリックされやい色に変更することが望ましいと言われています。

賢威を使う場合も、それと同じようにサイトの目的とあったリンクの色に変更することにしましょう。



リンクの色を変更する


リンクの色を変えるという場合、主に4つの意味合いがあります。

  • a:link ⇒ 訪問してないリンク
  • a:visited ⇒ 訪問したリンク
  • a:hover ⇒ マウスオーバーした時のリンク
  • a:active ⇒ クリックした時のリンク



それでは、賢威テンプレートのデフォルトではどうなっているのか?



「外観」→「テーマ編集」→「design.CSS」に進み、「2、サイト全体の共通設定」を探しましょう。

2

これは、「a:link」と「a:visited」は#39fという色で、「a:hover」と「a:active」は#f60という色に指定されているということになります。

難しいと感じてしまう人は、「a:link」と「a:visited」の箇所を好きな色に設定し、「a:hover」と「a:active」の箇所にマウスオーバーしたときのどんな色にしたいか、を設定しましょう。



すべて変更したいという場合は、「a:visited」と「a:active」の両方に好きな色設定します。

7863da15a5a4e5e514e98a677cb7138f

下線を入れたり、消したりする


また、今設定したすぐ上にa{ text-decoration: underline;}があります。

476dfce55a5d1776ec6f79d1de1fae62

これはリンクに下線が表示されています、という意味です。

13b66335ffedfd4ce7087a08992375b2


この下線を消したい場合は、a{ text-decoration: underline;}をすべて削除します。そうすると以下のように下線が消えます。

adb7f1e9adf483a4e4f4deb5f8a10bc6


また、マウスオーバーした時だけ下線を表示させたい場合は、「a:hover」を以下のようにします。

a:hover{ text-decoration: underline;}

32d0c4353f5275ce3a6e322afbd5ea44

こうすれば、通常は下線が表示されないが、マウスオーバーしたときだけ下線が表示されるようになります。

コメントを残す

サブコンテンツ