【CSS初心者】aタグリンクのデザインを装飾する5つの方法

a タグのリンクを CSSでおしゃれにデザインしたい！どうも、Linです。ミドルボイス、マスターしました。 WordPressサイトを運営しているとたまに、 a タグリンクのデザインを変更したい という時があるでしょう。テーマによってデフォルトでリンクのスタイルが決まっているので、必ずしも個人の好みに合っていないのが現状です。自分好みのaタグのデザインにするためには、カスタマイズは自分で行う必要があるのです。そんなリンクのカスタマイズは、次の5つの技があると思います。

色を変える
下線を引く・消す
太字にする
ホバーしたらデザインが変わる
新規ウィンドウでアイコンをつける

今日はこの5つのカスタマイズ方法をそれぞれわかりやすくまとめてみました。

a タグリンクの CSSデザインを装飾する5つの方法

それでは早速みていきましょう。

a タグリンクの色を変更する

最も基本といえるのが、 a タグの文字の色を変える方法です。

この場合、次のように CSS ファイルに記載すれば OK です。WordPressだったら「style.css」ですね。

a {
color: 指定したい色;
}

「color」というプロパティは、aタグの文字の色を装飾するものなので、お好みの色を設定すればいいわけです。例えばこのブログでは「#a68940」という色（茶色っぽいやつ）がメインカラーとなっていますので、リンクの色をその色に設定してみました。

a {
color: #a68940;
}

下線をつける・消す

続いて下線についてですね。

下線を付ける場合は次のコードを CSS ファイルに追記すれば OK です。

a {
text-decoration: underline;
}

text-decorationというプロパティをunderlineに設定してやると、文字の下に薄い下線が引かれます。逆に下線がデフォルトで入っていて、そいつを消したい場合はunderlineではなくて「none」を設定してやればいいわけですね。

a {
text-decoration: none;
}

太字にする

リンクの文字を太字にしたいという場合があると思います。

この時はfont-weightというプロパティをboldにしてやれば OK です。それゆえ、次のコードを CSS ファイルに追記してやればいいですね↓

a {
 font-weight: bold;
 }

カーソルのせるとデザインが変化する

リンクの上にマウスのカーソルを乗せると、デザインが変わるというやつも良くありますね。

例えば、マウスのカーソルをリンクに載せると色が変わったり、光ったり、なんでしょ動いたりするわけです。そういう時には:hoverという擬似クラスを使ってやります。例えば、マウスのカーソルをリンクに合わせた時にリンクの色を変更したいときは次のようにするといいですね。

a:hover{
color: 変更したい色;
}

このブログではホバーした時は、黒っぽい色にしたかったので次のようにしてみました↓

a:hover{
color: #161616;
}

新規ウィンドウでリンクを開く場合にアイコンをつける

最近、流行っているのが、新規ウィンドウのリンクデザイン。新規ウィンドウの別窓でリンクを開く場合に、文末にウィンドウマークをつけるというやつです。

こちらはaタグに属性セレクタを当てはめてやれば実現できます。リンクで新規ウィンドウで開く場合は、aタグの属性値に、

target=”_blank”

が加わります。そのため、このtarget=”_blank”という属性値があるaタグに限って適用するデザインをCSSで指定してやればいいわけですね。属性セレクタの使い方は、

要素名[属性名=”属性値”] {プロパティ名:値;}

なので、aタグでtarget=”_blank”という「属性名=属性値」をもつ要素を選択したい場合、 a[target=”_blank”] というセレクタになります。また、アイコンを要素の後ろにつけたい場合、さらにこのa[target=”_blank”]というセレクタに:afterという擬似要素（あるセレクタの後ろに適用）を使います↓

a[target="_blank"]:after {
font-family: 'FontAwesome';
content: '\f08e';
font-size:0.9em;
margin:0 3px 0 2px;
}

FontAwesomeで新規ウィンドウのアイコンを取ってきて、それを新規ウィンドウで開くaタグのケツにのみつけるということをやっているわけです。

さあ、aタグを自由にデザインしてみよう！

以上が a タグの CSS カスタマイズの5つの方法でした。すべてのデザインを適用させてやると、次のようなリンクのデザインになるはずです↓

WordPress のテーマではデフォルトでaタグのデザインが決定されていますが、大体この5つの方法で装飾されていることが多いです。後は好みによって足したり引いたりすることで、お望みの a タグリンクのデザインをCSSで作っていきましょう。それでは！ Lin]]>

a タグリンク の CSSデザインを装飾する5つの方法