概要
もはや日本の文化と言っても過言ではない「絵文字」ですが…
グーグル先生が日本の携帯電話の「絵文字」を…
Unicode（ユニコード）に加える計画を公表したのをきっかけに…
世界中に「絵文字」が爆発的に普及しましたね…
しかしながら…Unicode が内包する問題点…などなどにより…
環境によって表示されない場合もしばしばで… 当サイトでは…
CSS Sprites という手法を使って「絵文字」を表示させています…
Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】
Blogger で使うには少々ハードルも高めでしょうから
Windows10 では標準の「タッチキーボード」の「絵文字」が…現時点で…
Blogger で使い物になるのか…少しばかり検証してみましょう…
Windows10 でタッチキーボードを使うには…
「タッチキーボードボタンを表示」
…にチェックが入っていなければ…
クリックしてチェックを入れる…
「タッチキーボードボタン」
…が表示されます…
…をクリックすると…
「タッチキーボード」が表示されます…
「絵文字」のボタンをクリック…
カテゴリーごとに分類されています…
カテゴリーはボタンで選択します…
Blogger に「絵文字」を投稿してみる
投稿モードを「HTML モード」にして…
「タッチキーボード」の「絵文字」を…
クリックすると「絵文字」が表示されます…
いくつか未認識の「絵文字」があり…線描だけで色が付いていません…
やはり…
同じ「絵文字」が未認識ですね…
他のデバイスでも確認してみる
どうやら…PC では…投稿画面で認識されれば…
そのまま表示されそうですが他のデバイスでも見てみましょう…
とはいえ…ガラケー派なのでパートナーの協力を仰ぎ…
投稿にアクセスして…画面キャプチャーを撮ってもらいました…
iPad での見え方
線描すら表示されない…
完全な未認識が多数ありますね
iPhone での見え方
やはり…線描すら表示されない…
「絵文字」が…ソコソコあります…
絵文字の大きさを変えるには…
Blogger の設定により…文字サイズと「絵文字」のサイズが合わない…
…なんて事もあるでしょうから…表示サイズを変える方法も書いておきます…
<span style="font-size:数px" title="タイトル">絵文字</span>…ってな感じのタグを使います…
「数」半角数字と入れ替えます…
「タイトル」マウスホバー時にツールチップを表示するための記述です…
不要な場合は「 title="タイトル"」の記述ごと削除して下さい…
「絵文字」「タッチキーボード」から「絵文字」を入力して下さい…
絵文字の大きさのサンプル
実際に「winking face」の「絵文字」を表示させてみましょう…
デフォルトサイズ😉
<span title="winking face-default">😉</span>18px😉
<span style="font-size:18px" title="winking face-18px">😉</span>22px😉
<span style="font-size:22px" title="winking face-22px">😉</span>おわりに
年々改善はされているようですが…当然ながら…
全ての「絵文字」に対応している筈もなく…
そもそも…投稿内で使う「絵文字」も限られていますので
暫くは…このまま…CSS Sprites でやって行くつもりです…
Unicode の互換性に関しては…サイトに掲載されていますが…
Full Emoji List, v11.0
使いたい「絵文字」に互換性があると判断できれば…
お手軽に導入できるレベルには達しているように感じられました…
以上です…最後までお読み頂いてありがとうございます…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿