Tips

Webサイトで絵文字を使う

投稿日:2018年4月11日 更新日:

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

1. 絵文字を探す

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

(1) Full Emoji List, v11.0

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

(2) 絵文字一覧(顔文字:Smileys)😀 | Let’s EMOJI

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

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

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

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

&#x” + 16進数の番号 + “;

例えば、使いたい絵文字の番号が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」列にはそのまま「😀」という文字列がセットされているので、ここをそのままコピーして使うことができます。ラクです。(ここでのアルファベットは大文字でも小文字でも構いません)

参考

3. WordPress の絵文字機能

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

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

Chrome のデベロッパーツールで絵文字部分を除いてみたところ

本来は絵文字そのものが表示されるだけです(ここでは、たまたま <p>要素で囲まれています)

しかし、WordPress では画像に変換されます。

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

参考

4. おわりに

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

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

-Tips

執筆者:fitallright

関連記事

エックスサーバーに tree コマンドをインストールする

エックスサーバーは、SSH を使ってターミナルエミュレータでログインすることができますが、tree コマンドが使えません。 ということで、tree コマンドを導入する手順を紹介します。 目次1. tr …

no image

ロリポップ!マネージドクラウドを使ってみた感想と記録

↑この記事から分かるように、2018年10月1日から12月31日までの間【ロリポップ!マネージドクラウドのご利用料金が全額無料】となります。 ここでは、ロリポップ!マネージドクラウド を使ってみた時の …

レンタルサーバーにおけるデータ転送量とは?

レンタルサーバーの機能やスペックを見ていると「転送量の目安」といった項目を目にすることがあります。 ウェブサイトへのアクセスが少ないうちは、あまり気にする必要はない項目ではあるのですが、できれば、 レ …

Windows で、.htaccess(先頭がドットで始まり拡張子を持たないファイル名の)ファイルを作成する方法

レンタルサーバーでは、.htaccess ファイルを使ってサーバー側の設定を変更することが許されているものが多くあります。 そこで、この機能を利用しようと思い Windows のエクスプローラー上で …

WordPress に Font Awesome 5 を導入する方法

WordPress に Font Awesome 5 を導入する方法について説明します。 目次1. はじめに本ページで説明する方法について2. 導入手順「SVG with JS」の導入手順「Web F …

ロリポップ!「スタンダードプラン」
さくらのレンタルサーバ「スタンダードプラン」