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

Sponsored Link


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

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

 

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

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

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

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

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

 

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

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

 

aタグ リンク デザイン css

 

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

 

 

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[target=”_blank”]というセレクタに:afterという擬似要素(あるセレクタの後ろに適用)を使います↓

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

 

 

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

以上が a タグの CSS カスタマイズの5つの方法でした。

すべてのデザインを適用させてやると、次のようなリンクのデザインになるはずです↓

 

aタグ リンク デザイン css

 

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

後は好みによって足したり引いたりすることで、お望みの a タグリンクのデザインをCSSで作っていきましょう。

 

「なんかCSSの様子がおかしいんだけど・・・!」

という方にはエンジニア専門のQAサイト「teratail」がおすすめです。

質問に答えてくれる方はプロのエンジニアの方ばかりなので、CSSの問題を解決できるかもしれません。

 

それでは!

Lin

飯橋凛(Ihashi Lin)

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


Sponsored Link

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



もう1本読んでみる