アプリ魂

はじめてのプログラミング生活

気持ち伝わる絵文字アイコンフォント「Speakemoji」がとっても可愛い!

気持ち伝わる絵文字アイコンフォント「Speakemoji」がとっても可愛い!

こんばんはアプリ魂(@appdamacy)です。今日は可愛い絵文字のアイコンフォント「Speakemoji」を簡単な使い方と併せて紹介していきます。

Speakemojiの特徴

Speakemojiの特徴

Speakemojiで使用できる絵文字の種類とサイズについて説明します。

48種類の絵文字

speakemojiの種類1

  • クラス名:.se-angry .se-badEvil .se-badFrown .se-blush .se-boiled .se-cool .se-dead .se-deadSweat .se-emoKiss .se-expressionless .se-flushed .se-frown

speakemojiの種類2

  • クラス名:.se-goodEvil .se-grin .se-happyKiss .se-joy .se-kiss .se-kissHeart .se-laugh .se-love .se-mask .se-noMouth .se-poisoned .se-relax

speakemojiの種類3

  • クラス名:.se-sad .se-sadFrown .se-satisfied .se-scream .se-sleep .se-sleepy .se-slightlySad .se-smile .se-smiley .se-smirk .se-sob .se-toungeOut

speakemojiの種類4

  • クラス名:.se-toungeOutHappy .se-toungeOutWink .se-sweat .se-sweatSmile .se-thumbDown .se-thumbsDown .se-thumbsUp .se-thumbUp .se-weary .se-wink .se-winky .se-wtf

3つのフォントサイズ

3つのフォントサイズ

  • 32pxのクラス名:se-s
  • 64pxのクラス名:se-m
  • 128pxのクラス名:se-l

ワンポイントで使える32pxからインパクトある128pxまで3つのサイズが用意されています。Webサイトと表情のバランスを取りながらうまく活用してみるのも面白いでしょう。

Speakemojiの使い方

使い方

実際に利用するために手順は以下のとおり。

データを入手する

右上からGithubに飛ぶ

右側のダウンロードボタンから入手

HTMLファイルを開くとすぐ使える

ファイルを開くと公式サイトのトップページがローカル上で表示されることになります。既存のサイトに取り込みたいケースが多いと思うので以下で簡単な使い方を紹介します。

JS・CSSを読み込む

ここに2つのファイルが入っている

フォルダ名speakemojiのなかに読み込む重要なファイルが入っています。

2つのファイルを読み込む

  • JSファイル名:gruntspeakemoji.loader.js
  • CSSファイル名:speakemoji.fallback.css

HTML内で指定して読み込むファイルは上記の2つだけ。コードは以下のようなカタチになります。

BODYタグを閉じる手前に2つのコードを挿入したら準備は完了です。

HTMLコードを挿入する

こちらのコードが基本になります。クラスを変更することで好きな表情、サイズの絵文字を使うことが出来ます。

HTMLコードを挿入する

変更する必要のあるのは2つ目と3つ目のクラスになります。

Speakemojiの感想

自前で用意するとひと手間かかるアイコン。そんなときは「Speakemoji」の導入も考えてみるといいかもしれません。また気になるアイコンフォントを見つたら紹介していきますよー。

2016 APPDAMACY