こんにちは山形のWEBデザイナー菅野です。
9月末に定期的にお仕事をいただいている
広告代理店さんからお問い合わせいただきました
「カーソルを変更できますか?」
WEBサイト上に表示される
マウスカーソルをオリジナル画像に変更したいと
お客様が強く希望されているらしく
WEBサイトのリニューアル案件なのですが
これができないとリニューアルしたくないとのこと😅
確かにマウスカーソルに関するCSSはあるのですが
今までそういった使い方はしたことがありませんでした
いい機会なのでちゃんと調べてみることにしました🤔
調べてみたところ、マウスカーソルのCSS「cursor」で
画像URLを指定してやるとOKなようです
（例）
.style { cursor: url(https://オリジナル画像URL.jpg), auto; }
できるとは思っていましたが
結構簡単に設定できました👍
画像に変更するとこんな感じ
スマホ・タブレットのタッチパネルではカーソル自体がないので確認できませんが
PCで見ていただくとこんな感じになります
実際設定しみると面白いですね
画像サイズに制限あり
マウスカーソルをオリジナル画像にする際に
注意が必要なのはブラウザによって画像サイズに制限あることです
Gecko (Firefox) ではカーソルの寸法が 128×128px に制限されています。それより大きいカーソル画像は無視されます。
cursor プロパティでの URL 値の使用 | MDN
互換性を考慮すると32×32px 〜 64px×64px 以内の大きさで
マウスカーソル用の画像を作るのが良さそうです
主流デバイスといえるスマホやタブレットでは必要のない機能なので
今後 なかなか使用する頻度は少ないかもしれませんが
マウスカーソルのデザイン次第ではかなり個性を出せそうなので
まずは、お問い合わせいただいているお客様のカーソルを
ばっちりデザインしたいと思います👍
