CSS ページトップへのアイコンを変更する | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

CSS ページトップへのアイコンを変更する

記事下についているページトップへのアイコンを変更します




標準のアイコン  アップ


コレを    に、さらに マウスが乗った時の画像も    ( 8px × 8px )

※横8px 縦11px で画像を作るとピッタリはまります


画像が用意できましたら

いつものようにCSSの最後にコピペです


/*ページトップへアイコン変更*/

.foot .pagetop img {
visibility : hidden ;
}
.foot a.pagetop {
background-repeat : no-repeat ;
background-image : url(画像のURL) ;
}
.foot a.pagetop:hover {
background-repeat : no-repeat ;
background-image : url(画像のURL );
}

html:first-child .foot .pagetop img {/*Opera*/
visibility : visible ;
}


マウスオーバーの必要が無い場合は・・・・

ってここのサイトで試していただければわかりますが

たぶん指のアイコンに隠れてしまうので必要ないのかもです・・・・


/*ページトップへアイコン変更*/

.foot .pagetop img {
visibility : hidden ;
}
.foot a.pagetop {
background-repeat : no-repeat ;
background-image : url(画像のURL) ;
}

html:first-child .foot .pagetop img {/*Opera*/
visibility : visible ;
}

※注意 Operaだけハック使ってもとの画像が表示されます

 このサイトではOperaハックしていませんのでOperaで見ると表示されないはずです

 Oprea8.5 × Opera 9.2 OK でした ・・・ 古いOperaは無視する?