今回の記事は、実はSINGER5ネタではありません。ただ、現在使用中のテーマがSTINGER5なので、タイトルに【STINGER5】をつけました。
内容は、ブログのサイドバーにSNSリンクボタンを設置した際の手順をメモした自分用記事です。汎用性のある内容なので、STINGER以外のテーマでも使える方法です。
さて、SNSリンクボタンは他のテーマを使っていた時にも使ったことがあります。しかし、今回はこれまでは違い少し工夫しています。
マウスオーバーでリンクボタンの画像が切り替わるようにしたのです（といっても自分で考えた訳ではなく、ネット上に掲載されている情報をもとにして作業を進めただけです）。
まず、リンクボタンにする画像を用意します。自分で作るか、ネット上で公開されている画像を使うことになります。もちろん、マウスオーバーで切り替えるためにはマウスオーバー前と後の２種類の画像が必要です。
２種類の画像が用意できたら、あとは表示に関わるhtmlを書くだけです。今回は、サイドバーにウィジェットを設置し、そこに次のような記述をしました。この方法は、のサイトで学んだものです。ありがとうございます。
[css]
<a href="リンク先のURL">
<img border="0" src="1番目の画像のアドレス" onMouseOver="this.src=’2番目の画像のアドレス’" onMouseOut="this.src=’1番目の画像のアドレス’">
</a>
[/css]
マウスオーバーで画像を切り替える方法は、他にもいろいろあるみたいでのサイトも勉強になりました。
なお、google+のリンクボタンは、こちらのGoogle+バッジ作成サイトで作りました。
