Cursor Generator

使い方

1. 標準ポインタで足りる場合は、crosshair や grab など組み込みリストからキーワードを選びます。
2. 画像を使う場合は、画像カーソル に小さいファイルを読み込みます。FileReader で data URL に変換され、端末の外に出ません。
3. ホットスポット の X と Y をピクセルで設定します。ホットスポットは画像内で実際にクリックされる点で、0 0 は左上隅です。
4. リストからフォールバックキーワードを選びます。画像を読み込めないエンジンはこれに戻るので、ポインタが消えることはありません。
5. プレビュー枠 の上でポインタを動かして試し、納得したら CSS をコピーします。出力は cursor: 宣言 1 行です。

こんなときに

• キャンバス・エディタ系ツール —— ブラシや消しゴムの画像で現在のツールが一目で分かる。
• ドラッグハンドルやスライダー —— grab と grabbing で掴める感触が出る。
• ゲームやクリエイティブサイト —— テーマに合ったポインタで個性を出しつつレイアウトは無変更。
• デザインシステム —— 操作ごとにカーソルルールを 1 本ずつ定義し、フォールバックは正直に書く。

プライバシーについて

画像はページ内で data URL に変換され、生成される CSS に直接書き込まれます。アップロード先もサーバー通信も保存もありません。未公開の素材は手元に残ります。

FAQ

Q: 画像はどこまで大きくなれますか？ A: 512 KB を超えるファイルは拒否します。また多くのブラウザは 128 x 128 px を超えるカーソル画像を縮小するか無視するため、32 px か 64 px の小さい PNG / ICO が最も鮮明です。

Q: ホットスポットは何をするものですか？ A: 画像のどのピクセルがクリック点になるかを指定します。32 px の十字線画像なら 16 16 で中心がターゲットに重なり、0 0 では左上隅がクリック点になります。

Q: なぜ末尾にキーワードが必ず付くのですか？ A: 末尾のキーワードがフォールバックです。画像の読み込みに失敗したとき、エンジンの上限を超えたとき、復号中のときに、ポインタが丸ごと消える代わりにこれを表示します。

Q: SVG は使えますか？ A: 現在の Chrome・Edge・Firefox は SVG カーソルを受け付けます。Safari は従来ラスタ形式を好みます。画像を無視するエンジンについてはフォールバックキーワードが効きます。