CSS カーソルの変更
最近・・・ クロス（＋）のカーソルの変更方法の質問が多くなりました・・
私はカーソルを変更することには反対なんです
正直・・・教えたくはないんです
ネットにアップしていると言うことは
みなさまの友達だけが見に来るわけではありません
極端な話・・・ 世界中の方たちが見に来れるわけです
カーソルは意味を持ち
世界中で同じに使われています
ですから
カーソルを勝手に変更することは見に来てくれた方たちを戸惑わせ
みなさまのブログ自体を扱いにくくさせることです
これらのことはわかった上で使ってください
カーソルを変更するにはカーソル画像が必要になります
しかしカーソル画像の.ani、.cur、.ico などの拡張子が付いた画像は
アメブロの画像フォルダが受け付けてくれません
そこでアメブロでカーソルを変更するには
直リンがＯＫと明記してある素材サイトさまのカーソル素材を使うか
自分でサーバーを借りてカーソル画像をアップするしか方法はありません
私が知っている直リンＯＫの素材サイトは・・・・ひとつだけなので・・・・
ここにリンクをしてしまうと迷惑がかかりますから検索をしてください
すみません
こちらのサイトオーナーさまは直リンOKと書かれているのですが
直リンはサーバー負担が大きくなります
そのためサーバーから契約解除される場合があります
（こちらの読者さまならご存知のvjcatkickさまの場合もそのためにサーバーを変更され
現在はアメブロからも撤退されておられます）
こういったサイトがそのために消えていかないことを望みます
※こちらに限らず各サイトの注意事項は必ず読んでください
直リンについては こちらのサイトさまにわかりやすく書かれています
http://paki.s33.xrea.com/
または・・・わたしの記事の
http://ameblo.jp/exlink/entry-10271597365.html#direct
ＣＳＳに書く場合
body{cursor:url(カーソル画像のurl);}
a{cursor:url(カーソル画像のurl);}/*リンク部分のカーソル*/
フリープラグインに書く場合
<style type="text/css">
<!--
body{cursor:url(カーソル画像のurl);}
a{cursor:url(カーソル画像のurl);}
-->
</style>
body{cursor:url(カーソル画像のurl);}・・・こちらが通常のカーソルになります
a{cursor:url(カーソル画像のurl);}・・・こちらがリンク部分のカーソルになります
＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋
※素材サイトで・・・
<style type="text/css">
<!--
body{cursor:url(カーソル画像のurl);}
a{cursor:url(カーソル画像のurl);}
-->
</style>
このように配布している場合があります
これは本来は<head>部分に記入するためにこのように配布されています
アメブロでは<head>部分にさわれませんのでフリープラグインにこのまま貼り付けて使います
ＣＳＳの編集ができるスキンの場合は
<style type="text/css">
<!--
と
-->
</style>
この部分以外をＣＳＳに貼り付けてください
CSS 動きません・・ 質問するその前に
http://ameblo.jp/exlink/entry-10131393930.html
＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋
OSやブラウザによって表示されるカーソルの形状は異なる場合があります
表の上にカーソルをのせると そのカーソル形状が確認できます
|
IE（internetexplorer）限定独自のカーソルです
対応しているブラウザーの場合カーソルが変わります
|
ＣＳＳに書く場合
全体のカーソルに適用
body{cursor : 形状;}
リンク部分に適用
a{cursor : 形状;}
フリープラグインに書く場合
<style type="text/css">
<!--
body{cursor : 形状;}
a{cursor : 形状;}
-->
</style>
クロスのカーソルでリンク部分はいままで通り変えない場合は
body{cursor : crosshair;}
クロスのカーソルでリンク部分はヘルプにする場合は
body{cursor : crosshair;}
a{cursor : help;}
カーソルで使用可能な形式は.ani、.cur、.ico などですが
ブラウザーによってはgif,png 画像もカーソルとして使用できます
みなさまのご協力で確認することが出来ました ありがとうございました
ブラウザーが対応していれば表の上でカーソルが変わります
|
FF ：Firefox OP ： Opera SA ： Safari CH ： Chrome
また、カンマ「, 」で区切って複数のカーソルを設定しておくことも出来ます
そのことにより最初が使えない場合は次の設定のカーソル・・・ってことが出来ます
body{
cursor: url(カーソル画像.gif),url(カーソル画像.cur),auto ;
}
gif・pngのカーソル画像が使えるブラウザーでみると カーソル画像.gif のカーソル
対応していないブラウザーの場合は カーソル画像.cur のカーソルが表示されます
※ 最後の ,auto; がないと動作しません（autoでなくてもdefaultなどでもOK）
|
このカーソルに変わります