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

Sponsored Link


a タグのリンクを CSSでおしゃれにデザインしたい!

どうも、Linです。ミドルボイス、マスターしました。

 

WordPress のサイトを運営しているとたまに、

a タグリンクのデザインを変更したい

という時があるでしょう。

WordPress のテーマによってデフォルトでリンクのスタイルが決まっているので、必ずしも個人の好みに合っていないのが現状です。

自分好みのaタグのデザインにするためにはカスタマイズは自分で行う必要がありますよね?

 

そんなリンクのカスタマイズは、おそらく次の5つの技があると思います。

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

aタグ リンク デザイン css

今日はこの5つの a タグリンクの CSS のカスタマイズをそれぞれわかりやすくまとめてみました。

 

 

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

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

 

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

まず最も基本といえるのが、

a タグの文字の色を変える方法です。

aタグ リンク デザイン css

 

 

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

「color」というプロパティは、aタグに挟まれた文字の色を装飾するものなので、こちらにお好みの色を設定すればいいわけです。

例えばこのブログでは「#a68940」という色(茶色っぽいやつ)がメインカラーとなっていますので、リンクの色をその色に設定してみました。

 

下線をつける・消す

続いてリンクの文字の下に表示される下線についてですね。

 

aタグ リンク デザイン css

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

text-decorationというプロパティをunderlineに設定してやると、文字の下にいい感じに薄い下線が引かれます。

逆に下線がデフォルトで入っていて、そいつを消したい場合はunderlineではなくて「none」を設定してやればいいわけですね。

 

太字にする

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

aタグ リンク デザイン css

この時はfont-weightというプロパティをboldにしてやれば OK です。

それゆえ次のコードを CSS ファイルに追記してやればいいですね↓

 

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

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

 

aタグ リンク デザイン css

例えば、マウスのカーソルをリンクに載せると色が変わったり、光ったり、なんでしょ動いたりするわけです。

そういう時には:hoverという擬似クラスを使ってやります。

 

例えば、マウスのカーソルをリンクに合わせた時にリンクの色を変更したいときは次のようにするといいですね。

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

 

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

最近、流行っているのが、

リンクを新規ウィンドウの別窓で開く場合に、文末にウィンドウマークをつけるというやつです。

aタグ リンク デザイン css

こちらはaタグに属性セレクタを当てはめてやれば実現できます。

リンクで新規ウィンドウで開く場合は、aタグの属性値に、

target=”_blank”

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

 

属性セレクタの使い方は、

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

なので、aタグでtarget=”_blank”という属性名=属性値をもつ要素を選択したい場合、

a[target=”_blank”]

というセレクタになります。

 

よって、新規ウィンドウでリンクを開くaタグのみ、ウィンドウのアイコンを後ろにつけたい場合、さらにこのa[target=”_blank”]というセレクタに:afterという擬似要素(あるセレクタの後ろに適用)を使うと、

というようになります。

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

 

 

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

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

 

aタグ リンク デザイン css

 

WordPress のテーマではデフォルトでaタグのデザインが決定されていますが、大体この四つの方法で装飾されていることが多いです。

後は個人の好みによってそれらの四つの要素を足したり引いたりすることで、自分のお望みの a タグリンクのデザインをCSSで作っていきましょう。

 

それでは!

Lin

飯橋凛(Ihashi Lin)

インターネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。最近はキムチをまとめ買いにはまっている。


Sponsored Link

コメントはこちらからお願いします!



もう1本読んでみる