WordPress（ワードプレス）で、ブログを書いたりサイト運営しているとリンク（aタグ）のデザインを変更したいと思うことがあります。
当ブログのテーマは「JIN」ですが、テーマによってリンクのデザインは決まっていたり変更できても色しか変えられないなどの制約がある場合があります。
そんなときにCSSの知識があれば追加CSSやスタイルシート（style.css）を書き換えれば、好みのデザインに変更することができます。
リンクはただ色が違うよりも太文字になっていた方がよりわかりやすいし目立ちます。
今回はaタグ（リンク）を装飾する方法をご紹介します！
リンクを太文字にするための追加CSS
ワードプレスの「外観→カスタマイズ」メニューの中にある「追加CSS」に以下を追記します。
a{font-weight: bold;}
たったこれだけで、リンクURLが太文字になります。
CSSの勉強をしたことがある人にとってはとても簡単な内容ですが、この追記の意味を説明すると
- aタグ（リンクの文字）の
- font-weight（文字の太さ）を
- bold（太字にする）
という指示をだしていることになります。
こちらと同じ要領で、他にもリンクのデザインを変えることができます。
下線をつける
リンク文字に下線を加える時には以下のCSSを追記します。
a{text-decoration: underline;}
テーマによっては、デフォルトで下線がひかれるようになっていることも多いので、逆に下線を無くしたい場合はunderline;の箇所をnone;にします。
a{text-decoration: none;}色を変える
こちらは当ブログテーマJINの場合「外観→カスタマイズ→カラー設定」にて変更可能です。
他のワードプレステーマにて追加CSSで変更したい場合は以下のCSSを追記します。
a{color: 指定する色;}
「指定する色」のところには、「#0000ff」などの好きなカラーコードを入れます。
カーソルを乗せた時の色を変える
カーソルを乗せた時に変わる色を指定することもできます。
この時には、「:hover」という擬似クラスを使います。
a:hover{color: 指定する色;}
リンクの色は好きな色でかまいませんが、見た人にとってわかりやすい色は青です。
基本的にウェブサイトのリンク色は青であることが多いので、よほどの理由がない限りは青系であることがおすすめです。
