HTML1行追記でマウスオーバーで色の変わるSNSアイコンを実装してみる。

twitterとかFacebookのアイコンがマウスを乗せたときに色が変わったりするやつ、アレおしゃれじゃないですか?

なんか勝手に身構えて難しそうだなあと思ってたんですけど、簡単に(HTMLに1行書くだけで!)実装できちゃうことがわかったので、自分用にメモ

本当はJavascriptとからしいですが、知らなくてもコピペすれば使えるし、まぁとりあえずその辺はよくわかってなくてもいいかってことで。

マウスオーバーで色の変わるアイコンのコード

タイトルに合わせて無理やり1行にしたら普通に見にくかったのでやっぱり4行に分けておきましょう()
これに合わせて試しにツイッターのアイコンを置いてみるとこんな感じ。

簡単に解説すると、

  • 1行目で遷移先のリンク指定(これは基礎ですね)
  • 2行目でデフォルトの画像指定(これも基礎)
  • 3行目でonmouseっていう難しい属性でマウスオーバー時の画像指定
  • 4行目でマウスを外した時の画像を指定(これやらないと1回乗せたらマウスどけても画像が戻らないよ!)

ついでにCSSでもう少しだけおしゃれに

box-shadowをつけてみる


これだとベースが四角い画像感丸出しなので影も丸くする


ちょっとだけお洒落になったでしょ?CSSわかんなーい><って人のためにコピペ+URL変える+画像に合わせて数字変えればいい感じになるコードを

マウスオーバーでついでにbox-shadowも切り替わるともっとお洒落だけど、その辺はCSSがちょっと疲れそうなので今回はとりあえずここまでで。

まぁすごーい!って程ではないけど、それなりに「いい感じ」にはなったのではないでしょうか?

自分みたいな初心者でもあまり難しくはなかったのでおすすめです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です