画像を反転させる方法(画像リンク)、マウスポインター(矢印、カーソル)が乗った時に・・ | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。


テーマ:
$やさしいアメブロカスタマイズ!と女性タレント画像


※CSS編集用デザインを採用されている方向けです。

方法は、いろいろあるようですが、アメブロの場合、スキン(テンプレート)のHTMLを加工、修正するには制限があるので、CSSと、貼り付ける場所だけで出来る方法をご紹介してみたいと思います。

こんな画像です。(サンプルとして)

菜々緒さん


まず、CSSの末尾に以下の文字列を貼り付けて下さい。

/*~マウスポインターで画像反転~*/
a.myImgBtn{
display:block;
text-indent:-9999px;
background-repeat:no-repeat;
}



次に実際に表示させたい場所に以下のタグ(山括弧  <  >  で囲まれた半角英数文字記号)を貼り付けて下さい。

<style type="text/css">a#ID{width:px;height:高さpx;background-image:url(画像URL)}a#ID:hover{background-image:url(画像URL2)}</style><a id="ID" class="myImgBtn" href="リンク先URL">説明</a>


赤字のID(タグの名前)の箇所に、myImg~好きな半角英数字~を入れて下さい。
例えば、今日の年号、月日、連番を入れて、myImg2013102701←のようにします。
※三つのIDは必ず同じにして下さい。あと、同じページ内に複数の反転画像を設置する場合は、それぞれのIDは別にして下さい。(画像のURLは違っても、IDが同じだと全部、同じ画像になってしまいます。←自分の経験談です^^;)

青字の箇所にマウスを乗せない時の(一枚目の)画像のURLを記入して下さい。

緑字の箇所にマウスを乗せた時に表示させたい画像のURLを記入して下さい。

あと、画像の幅、高さ、リンク先のURLを記入して下さい。


ちなみに、上のサンプル画像のタグです。

<style type="text/css">a#myImg2010092600{width:69px;height:70px;background-image:url(http://stat001.ameba.jp/user_images/20130421/02/wantan-52/b4/7c/g/t00690070_0069007012508049173.gif)}a#myImg2010092600:hover{background-image:url(http://stat001.ameba.jp/user_images/20130421/04/wantan-52/f3/1b/p/t00690070_0069007012508083478.png)}</style><a id="myImg2010092600" class="myImgBtn" href="http://ameblo.jp/wantan-52/">菜々緒さん</a>



自分の場合、Hタグとかの専門知識の無い素人で、検索で調べながら、やっと表示できるようになりました。

ま、やり方、憶えるとチョットは面白いかもです(笑)

ちと、応用して、大きさの違う画像を組み合わせて造ってみました。

Rola



参考になると、うれしいのですが・・(*゚ー゚)ゞ

ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ