マウスカーソルを乗せたときだけ明るくなる、RSSアイコンの設置方法
以前の記事（はてなブログでRSSアイコンを設置する方法）にてRSSアイコン設置の方法を書かせていただきました。ところが、いろいろな有名ブログを拝見していると「マウスカーソルを乗せた（あわせた）ときだけ明るくなる」アイコンが多いみたいです。
僕も実装してみたいと思い、いろいろ調べてみました。まだ分からないことだらけですが、とりあえず何とかできたので、今回は僕が行ったことをまとめてみました。
マウスカーソルを乗せると明るくなるアイコンが欲しくなった
ブログにRSSアイコンやTwitterアイコンを設置するのに憧れていたWeb初心者な僕は、HTMLのイロハのイも分からないままなんとかかんとか設定に成功しました。
・（過去記事）はてなブログでRSSアイコンを設置する方法
今も相変わらず「HTMLって？？」という状況ですが、今度は有名ブログさんの記事を見ていて「マウスカーソルを乗せたときだけアイコンが明るくなっとる！」ということに気づいてしまったのです。
「是非、Banguardサイトのアイコンもそうしたい」
と思った僕は、そこから3日間かけてマウスカーソルを乗せたときアイコンの色を変える方法を探しまわりました。
教えてほしい情報はネットと本屋にある
どうやらHTMLとCSSという2つが怪しいということまでは突き止めました。
次の章で触れますが、HTMLとCSSともに人生ではじめて触るモノたちです。正直、全く分かりません。
HTMLは文章を書いたり写真や画像を置くもの。CSSはデザインするもの。
こんな感じに理解しました。
当初はネットで情報を集めようとしたのですが、皆さん当然というかある程度この辺の情報は知っている前提で記事を書かれているブログが大半でした。
2日間ネットの海を泳ぎ回りましたが分からないので、本屋に行って「超初心者向けHTML & CSS講座」みたいな本を数冊立ち読みし、ようやく勘所をつかめた気がします。
ネットはすぐにいろんな情報が見つかって便利ですが、やはり書籍も有効ですね。
HTMLとCSSでアイコンを設置するも、あえなく挫折...
マウスカーソルを乗せることを「ロールオーバー」と言うのを知ったのはネットからです。
意外と簡単そうじゃないか、と思いながらいくつかのブログをはしごしました。まず参考にしたのは以下のブログです。
・少しのコードで実装可能な20のCSS小技集｜ Webクリエイターボックス
RSSアイコンは、はてなブログのサイドバー編集機能より変更が可能です。CSSは、サイドバー編集の「デザインCSS」から追加できます。
ブログの記事を参考に、HTMLとCSSを書いてみました。
HTML
<div class="btn">
<a href="#">
<img src="btn.jpg" width="200" height="60" />
</a>
</div>
CSS
div.btn{
background: url(btn-hover.jpg) no-repeat;
width: 200px;
height: 60px;
}
div.btn a { display: block; }
div.btn a:hover{ background: none; }
div.btn a:hover img { visibility: hidden; }
この通りやってみたら、無事にできました！…が、ここで落とし穴にはまります。
どうしても、アイコンを横並びにできません
RSSアイコンとTwitterアイコンを横並びに配置したいのですが、なぜかできません。どう頑張っても縦に並んでしまうのです。
CSSに何も書かなければ問題なく横並びになるのですが、ロールオーバー時に画像を切り替えたいのでそうも行かず。問題はCSSの書き方にあるのでしょうが、全然わかりません。
JavaScriptとの出会いに助けられた
泣く泣くロールオーバー時の画像切替は諦めようかと思っていたとき、一つの記事を見つけます。
・imgタグ画像をJavaScriptのonMouseOverで表示切り替え｜accelerate utilities
JavaScript？何だそれは。
とりあえず、記事の通りにやってみたところ…できました！
アイコンもRSSとTwitterがきれいに並んでいます。書くHTMLのコードも少なくて意味もよくわかります。本当はCSSの問題を解決したかったのですが、まずは当初目的は達成できました。
僕が書いたコードは以下の通りです。
<a href="リンク先のアドレス"> <img alt="RSS" width="48" height="48" src="元画像URL" onmouseover="this.src='変更画像URL';" onmouseout="this.src='元画像URL'"> </a>
これにTwitter用をくっつけてはてなブログの「モジュール」に追加したところ、できました！！
ちなみに、この記事もとても参考にさせていただきました。
・マウスオーバー画像変更スクリプト｜GIFアニメ工房
終わりに
とは言え、これで完成ではありません。あと2つやり残したことがあります。
・RSSアイコンのマウスオーバー時に出現する、黒い横棒（アイコンの右下に出る）が消せない
・CSSを書くとアイコン同士が縦に並んでしまう
どなたか分かる方がいらっしゃったら、是非お教えいただきたいです…
まだまだWebはド素人以下なので、もっと勉強しなければですね。
