奈良公園で鹿にあげる鹿せんべいはヒトも食べられます。
でも全然美味しくないですよね。
そんな鹿になりたい人間のために
“ヒト用の鹿せんべい”も売ってるみたいです。
もうそれ普通のせんべいでええやん。
どうも、こんにちは、鹿にはおいしい鹿せんべいです。
リンクは必須
以前FontAwesomeの導入方法はお伝えしましたが、
こんな感じで表示されているだけでしたね。
これを見たらユーザーはリンクだと勘違いしてしまうかもしれません。
その際にリンクが貼られていなかった場合、著しくusabilityが低下します。
人間はリンクだと思ってクリックした際にそれがリンクではなかった場合、非常に不快に感じるそうです。
一旦上のusabilityをクリックしてください。
著しくユーザビリティが低下したと思います。
そういうことです。
なので今回はユーザビリティをのために
FontAwesomeにリンクをつけていきたいと思います。
FontAwesomeへのリンクの付け方
前回
FontAwesomeで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> <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>
このように書き直して
どんっ
ああああああああああ
色が!!
下線が!!
これじゃあとてもイマイチなので
CSSも書き直します。
リンクのカラー
色をつけます。
.fa-twitter { color: #55caee; } .fa-facebook { color: #315096; } .fa-youtube { color: #cd201f; }
このようにそれぞれのクラスに色を当てます。
リンクの下線を消す
リンクの下線を消す
text-decoration: none;
text-decoration:は他にも取り消し線がつけれたりするので、調べて見てください。
text-decoration: none;は
3つ全てに当てたいので、共通しているfabクラスに記入します。
.fab { font-size: 36px; text-decoration: none; }
これで色とリンクが思い通りになったわけですが、
あと一歩足りない気がしますよね。
マウスカーソルが乗っかった時に白っぽくなるように変更してみましょう。
カーソルが乗った時に白っぽくする
もう少しちゃんというと、
マウスオーバーした際に
透明度を下げるように変更しましょう。
透明度は
opacity:値;。
opacityの値は0.0〜1.0の間で設定します。
0に近づくほど透明に近づきます。
.fab:hover { opacity: 0.6; }
0.6くらいで設定しました。
※スクリーンショットの関係上マウスカーソルが表示されてませんが、
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:値;