ぼくふくだよっ♪

カスタマイズ大好きな

パパのむすこ。(*'▽')

ウェルシュ・コーギーだよっ(o^^o)

ぼくふくだよっ

アメブロの頃からやっていたのですが

アメブロの左上のアメーバーのロゴに

マウスをオンさせるとアメーバーロゴが

くるっと回転したり(o^^o)

これ

今だにレオのブログはアメーバロゴが回転するように細工しています。
よろしければお試しくださいね。



ふくのブログでも

レオのときと同じような応援ボタンを作りたくなり(笑)

ブログ村の応援ボタンにマウスオンさせると

クルッと回って四角い応援ボタンを

まあるくするよう細工して遊んでいる私です(o^^o)


ランキングに参加中です
応援ありがとだよっ(o^^o)


そうしたところ各方面から

どうやればできるのか？

とのお問い合わせをいただくように…(汗)。



アメブロのときにもやりましたが

css（スタイルシート）の一番最後に

コピペするだけでできる方法を

自分の備忘録として

残しておくことにいたしました。

■重要■
このブログに書いてある
カスタマイズは私の備忘録として記したものです。
なにか不具合等があっても責任は持てませんので
チャレンジされる方はあくまでも自己責任で
お願い致します。

と今回も一応書いておきます＾＾


私のようにマウスをオンすると

四角い画像がまあるく変化する

応援ボタンを作成するには

画像が2枚必要です。

並べ

私の場合この2枚を作成しました。

画像の大きさはそれぞれ200px X 200pxです。

準備としてはこれらの画像をそれぞれアップした場所（アドレス）を

下の枠中の「四角画像の場所」　と

「丸画像の場所」と書いている部分に書き換えた上で

下の枠内の中身を

CSSの最後にコピペするだけでOKです。

/*ブログ村ランキングバナー*/
.banner1 img {
visibility : hidden ;
}
.banner1 a{
width:200px;/*画像の横幅*/
height:200px;/*画像の高さ*/
display:block;
background-repeat : no-repeat;
margin: 0 auto;
background-image : url(四角の画像の場所);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.banner1 a:hover {
width:200px;/*画像の横幅*/
height:200px;/*画像の高さ*/
display:block;
background-repeat : no-repeat;
margin: 0 auto;
background-image : url(丸画像の場所);
box-shadow: 6px 6px 6px #AAA;
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}


コピペしたら

かならず更新してください。

そして、

ブログ記事の応援ボタンを表示させたい場所に

下枠の自分のIDはもちろんブログ村のご自分のIDに

（私の場合8桁の数字）変更してから

下記をコピペしてください。

<p class="banner1"><a href="https://dog.blogmura.com/corgi/ranking/in?p_cid=自分のID" target="_blank" ></a></p>


 あら簡単。

クルッと回る応援ボタンの出来上がりです(o^^o)

ちなみにアメブロでも同様にすればできますよ♪


ふく父のカスタマイズ備忘録でした。


ランキングに参加中です
応援ありがとだよっ(o^^o)















笑う家には福が来た