あかつきのお宿

マウスカーソルがホバーしたときなどに出てくるポインタを、cssで任意に変更することができます。今日はそれを、自分の好きなものに変更してみようじゃないかと。

ついでに、僕がやったらなぜかIEで上手くいかなかった話も、合わせてお送りします。いろんな記事を参考にすると、IEでもできるって書いてあるんだけどなぁ……何でだぜ？

cursorについて簡単に

マウスのポインタを変更するには、cssでこんな風に書きます。

div {
  cursor: pointer;
}

こうすると、divタグの上にマウスが乗った時に、ポインタが指になります。

僕はほとんど指しか使ったことがなかったんですけど、ポインタに指定できるものは結構いっぱいあるみたいです。スタイルシートリファレンスのページを見るだけでも、20種類くらいはありますね。これだけあれば、必要に応じて、いろんな使い方ができそうです。

cursorに画像を使う

種類があるとは言っても、「これじゃダメだ。俺の理想を実現できん。俺には俺なりの、ポインタに対するこだわりがあるんだぁっ！！」っていう人も、いるかもしれない。

そんな熱いパトスがほとばしった時はどうすれば良いか。

ポインタには、画像を使うこともできるようです。なので画像さえ用意できれば、自分なりのポインタ魂を発揮することが可能ってことですね。

画像を使いたい場合は、こう書きます。

div {
  cursor: url(img/cursor.png);
}

backgroundなんかと同じ感じですね。画像のURLを参照するように書くことで、ポインタが、上記の例で言えば、cursor.pngになります。

実際、画像ポインタを使ったデモを用意したんで、良かったらどうぞ。
デモ画面

デモ画面にある「cursor: url(img/hand_right.png);」が、hand_right.pngという、右方向に指を指している画像を参照しています。

ちょっち書き方注意

混乱させてしまったら申し訳ないんですが、デモ画面のcssは、正確にはこう書いてます。

div {
  cursor: url(img/cursor.png), pointer;
}

意味としては、cursor.pngが参照できなかったらpointerの方を適用する、みたいなことですね。font-familyみたいな書き方ですね。

原因は分からないんですけど、cursorの指定が画像だけだと、ブラウザによっては上手く表示されないっぽいです。っていうか、僕が検証した限りでは、どのブラウザでも上手く表示されなかった。

なので画像の後ろに、pointerでもmoveでもautoでも何でも良いんですが、一つ別の値を入れておくと、ちゃんと画像が出ます。ちなみにautoっていうのは、ブラウザが自動的に選択したポインタが出てきます。

IEでpngは表示できない

IEの場合、png画像だと表示できないみたいです。gifとかでもダメっぽい。IEで表示したいなら「.cur」という拡張子の画像を用意する必要があります。

pngをcurに変換するサイトなどもあるので、用意すること自体は難しくないと思います。
convertio

もう一点。IEの場合は、相対パスで書くと、上手く表示されない場合があるようです。

cssで相対パスを書く場合、cssファイルからのパスになるのが普通なのですが、IEでcursorの画像を相対パス指定すると、なぜか現在表示中のページからの相対パスになってしまうみたいです。だから動的にURLを生成するようなページだと、パスがおかしくなることがある。

IEを考慮するなら、絶対パスで書いとくのが無難っぽいですね。

div {
  cursor: url(http://norm-nois.com/reference/img/hand_left.cur), pointer;
}

デモ画面でも「hand_left.cur」のやつは絶対パスで書いてます。

IEEEEEEE！！

ここまで書いといてなんですが、どちらにしろデモ画面では、IEで見ると上手く動いてないです。

絶対パスでcur画像を使えば出るっていう話だし、例えばこちらのMATOMAKU_BLOGさんを見ると、実際にIEでも画像が出てるっぽいのですが、なぜか僕の環境では上手く出ない……。

正直、原因はよく分かりません。ただ、png画像の方はpointerになって、cur画像の方は矢印のまま何も変わらないことを考えると、cssは効いてるけどcur画像が何らかの理由で表示できてない、みたいな感じなんですかね……？　作成した画像の方に問題があるのかな？

もし原因の分かる方がいたら、ぜひとも教えていただきたい。オナシャス。





画像を使わなくても、例えば「e-resize」「w-resize」で左右の矢印を表示したりすることもできます。ただ画像じゃない場合は、ブラウザによって少し見た目が変わることもあるので、もし統一したいのであれば、今回のように、画像を使うのが良いと思います。

それにしても、何でIEだと出ないんだろうなぁ……はたしてIEが悪いのか僕が悪いのか。それすらも今の僕には分からん。

でも「他力本願」「責任転嫁」「酒池肉林」がモットーの僕としては、IEが悪いことにしておいて、誰かが解決策を教えてくれるのを待ちたい。そして解決策を教えてくれた人が現れたあかつきには、その人を招いて酒宴を設けたい。