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

関連記事

CGI と PHP(モジュール版) の違い

レンタルサーバーにおける「CGI」と「PHP(モジュール版)」の違いについて書きます。 目次1. 「CGI」と「PHP(モジュール版)」の共通点2. 両者の違いと「PHP(モジュール版)」の手軽さ1. …

WordPress のウィジェット内項目の先頭にアイコンを表示する方法(Font Awesome 5 を利用)

WordPress ではサイドバーなどに ウィジェットを作成することができます。 ウィジェット内の各項目の先頭にアイコンを表示する方法はいろいろあると思いますが、本ページでは Font Awesome …

【エックスサーバー】サイトを編集する時は、mod_pagespeed をオフにしましょう

2019年3月27日:「mod_pagespeed設定」機能の新規設定の受付が終了しました。 「mod_pagespeed設定」機能の新規設定の受付終了について – 2019/03/27 …

.htaccess でのアクセス設定に注意

レンタルサーバーでは、特定のディレクトリに .htaccess ファイルを置き、アクセス制限をかける場合があります。 例えば、以下を記述した .htaccess ファイルを置くと、そのディレクトリ以下 …

no image

レンタルサーバーに関して気を付けること

レンタルサーバーに関して気を付けること 借りたサーバのホスト名もしくは IPアドレスを参照する DNS のレコードを残したまま解約してはいけない。 ドメインに関して気を付けること 証明書の期限を短くす …

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