CSSジェネレーターでカンタン実装!
Emoji Cursorの使い方
Emoji Cursorはマウスカーソルを絵文字にするCSSジェネレーターです。英語のサイトですが、使い方はとても簡単なのでご安心ください!任意の絵文字とサイズを指定するだけで、CSSコードが生成されます。以下のステップで実際に使ってみましょう!
OptionsにあるSizeから、カーソルのサイズを選択します。こちらは、絵文字のwidth(幅)に反映されます。(高さはそれに応じて自動変換)
50px以上だと、絵文字がぼやけたり、表示に不具合が発生する可能性が高くなる為、40px前後がオススメです!
Sizeの下の絵文字一覧から、カーソルとして表示したい絵文字を選択します。一覧にない絵文字でも、Customに任意の絵文字を入力することで実装することができます。
選択したサイズと絵文字を反映したCSSコードが右記に表示されます。ホバーするとプレビューすることができます。
左下のCopy CSSでCSSコードをコピーし、任意のスタイルシートにペーストします。ウェブサイトで実装されていることを確認しましょう。
実装可能ブラウザは、Chrome, Firefox, Edge 79+ & Safariのみです。IEでは使用できませんので、注意してください。
おわりに
いかがでしたか?少しのステップで、カンタンに遊び心のあるウェブサイトを作ることができますので、是非活用してみましょう!