こんばんはアプリ魂（@appdamacy）です。今日は可愛い絵文字のアイコンフォント「Speakemoji」を簡単な使い方と併せて紹介していきます。
Speakemojiの特徴
使用できる絵文字の種類とサイズについて簡単に説明します。
４８種類の絵文字
- クラス名：.se-angry .se-badEvil .se-badFrown .se-blush .se-boiled .se-cool .se-dead .se-deadSweat .se-emoKiss .se-expressionless .se-flushed .se-frown
- クラス名：.se-goodEvil .se-grin .se-happyKiss .se-joy .se-kiss .se-kissHeart .se-laugh .se-love .se-mask .se-noMouth .se-poisoned .se-relax
- クラス名：.se-sad .se-sadFrown .se-satisfied .se-scream .se-sleep .se-sleepy .se-slightlySad .se-smile .se-smiley .se-smirk .se-sob .se-toungeOut
- クラス名：.se-toungeOutHappy .se-toungeOutWink .se-sweat .se-sweatSmile .se-thumbDown .se-thumbsDown .se-thumbsUp .se-thumbUp .se-weary .se-wink .se-winky .se-wtf
３つのフォントサイズ
- 32pxのクラス名：se-s
- 64pxのクラス名：se-m
- 128pxのクラス名：se-l
ワンポイントで使える32pxからインパクトある128pxまで3つのサイズが用意されています。Webサイトと表情のバランスを取りながらうまく活用してみるのも面白いでしょう。
Speakemojiの使い方
実際に利用するために手順は以下のとおり。
データを入手する
ファイルを開くと公式サイトのトップページがローカル上で表示されることになります。既存のサイトに取り込みたいケースが多いと思うので以下で簡単な使い方を紹介します。
JS・CSSを読み込む
フォルダ名speakemojiのなかに読み込む重要なファイルが入っています。
- JSファイル名：gruntspeakemoji.loader.js
- CSSファイル名：speakemoji.fallback.css
HTML内で指定して読み込むファイルは上記の２つだけ。コードは以下のようなカタチになります。
BODYタグを閉じる手前に２つのコードを挿入したら準備は完了です。
HTMLコードを挿入する
こちらのコードが基本になります。クラスを変更することで好きな表情、サイズの絵文字を使うことが出来ます。
変更する必要のあるのは2つ目と３つ目のクラスになります。
Speakemojiの感想
夜遅くにアイコンフォントを紹介してみた(ﾉ△･｡)
— アプリ魂@はてなブログ (@appdamacy) 2017年3月12日
自前で用意するとひと手間かかるアイコン。そんなときは「Speakemoji」の導入も考えてみるといいかもしれません。また気になるアイコンフォントを見つたら紹介していきますよー。