このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

iPhone で「♥(黒塗りハート)」が絵文字になってしまう問題

このエントリーをはてなブックマークに追加
iphoneheart00.png


こんにちは、さち です。

先日、スマホ用サイトを作っていました。

その時に、ドロップダウンリスト <select> に
「♥︎(黒塗りハート)」を使ったのですが
iPhone でそのハートが絵文字になってしまう問題に遭遇。

自分なりに調べたところ無事解決できたので
記事に残しておこうと思います。




iPhoneで「♥︎(黒塗りハート)」が絵文字になる

HTML で ドロップダウンリスト <select> に
「♥︎(黒塗りハート)」を使用すると
選択時に iPhone の絵文字で表示されてしまいます。

実際の画面がこちら。
ページ上では黒塗りのハートですが
選択肢では絵文字のハートになっています。
操作画面

iPhone が使っているフォントの関係でこうなるようです。

ちなみに、「♡(白抜きハート)」は問題なく
絵文字に変換されずそのまま普通に表示されます。




解決方法

iPhone でテキストファイルに黒塗りハートを打ち
そのファイルを PC に転送して調べてみました。

すると、普通の黒塗りハートの後ろに
見えない文字が付いていることを発見。

その文字は、Unicode の「FE0E」に割り振られている「VS15」。
「VS15」という文字が出るわけではなく
「VS15」という意味を持つ見えない文字です。

この「VS15」が黒塗りハートの直後に付くと
絵文字のハートになるのを防ぐ効果があるようです。

この「VS15」なる文字を入力するには数値文字参照を使います。
HTMLソースに「&#65038;」または「&#xFE0E;」と打つことで
「VS15」を入力できます。
(前者は10進数、後者は16進数での入力)

iPhone でテストした結果がこちら。
HTMLソース<select>での表示
文字サンプル
♥︎文字サンプル
❤︎文字サンプル
&#9829;文字サンプル
&hearts;文字サンプル
♥︎&#65038;文字サンプル
♥︎&#xFE0E;文字サンプル
実際の表示を確認したい人はこちらのページヘ。




おまけ - 「黒塗りハート以外の文字」と「VS16」

iPhone で絵文字になる文字は
「♥︎(黒塗りハート)」以外にも
「☎︎(電話)」「♨︎(温泉)」「♍︎(星座)」など多くあるようです。
詳しくは下記ページを参照して下さい。

   → Standardized Variants - Unicode Character Database(英語)

これらの文字も、前述の説明と同様
直後に「VS15(&#65038; &#xFE0E;)」を付加することで
絵文字になるのを防げます。

また、「VS16(&#65039; &#xFE0F;)」を付加した場合は
強制的に絵文字になるようです。

   → iPhone で「FE0E」「FE0F」付加でどう表示されるかのテスト用ページ
   (iPhoneでアクセスすると違いを実感できます)



このエントリーをはてなブックマークに追加




ブログ移転に伴い、コメント受付は終了しました。
*(^o^)/*
助かりました!
ありがとうございます♥︎
TaMa | 2015/10/13/Tue [EDIT]



記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

2008-2019 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

ブログパーツ