Webサイトで絵文字を使う

Webサイトに絵文字を使う方法について説明します。

1. 絵文字を探す

まず、使いたい絵文字を探すには例えば以下のサイトが使えます。

(1) Full Emoji List, v11.0

• The Unicode Consortium という組織が運営しているサイトです。

(2) 絵文字一覧（顔文字：Smileys）? | Let’s EMOJI

2. HTML内で絵文字を使う２つの方法

HTML内で絵文字を使うには、主に２つの方法があります。

1. 絵文字をそのままコピー＆ペーストする方法

絵文字そのものをそのままコピーして、HTML内に貼り付ける方法です。

先ほど挙げたサイトで説明します。

(1) Full Emoji List, v11.0

1. 「Browser」列の絵文字部分を範囲選択します。
2. 右クリックして「コピー」を選択します。
3. これを HTML 内に貼り付けます。

(2) 絵文字一覧（顔文字：Smileys）? | Let’s EMOJI

1. 「テキスト」列の絵文字部分を範囲選択します。
2. 右クリックして「コピー」を選択します。
3. これを HTML 内に貼り付けます。

絵文字はその名の通り「文字」ですので、文字をコピーして貼り付けるのと同じ要領の作業になります。

2. 数値文字参照を使う方法

HTML内で文字や記号を記述する方法の１つである「数値文字参照」を利用する方法です。

絵文字の1つ1つには、Unicode という文字の規格で定められた番号が振られているのですが、この番号を使います。10進数と16進数のどちらでも使えますが、絵文字の一覧表には16進数の番号がよく記載されていますので、こちらを使うことにします。

基本的には、HTML内で以下のように書けば絵文字を表示することができます。

例えば、使いたい絵文字の番号が16進数で「23F0」であった場合は、

となります。ちなみに、この記述をすると「⏰」という表示になります。目覚まし時計です。

こちらも、先ほど挙げたサイトで説明します。

(1) Full Emoji List, v11.0

1. 「Code」という列にある文字列になります。
2. 以下の場合、「U+1F600」となっていますが、最初の「U+」を除いた「1F600」が今回欲しい番号です。
3. ですので、HTMLに貼り付ける文字列は、「😀」になります。
4. 実際、ここに記述してみると「😀」となります。

(2) 絵文字一覧（顔文字：Smileys）? | Let’s EMOJI

1. 「Unicode」という列が、1つ上の例と全く同じ表記方法ですので、同じやり方でできます。
2. しかし、「HTML Entity」列にはそのまま「😀」という文字列がセットされているので、ここをそのままコピーして使うことができます。ラクです。（ここでのアルファベットは大文字でも小文字でも構いません）

参考

• 文字参照 – Wikipedia

3. WordPress の絵文字機能

WordPress で絵文字を使うと自動的に画像に変換されます。
（上記のどちらの方法であっても、記述した絵文字をは画像に変換されて表示されます。）

絵文字はあくまでフォントですので、Webページを閲覧する環境で使用されているフォントに見た目が依存してしまいます。例えば IE では、スタイルシートでちゃんとフォントを指定しないと白黒の絵文字が表示されます。こうした違いを避けるため、絵文字を画像に変換する機能がデフォルトで有効になっているのです（同様の目的で Twitterが開発・使用している画像を流用しています）。

但し、この変換処理はほんの少しとはいえ時間が掛かるため、見ていて結構気になりますし、2018年現在では大きな問題もないと言えるでしょう。もしこの機能を停止したい場合は、Disable Emojis というプラグインを導入すれば簡単に停止してくれます。

参考

• Emoji « WordPress Codex

4. おわりに

Webサイトの中で絵文字を使用する方法について説明しました。

絵文字そのものをHTML内に貼り付ける方法は、見た目も分かりやすいですし操作もラクです。しかし、エディタによってはちゃんと絵文字が入力できない場合もありますので、そういう場合は数値文字参照が役に立ちます。こちらの方法は、見た目は数字だけですのでぱっと見て分かりづらいですが、汎用性は高いです。上手く使い分けることが重要です。