はじめに
Webアプリを作成していて、マウスカーソルを「鉛筆」にしたかったのですが、
こちらのサイトによると鉛筆っぽいカーソルは無いことが分かりました。
どうやら、画像ファイルをマウスカーソルに出来るようですので、自作することにしました。
マウスカーソルの設定
マウスカーソルの設定はCSSで行います。
cssでマウスカーソルのキーワードを指定
cursor: pointer;
これは良く使いますが、あまり知られていない(と思われる)画像のURLを指定する書き方があります。
cssでマウスカーソルにする画像を指定
cursor: url('マウスカーソルにする画像ファイルのパス') <x> <y>, auto;
設定値について
マウスカーソルに指定できる画像の条件は
- サイズ：32px*32px
- 形式：pngまたはsvg
となります。
ファイルパスの後ろの「x」「y」はマウスカーソルを画像のどの位置に合わせるかの値です。
cursor: url('pen.png') 0 32, auto;
のように指定すると、左下がカーソル位置になります。
また、カンマの後ろの「auto」はファイルの取得に失敗した場合のカーソル形状の指定になります。
カーソルにする画像を埋め込む
「埋め込む」と言うと語弊があるかもしれませんが、urlで指定するので以下のサンプルのようにsvgタグを直接指定することが出来ます。
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="rgb(0,0,0)" stroke-width="1"><polygon points="1,31 3,21 24,1 31,8 10,29" fill="rgb(208,255,208)"/><polygon points="1,31 3,21 6,22 6.5,25 9,26 10,29" fill="rgb(255,255,208)"/><polygon points="1,31 2,26 5,30" fill="rgb(0,0,0)"/><line x1="6" y1="22" x2="26" y2="2"/><line x1="9" y1="26" x2="29" y2="6"/></svg>') 0 32, auto;
また、base64形式で埋め込むことも出来ます。
サンプル
See the Pen Untitled by masayasu_t (@cjlsrdxi-the-builder) on CodePen.