この記事は2分で読めます

【CSS】マウスカーソルをemojiにしてみよう!

  • 投稿日
  • 更新日

あとで読む

【CSS】マウスカーソルをemojiにしてみよう!

今回は、マウスカーソルを絵文字にする方法を説明します。CSSジェネレーターを使用することで、一見複雑なコードも一瞬で生成することができます。

イッパイアッテナ

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

CSSジェネレーターでカンタン実装!

Emoji Cursorの使い方

Emoji Cursorはマウスカーソルを絵文字にするCSSジェネレーターです。英語のサイトですが、使い方はとても簡単なのでご安心ください!任意の絵文字とサイズを指定するだけで、CSSコードが生成されます。以下のステップで実際に使ってみましょう!

STEP
Emoji Cursorにアクセス

https://www.emojicursor.app/にアクセスします。

STEP
文字サイズを選択

OptionsにあるSizeから、カーソルのサイズを選択します。こちらは、絵文字のwidth(幅)に反映されます。(高さはそれに応じて自動変換)

50px以上だと、絵文字がぼやけたり、表示に不具合が発生する可能性が高くなる為、40px前後がオススメです!

STEP
絵文字を選択

Sizeの下の絵文字一覧から、カーソルとして表示したい絵文字を選択します。一覧にない絵文字でも、Customに任意の絵文字を入力することで実装することができます。

STEP
ホバーでプレビュー

選択したサイズと絵文字を反映したCSSコードが右記に表示されます。ホバーするとプレビューすることができます。

STEP
CSSコードをして実装

左下のCopy CSSでCSSコードをコピーし、任意のスタイルシートにペーストします。ウェブサイトで実装されていることを確認しましょう。

実装可能ブラウザは、Chrome, Firefox, Edge 79+ & Safariのみです。IEでは使用できませんので、注意してください。

おわりに

いかがでしたか?少しのステップで、カンタンに遊び心のあるウェブサイトを作ることができますので、是非活用してみましょう!

この記事を書いた人

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Web制作について相談してみませんか?

必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。

会社名

任意

お名前

必須

メールアドレス

必須

電話番号

任意

お問い合わせ内容

必須