Banguardサイトスマートフォン用の表示で見るBanguardサイト「ビジネスマンを応援するブログ」をテーマに、ビジネスに役立つ記事を書いています。この広告は、90日以上更新していないブログに表示しています。Blog以前の記事(はてなブログでRSSアイコンを設置する方法)にてRSSアイコン設置の方法を書かせていただきました。ところが、いろいろな有名ブログを拝見していると「マウスカーソルを乗せた(あわせた)ときだけ明るくなる」アイコンが多いみたいです。僕も実装してみたいと思い、いろいろ調べてみました。分からないことだらけですが、とりあえず何とかできたので、今回は僕が行ったことをまとめてみました。マウスカーソルを乗せると明るくなるアイコンが欲しくなったブログにRSSアイコンやTwitterアイコンを設置するのに憧れていたWeb初心者な僕は、HTMLのイロハのイも分からないままなんとかかんとか設定に成功しました。今も相変わらず「HTMLって??」という状況ですが、今度は有名ブログさんの記事を見ていて「マウスカーソルを乗せたときだけアイコンが明るくなっとる!」ということに気づいてしまったのです。「是非、Banguardサイトのアイコンもそうしたい」と思った僕は、そこから3日間かけてマウスカーソルを乗せたときアイコンの色を変える方法を探しまわりました。教えてほしい情報はネットと本屋にあるどうやらHTMLとCSSという2つが怪しいということまでは突き止めました。次の章で触れますが、HTMLとCSSともに人生ではじめて触るモノたちです。HTMLは文章を書いたり写真や画像を置くもの。CSSはデザインするもの。こんな感じに理解しました。当初はネットで情報を集めようとしたのですが、皆さん当然というかある程度この辺の情報は知っている前提で記事を書かれているブログが大半でした。CSS講座」みたいな本を数冊立ち読みし、ようやく勘所をつかめた気がします。ネットはすぐにいろんな情報が見つかって便利ですが、やはり書籍も有効ですね。HTMLとCSSでアイコンを設置するも、あえなく挫折...マウスカーソルを乗せることを「ロールオーバー」と言うのを知ったのはネットからです。意外と簡単そうじゃないか、と思いながらいくつかのブログをはしごしました。参考にしたのは以下のブログです。WebクリエイターボックスRSSアイコンは、はてなブログのサイドバー編集機能より変更が可能です。CSSは、サイドバー編集の「デザインCSS」から追加できます。ブログの記事を参考に、HTMLとCSSを書いてみました。}この通りやってみたら、無事にできました!...が、ここで落とし穴にはまります。しても、アイコンを横並びにできませんRSSアイコンとTwitterアイコンを横並びに配置したいのですが、なぜかできません。頑張っても縦に並んでしまうのです。CSSに何も書かなければ問題なく横並びになるのですが、ロールオーバー時に画像を切り替えたいのでそうも行かず。問題はCSSの書き方にあるのでしょうが、全然わかりません。JavaScriptとの出会いに助けられた泣く泣くロールオーバー時の画像切替は諦めようかと思っていたとき、一つの記事を見つけます。utilitiesJavaScript?何だそれは。記事の通りにやってみたところ...できました!アイコンもRSSとTwitterがきれいに並んでいます。書くHTMLのコードも少なくて意味もよくわかります。本当はCSSの問題を解決したかったのですが、まずは当初目的は達成できました。僕が書いたコードは以下の通りです。onmouseout="this.src='元画像URL'"></a>これにTwitter用をくっつけてはてなブログの「モジュール」に追加したところ、できました!!ちなみに、この記事もとても参考にさせていただきました。終わりにとは言え、これで完成ではありません。あと2つやり残したことがあります。・RSSアイコンのマウスオーバー時に出現する、黒い横棒(アイコンの右下に出る)が消せない・CSSを書くとアイコン同士が縦に並んでしまうどなたか分かる方がいらっしゃったら、是非お教えいただきたいです...まだまだWebはド素人以下なので、もっと勉強しなければですね。Tumblr広告を非表示にする関連記事2013-06-27はてなブログに、RSSフィードを簡単登録できる『Feedlyボタン』を設置しましたはてなブログのプロフィール下部に、クリックするだけでFeedly...2013-03-06はてなブログに実施した、4つのデザインカスタマイズブログのデザインを少し変更してみました。先日の記事で、初めてブログに表を書きました。はてなブログで...2012-02-22iPhoneでブログを書くときは、Bluetoothキーボードがおすすめです外出先で空いた時間に、ブログの記事を書くことがあります。検索プロフィール東京都在住、サービスマッチングの会社で主に営業戦略の企画をしています。大事だと思ったことや興味あることを、忘れないように残すためはじめたブログです。このブログが、少しでも皆さんのお役に立てる時があればうれしいです。人気の記事はてなブログをはじめよう!banguard9383さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。