カーソルを別の画像に変更する方法

今回はカーソルを矢印から好きな画像に変更する方法をご紹介します。

完成品のサンプル

まずは実際のサンプルで見てもらいましょう。

下記のCodePenのResult画面で、画像の範囲にマウスホバーしてみてください。

するとカーソルが矢印から剣の画像に変更されるはずです。

See the Pen Untitled by takosan (@Yukiwebcreate) on CodePen.

アイコンは変わったでしょうか？

カーソルアイコンを変更するCSS

カーソルのアイコン画像を変更するCSSはとても簡単です。

#foo{
  cursor: url(○○.png), auto;
}

これだけです。

上記のようにすることで、指定のクラスやIDを持つ要素の上でカーソルの画像が任意のものに変更できます。

しかし実は注意点もあるので気を付けてください。

注意点①画像は128pxまでしか使えない

128px以上の画像は指定してもカーソル用の画像として認識されませんので注意してください。

あと、ぶっちゃけ128pxだとデカすぎるので、64px以下、32pxとかがいいところじゃないかなと個人的には思います。

今回のサンプルでは幅32pxのものを使用しています。

カーソル用画像を用意するときは、128px以下と覚えておきましょう。

注意点②代替キーワードが必要

任意の画像をカーソルアイコンとして使用する場合は、以下の「auto」ように代替のキーワードが必要です。

.foo{
  cursor: url("カーソル画像.png"), auto;
}

url()を使用する場合は、必ずそのあとにコンマ（,）で区切ってautoを付けておきましょう。

※autoじゃなくてもいけるっちゃいけるけど初期値である「auto」が無難

参考：https://developer.mozilla.org/ja/docs/Web/CSS/cursor

注意点③厳密には「.cur」形式を使った方がいい

全てのブラウザに対応するためには、「.cur」形式が推奨されています。

オンラインツールで.cur形式に変換もできるようなので必要に応じて試してみてください。