CSS

FontAwesomeにlinkをつける

奈良公園で鹿にあげる鹿せんべいはヒトも食べられます。
でも全然美味しくないですよね。

そんな鹿になりたい人間のために
“ヒト用の鹿せんべい”も売ってるみたいです。

 

もうそれ普通のせんべいでええやん。

どうも、こんにちは、鹿にはおいしい鹿せんべいです。

リンクは必須

以前FontAwesomeの導入方法はお伝えしましたが、

FontAwesomeでSNSのロゴを手に入れようどうも、こんにちは鹿せんべいです。 WEBサイトを自分で作り始めたら誰もが通るであろう、SNSのロゴのお手軽な実装の仕方をお伝えし...
 logo_example

こんな感じで表示されているだけでしたね。
これを見たらユーザーはリンクだと勘違いしてしまうかもしれません。

その際にリンクが貼られていなかった場合、著しくusabilityが低下します。

人間はリンクだと思ってクリックした際にそれがリンクではなかった場合、非常に不快に感じるそうです。

一旦上のusabilityをクリックしてください。

 

 

著しくユーザビリティが低下したと思います。
そういうことです。

なので今回はユーザビリティをのために
FontAwesomeにリンクをつけていきたいと思います。

FontAwesomeへのリンクの付け方

前回
FontAwesomeでSNSのロゴを手に入れよう
で使ったコードを使用していきます。

このリンクは生きているので安心してください。

下にソースコードも載せてます。

これですね。
Atom_sample_image

よければコピーして使ってください。

<!doctype html>
<html lang="ja">
  <head>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
    <link rel="stylesheet" type="text/css" href="sample.css">

  </head>
  <body>
    <i class="fab fa-twitter"></i>
    <div class="fab fa-facebook"></div>
    <span class="fab fa-youtube"></span>
  </body>
.fab {
  font-size: 36px;
}

i {
  color: #55caee;
  -webkit-font-smoothing: antialiased;
}

div {
  color: #315096;
}

span {
  color: #cd201f;

 

リンクをつける

このFontAwesomeのアイコンたちにリンクをつけるのは非常に簡単です。

aタグにしてlinkを記述するだけですね。

やって見ましょう。

〜省略
 　　　<a class="fab fa-twitter" href="https://twitter.com"></a>
    <a class="fab fa-facebook" href="https://www.facebook.com/"></a>
    <a class="fab fa-youtube" href="https://www.youtube.com"></a>

このように書き直して

どんっ

fontawesome_link_image

ああああああああああ

色が！！
下線が！！

これじゃあとてもイマイチなので
CSSも書き直します。

リンクのカラー

色をつけます。

.fa-twitter {
  color: #55caee;
}

.fa-facebook {
  color: #315096;
}

.fa-youtube {
  color: #cd201f;
}

このようにそれぞれのクラスに色を当てます。

 

リンクの下線を消す

リンクの下線を消す
text-decoration: none;

text-decoration:は他にも取り消し線がつけれたりするので、調べて見てください。

text-decoration: none;は
３つ全てに当てたいので、共通しているfabクラスに記入します。

.fab {
  font-size: 36px;
  text-decoration: none;
}

これで色とリンクが思い通りになったわけですが、
あと一歩足りない気がしますよね。

マウスカーソルが乗っかった時に白っぽくなるように変更してみましょう。

 

カーソルが乗った時に白っぽくする

もう少しちゃんというと、
マウスオーバーした際に
透明度を下げるように変更しましょう。

透明度は
opacity:値;。

opacityの値は0.0〜1.0の間で設定します。
0に近づくほど透明に近づきます。

.fab:hover {
  opacity: 0.6;
}

0.6くらいで設定しました。

fontawesome_opacity

※スクリーンショットの関係上マウスカーソルが表示されてませんが、
youtubeのアイコンがちょっと白っぽくなっています。

このようにカーソルが乗った時に白っぽくなり、よりlinkらしくなりました。

ぜひこれを活用してオシャレにSNSへのリンクをつけましょう♪

今回のコード

<!doctype html>
<html lang="ja">
  <head>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
    <link rel="stylesheet" type="text/css" href="sample.css">

  </head>
  <body>
    <a class="fab fa-twitter" href="https://twitter.com"></a>
    <a class="fab fa-facebook" href="https://www.facebook.com/"></a>
    <a class="fab fa-youtube" href="https://www.youtube.com"></a>
  </body>

.fab {
  font-size: 36px;
  text-decoration: none;
}

.fab:hover {
  opacity: 0.6;
}

.fa-twitter {
  color: #55caee;
}

.fa-facebook {
  color: #315096;
}

.fa-youtube {
  color: #cd201f;
}

Conclusion

まとめ

・リンクをつけるのはaタグにしてhref=”#”
・下線を消すのはtext-decoration: none;
・透明度はopacity:値；

関連記事