どうも、レーウィンです。最近、小難しいサイト作ってるので小さい詰まりポイントが出てきます。記事ネタ増えて嬉しいです（）
今回はcssプロパティのcursorについての不具合。検証をIE9及びIE11でしか実機検証してないのですが、IE10も同じかなーと思ってます。なので、タイトル及び以下詳細ではIEとしています。
もし詰まってる人がいたら、先にこの記事を最後まで読んでから手をつけてください。最後まで。下手したら一部やり直し作業が発生します。
初めに、cssでカーソルをオリジナル画像にする方法
cursor: url("../img/cursor.png"), auto;
基本的にはこんな感じで指定すればいけます。サイズは32px×32px以内にするといいみたいです。それより大きいのを指定する場合はjsで。
画像の指定の仕方はbackgroundと同じ書き方で大丈夫です。で、font-familyと同じように
cursor: A, B, C, auto;
としたら最初Aが表示できるか試して、それで無理ならB、それでも無理ならC、それでもそれでも無理なら”auto”になるという風に指定できます。
ちなみに、画像だけ指定はやめときましょう。不具合の原因になります。かならず文字列指定を最後に加えることです。
ちなみに画像の位置は
cursor: url("../img/cursor.png") -5 -5, auto;
などで調整できます。難しいことはないですね。基本は以上です。
でもIEでは表示されない
最初にも書きましたが、もし今この問題で詰まってるのでしたら、先にこの記事を「最後まで」読んでから手をつけてください。
では、ここからが本題です。
実は
cursor: url("../img/cursor.png") -5 -5, auto;
だとIEは表示されません。
というわけでその解決法について以下に書いていきます。
IE対応について
先に結論からですが、以下で対応できます。
cursor: url("http://www.test.jp/img/cursor.cur"), url("http://www.test.jp/img/cursor.png"), auto;
では、１つ１つ解説していきます。
拡張子はcurもしくはaniじゃないとダメ
url("http://www.test.jp/img/cursor.cur") /*or*/
url("http://www.test.jp/img/cursor.ani")
どちらかの拡張子じゃないとIEは読んでくれません。pngでは無理です。
curもしくはaniファイルを用意しましょう。
パスは絶対パスもしくはルート相対パスじゃないとダメ
url("http://www.test.jp/img/cursor.cur") /*or*/
url("/img/cursor.cur")
(URLは適当です)
パスは絶対パスか、ルート相対パスじゃないとダメです。相対パスでは表示されません。
拡張子curもしくはaniを最初に指定しないとダメ
cursor: url("http://www.test.jp/img/cursor.png"), url("http://www.test.jp/img/cursor.cur"), auto; /*NG*/
cursor: url("http://www.test.jp/img/cursor.cur"), url("http://www.test.jp/img/cursor.png"), auto; /*OK*/
これもしかしたら一番の詰まりポイントだと思うんですけど、cur等のIE対応しているパスを最初に書かないと反映されません。
本来は仮に上の書き方をしてもIEはpngを反映できないので、pngの次に書いてあるcurが反映される・・・となるはずなんですが、IEはおそらく、何故か、対応してない画像が指定されてる部分を「auto」と認識してしまうみたいです。つまり、
cursor: url("http://www.test.jp/img/cursor.png"), url("http://www.test.jp/img/cursor.cur"), auto; /*これは*/
cursor: auto, url("http://www.test.jp/img/cursor.cur"), auto; /*IEではおそらくこう読まれてる*/
ということです。。
なので、最初にcurかaniを指定しましょう。
画像の位置を指定できない
cursor: url("http://www.test.jp/img/cursor.cur") -5 -5, url("http://www.test.jp/img/cursor.png") -5 -5, auto;
これをしている場合、本来は画像の位置がx-5px、y-5pxされるはずですけど、IEは反映されないどころかプロパティ全体を読まなくなります。そのため、ブラウザがデフォルトで設定しているautoになってしまいます。
実験として
cursor: url("http://www.test.jp/img/cursor.cur"), url("http://www.test.jp/img/cursor.cur") -5 -5, url("http://www.test.jp/img/cursor.png") -5 -5, auto;
これを指定している場合、IEは最初に指定されているプロパティである
url("http://www.test.jp/img/cursor.cur")
を読んでくれるはずですが、auto判定になってしまいました。つまり順番に読むとかではなく、cursorで指定したもの全体が読んでない状態であると判断できます。
ちなみに、
cursor: url("http://www.test.jp/img/cursor.cur") 5 5, url("http://www.test.jp/img/cursor.png") 5 5, auto;
これも読んでくれません。マイナスだから、とかは関係なさそうです。ううむ・・・。
重要な補足：IEだけ上記対応しても画像の表示位置がおかしくなる場合
上の全てを対応することでIEではマウスカーソルを画像にすることはできました。
しかしここで新たな問題が発生する場合があります。それは、実際のカーソルの位置と画像の表示位置が大きくずれる現象です。
ここも詰まりポイントの１つですが、解説していきます。ここに関しては書いてる人もすごい少なくて、自分もかなり調べました。
curファイルとaniファイルには「ホットスポット」を設定できる
ホットスポットというのは、カーソルのクリック位置を画像のどの位置にするかというものです。
例えば、デフォルトのとがった矢印ですと、矢印の一番先端がホットスポットということになります。
curファイルをそのホットスポットを設定したデータにすることで、任意の場所にクリック位置を指定することができる。
pngファイルからcurに変換したファイルにはホットスポットが正常に設定されていない
はい、ここが問題の原因ですが、いわゆる「pngからcurに変換するサービス」を使用するとホットスポットの位置が正常に設定されていなかったりするわけです。
そのため、IEでは「ホットスポットないから上の方に置いとくか」となってずれがでてしまうわけです。
ですが、pngからcurに変換するツールでホットスポットを設定できるツールは見付けられませんでした。つまり、pngからcurを作る手段は実質できないというわけです。
そのため、最初からcur制作ツールで作っていく必要があります。
cur制作ツールはこちらがオススメ
Thank you for your cooperation.
https://www.cursor.cc/
こちらは海外のサイトになりますが、ブラウザ上でcurファイルを作ってダウンロードすることができます。
何故このツールをオススメするかというと、「半透明を指定できる」からです。透明は指定できても半透明を指定できないツールが結構ある中、これは非常に優秀です。
操作説明は省略しますが、一応で、自分がこのツールを使った時の手順ですが、
①Photoshop上でアイコンを作って大きく拡大させてドットが見えるようにする
②上サイトを開いて、Photoshopで作ったアイコンを見ながら色をつけていく
③右ツールのhotspotでホットスポットを定める
④下のダウンロードツールを開く
です。注意点として、ダウンロードボタンを押した時にエラー出てやり直しになることがあります・・・なんでや。
めげずに頑張ってください。
ダウンロードされたcurファイルは周囲に余白を感じるサムネイルになりますが、ホットスポットをちゃんと設定してれば問題ありません。
このcurファイルを、上で書いた注意点を守って設置することで始めてIEでcursorをcssで画像にすることができます。
ここまできたら作り初めて大丈夫です。ここまで見ていただき、ありがとうございます。
いやでも、もうほんとここまで来るのに苦労した・・・。俺も褒めて。
上記がめんどくさい場合はjavascriptを使用しましょう
「上のやつめんどくさーい！」とか、「pngファイルしか用意できなーい！」という方はjavascriptで画像をマウスポイントに追従させる形で対応してみてください。
jQueryでのやり方は以下サイト様が書いてくださってます。chocolat様、ありがとうございます。
https://chocolat5.com/tips/cursor-change/
最後に
以下サイト様を参考にさせていただきました。すばらしい記事をありがとうございます。
・chocolat様
https://chocolat5.com/tips/cursor-change/
・cly7796.net様
http://cly7796.net/wp/css/using-images-on-the-cursor/
・あかつきのお宿様
https://norm-nois.com/blog/archives/3368
・ttakuru88様
http://hai3.net/blog/2012/07/12/css-cursor-hotspot/
ではではー！