アメブロの「フリースペース編集」で画像のロールオーバー（マウスオーバー）を使いたい件

またアメブロ問題です。（汗

今回は、アメブロの「フリースペース編集」という領域で画像のマウスオーバーを使いたい場合がありますが、ここで問題。この領域では、JavaScriptが利用できません。

実際、管理画面には…。

サイドバーに自由に文章を表示することができます（HTMLも可）。
JavaScriptはご使用できません。

と注意書きがありますよね。

なので、よくあるJavaScriptを使ったアレは利用できないというわけです。う～ん、泣けてきますよね！ｗ

ここで回避法です。
まあ、アメブロに限ったテクニックでは無いのですが、一応今回はアメブロ問題として書いていきますね！
これ系のソースって、行いたいことの他に色々と無駄というか、関係のない指定が多々あり分かり辛いので、以下には必要最低限に簡潔な情報の記載をいたします。まず、JavaScriptで行えないのでCSSを使って実現いたします。以下、CSSのソースです。

.hogehoge a {
display: block;
width:100px;
height:100px;
background:url("http://www.ここに画像のURL指定");
margin:0 auto;
}
.hogehoge a:hover {
background:url("http://www.ここに画像のURL指定");
}

.hogehoge a　でリンクをdisplay: block;にしてやります。 で、画像自体は背景指定をします。つまりは、HTMLに直接画像は置かないと言う事です。 実際のHTML側はというと。

＆ｎｂｓｐ；

リンクを指定したい場合は↓ （＆ｎｂｓｐ；は表示されないので全角で書いております！本来半角ね！）

＆ｎｂｓｐ；

↑本来＆ｎｂｓｐ；部分に画像を置きたいところですが必要ありません。
なぜなら、display: block;でそのサイズのスペースは確保しているからです。
で、背景に画像をCSSで指定というカラクリ。

あぁ、当たり前ですがこの画像サイズはご自身の画像サイズに合わせて変更してくださいね。
よくわからない場合には、とりあえずこのサイズで突き進んでください！ｗ

後は簡単、最後にマウスオーバーした際に変更される画像を指定します。
CSSでいうところの、.hogehoge a:hover部分ですね。

たった、この2つの指定でJavaScriptを使わずとも、マウスオーバー効果を得ることができます。 必要に応じて、a:activやa:visitedの設定を行ってください。（画像だとあまり必要ないかもですが…）

と言う事で、JavaScript使えない場合にはCSSで簡潔にマウスオーバーいたしましょう！

基本設定からカスタマイズまで! アメブロ逆引き Q&A101 著：内藤　勲 参考価格：¥1,554 価格：¥1,554