CSSを使って、WEBページでオリジナルのマウスカーソル(ポインター)を利用する

Tweet

239

CSSで標準で利用できるマウスカーソル以外に、オリジナルのカーソルを作成してそれを表示させる方法です。画像等の開閉の時に、マウスカーソル自体をメッセージのある画像に置き換えて 閉じるや開くの動作を分かりやすく使えるのに利用できたり出来ます。イラストをメインに使ったデザインのWEBサイトで雰囲気を出すのにも向いています。

CSSでマウスカーソルをオリジナルのものにする

CSSではcursorとうプロパティがあり、値に規定値を選択するかもしくはURLで画像を指定する事が出来ます。指定できる画像はpng、jpg、gifとcurとaniが使えます。IEでは通常の画像は利用できないようで、curとaniのみ使えます。

CSS

.original {
 cursor: url("9.png"), url("9.cur"), pointer;
}

url(“”) という形でファイルのURLを指定する形でオリジナルのマウスカーソルを利用することが出来ます。値はカンマ(,)で区切って複数指定することが出来ます、前から順番に適応され利用できない場合はその次のをと利用できるとろこまで進みます。

画像は相対パスで指定する事が可能です、CSSと同一階層にある場合はファイル名だけで利用できます。

※ IE11～9 ではなぜか、オリジナルの画像は表示されませんでした、IE8では利用可能でしたがそれ以下は試していません。

cur ファイルの作り方

マウスカーソル用のファイルの作り方ですが、作成した画像をWEBでコンバートしてくれるサイトを利用するのが手軽です、画像をアップロードして変換してダウンロードするだけです。

PNG をCURに変換します。オンラインで無料です- Convertio

https://convertio.co/ja/png-cur/

Tweet

短縮URL:

2015年08月24日 WEB制作系 マウス