FontAwesomeにlinkをつける

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

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

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

リンクは必須

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

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

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

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

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

FontAwesomeへのリンクの付け方

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

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

これですね。

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

sample.html

<!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>
    <span class="fab fa-youtube">
  </body>

sample.css

.fab {
  font-size: 36px;
}

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

div {
  color: #315096;
}

span {
  color: #cd201f;

リンクをつける

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

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

やって見ましょう。

sample.html

〜省略
    <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>

このように書き直して

どんっ

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

リンクのカラー

色をつけます。

sample.css

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

.fa-facebook {
  color: #315096;
}

.fa-youtube {
  color: #cd201f;
}

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

リンクの下線を消す

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

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

sample.css

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

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

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

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

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

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

sample.css

.fab:hover {
  opacity: 0.6;
}

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

fontawesome_opacity

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

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

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

今回のコード

sample.html

<!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>

sample.css

.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:値；