絵文字が白黒になっちゃう時の対処法
絵文字に関する投稿を書いてた時に出会した問題についての対処法です。
絵文字が一個だけ白黒になっちゃう！
問題はこれ。
HTMLコードで ☺ と書く、笑顔の絵文字です ☺
HTMLコードでかいてWebサイトで表示した時、他の絵文字は表示されるけどこの絵文字は白黒表示になってしまっていました。
調べてみると他にも白黒で表示されちゃうのがあるみたい。というわけで、絵文字用のフォントを指定して表示させることに。
今回は emoji というクラス名をつけた span タグで絵文字を囲いました。
こんな感じに。
<span class="emoji">☺</span>そしてスタイルをあてます。
.emoji {
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla", "Segoe UI Symbol", "Noto Emoji";
}
ライセンスに注意
Apple の絵文字は、絵文字としての使用のみ許可だそうで、イラストとしてはNGだそうです。
今回のサムネの画像に使おうかと思ったんですけど、絵文字として…の利用ではあるもののグレーかなぁと思い、結局作りました。
そのうち絵文字フォント作ってみたい
ってちょっと思ってみたけど、2024年9月の時点でUnicode標準には合計3,790個の絵文字あるそう。（※ 性別または肌の色調などなどのコンポーネントを含む。）この量作るのはハードだな（笑）
ちなみに最新の絵文字リリースはEmoji 16.0で、次のリリースはEmoji 17.0。2025年9月に予定されているそうです。
さすがに全部作るのは気が遠くなりそうだな〜ってことで、LINE絵文字の方で猫の絵文字作って発売し始めましたので、もしよかったら使ってみてください。
猫好きのための絵文字（茶トラ猫編） - LINE絵文字 | LINE STORE