前回の投稿に引きつづいて、スマホサイトでdocomo絵文字(ていうか今回はガラケー絵文字)の装飾を試してみたメモです。
こんな感じ <span class="emoji sun"></span>
の記述でガラケー絵文字をスマホサイト(for iOS/Android)へ表示します。
- HTMLファイルは UTF-8 形式を想定しています。
- 最終的には今回も画像(CSSスプライト)で表示でします。
デモ
こちらをご覧ください。
利用するライブラリ
この「emoji-splite」というJavaScriptライブラリを使います。
導入手順メモ
手順
- このライブラリを取得
$ git clone git://github.com/matsubo/emoji-sprite.git
- index.html で CSSファイル をインクルード
index.html
<link rel="stylesheet" href="emoji-sprite/lib/emoji-sprite/emoji.css">
- HTMLへの記載
index.html
これは<span class="emoji sun"></span>晴れマークです。<br>
これは<span class="emoji cloud"></span>曇りマークです。
結果
ブラウザで表示するとこんな感じ。
デモのソースはこちらに置いておきます。
-
https://github.com/hkusu/emojisprite_demo
-
index.html
を見てください。
-
ほか
- 参考にした記事はこちら
- 絵文字の画像は、シックス・アパートさんが公開しています。
- http://www.sixapart.jp/about/emoji.html
- 利用する際はライセンスに従ってください。