マウスオーバーによるカーソル変更方法

マウスカーソルの変更方法

1. マウスカーソル画像の用意
   まずは、マウスカーソル用の画像を準備します。
   今回は『tyranoscript/data/image/cursor』フォルダの下にマウスカーソル用の画像を用意してみましょう。『cursor』フォルダが無い場合は作成してください。
2. CSSファイルの用意
   次にCSSファイルを作成します。
   今回は『tyranoscript/data/others/css』フォルダの下に、『mystyle.css』という名前のCSSファイル(ただのテキストファイル)を作成します。『css』フォルダや『mystyle.css』ファイルが無い場合は作成してください。
3. CSSファイルへの書き込み
   作成したCSSファイルの一番下に下記の内容を追加します。URL部分は準備した画像ファイルの名前を使用します。
   

   ; マウスカーソル変更
   .cur_search {
     cursor: url("../../image/cursor/search.png") 15 15, pointer !important;
   }
   

4. クリック可能位置の編集
   クリック出来る場所が画像の左上にある場合は問題ないのですが、シューティングゲームの照準などはクリック位置を中心にしたいことがあると思います。このような場合には、URLの後ろにある数値を変更してください。
   このカーソルのクリック位置(ホットスポットと呼ばれています)は、左上を基準(0,0)に(x座標 y座標)の形式で指定することが出来ます。
   cursor: url("../../image/cursor/search.png") 15 15, pointer !important;
5. CSS反映
   [loadcss]タグで作成したCSSファイルの読込を行います。
   特に問題がなければfirst.ksで読み込んでおくと良いでしょう。
   

   ;CSS読込
   [loadcss file="./data/others/css/mystyle.css" ]