ママンのページを見て、何か気がついたかな～♪
新しく何かが変わったのだけど、わかったかなー？
はい、この画像が見えてる？
たぶんママンが見えない人もいる(涙目)
通常マウスカーソル
↓↓↓
リンク上に乗るとこのカーソル
↓↓↓
ここ
でもクリスマスバージョンのマウスカーソルのことを書いたのだけど
この時のマウスカーソルはIEやSleipnirのブラウザにしか反映せず、
ピグをしている人はFirefoxやオペラ、クロームのブラウザが多いので
見れなかったと思うのね。
Firefoxのブラウザの人、今度はどう？見えるかなー。
見えないという人はまだ以前のキャッシュが残っているので
更新を何度かしてみてくださいね。
このマウスカーソルが何故Firefoxにも見えるのか？というと
カーソルの画像が普通の画像と同じの拡張子、
今回はpngになっているからです。
普通マウスカーソルの拡張子は動くものはaniだったり
動かないタイプはcurだったり・・・
cur （カーソル ファイル）は Windows上でのマウスカーソルのファイルなので
これは特別な拡張子なので画像として見ることができないものなのね。
特殊な形式なので、Windows推奨のIEかそれと似たSleipnirくらいにしか
対応していないのかな？たぶん・・・
(そういうとこは苦手分野なので詳しいことはスルーしてね
)
とにかく上記以外のブラウザでは見れなかった。
しかし、今回
いつも自分が使っているFirefoxでも見えるようにと、
画像の拡張子にしてみました。
画像のアイコンは邪魔にならない程度の大きさにして
透過してくださいね。
pngの拡張子だったら、アメブロのアップローダでアップできるからいいね。
そして、画像が用意できたら、画像のURLを括弧の中に入れて
cssの編集の一番最後に付け足す。
/* ----マウスカーソルここから--- */
body{
cursor: url(画像のURL),default;
}
a{
cursor: url(画像のURL),default;
}
/* ----マウスカーソルここまで--- */
CSSが編集できない人はプラグインに
↓↓↓
<style>body{
cursor: url(画像のURL),default;
}
a{
cursor: url(画像のURL),default;
}</style >
しかし～
冒頭に書いたように、たぶんママンが見えない人もいると・・・
そうなの、今度は逆にIEやSleipnirのブラウザの人は見れないと思う･ﾟ･(ﾉД｀)･ﾟ･
なので自分のよく使うブラウザに対応した方でやってみてくださいね。
Firefoxやクロームは↑のこのやり方
IEやSleipnirは以前の拡張子aniかcurのやり方。
使い分けないとだめなのが難点。
オペラを使っている人は、どちらも見られないと思う(涙目)
(追記あり)
FirefoxでもIEでも見れるためにはこんなCSSなら大丈夫だった。
(CSSの最後に付けたし)
/*マウスカーソル変更*/
body{
cursor: url(Firefox用カーソル画像URL pngやgifの拡張子 ),url(IE用カーソル画像URL curや.aniの拡張子),default;/*デフォルト*/
}
a{cursor:url((Firefox用カーソル画像URL pngやgifの拡張子),url(IE用カーソル画像URL curや.aniの拡張子),default;/*リンク用画像*/
}
゜・*:.。. .。.:*・゜゜・*:.。. .。.:*・゜゜・*:.。. .。.:*・゜゜・*:.。. .。.:*・゜
関連記事
透過画像を作るのにフリーソフトで優れたものがあるので
検索すると親切に使い方を書いているサイトもあるので
自分の使いやすいものを探してくださいね。
色々なフリーのソフトなどをダウンロードして
ペイントソフトで透過画像を作りますが
透過したアイコンなんてつくったことがなーい(涙目)という人のために
一応初心者用アイコンの作り方をリンクしておきます。