WordPressで絵文字を使う｜プラグインEmoji Emoticonsの使い方

[公開日] 2014/5/25　[プラグイン]

WordPressで絵文字が使えるプラグインEmoji Emoticonsの使い方を紹介します。

アメブロからワードプレスに引っ越したけど、絵文字が無くて寂しい…なんて人もいるのではないかと思います。そんな人はEmoji Emoticonsを導入してみましょう。

ちなみに「エモジ エモーティコンズ」と読みます。エモーティコンは、emotion（感情）とicon（アイコン）が合体した言葉だそうですよ。





こんな感じの絵文字が使えます。

Emoji Emoticonsの使い方

メニュー → プラグイン → 新規追加 と移動し、「Emoji Emoticons」と検索、インストールして有効化します。





下記の絵文字シートからショートコードをコピーして、投稿画面に貼り付けます。



リンク先の絵文字をクリックすれば、クリップボードにショートコードがコピーされます。上記ページはブックマークしておくとよいでしょう。

ショートコードを連続で挿入するときは半角スペースを入れます。






プレビューしてみると、このように絵文字が表示されてます。
でも、そのままだとちょっと絵文字が下にズレてる感じなので、これを直します。





CSSファイルに上記のソースを記述します。

width: 1.1em;　
height: 1.1em;　
↑この部分は絵文字の幅と高さを指定していて、1～1.2emくらいの間がしっくりくると思います。デフォルトのサイズで良かったら、これは削除しちゃってもOK。

vertical-alignは、文字列とアイコンの位置関係を調節してます。適当な位置になるように数字を調節しましょう。






うん。いい感じでテキストと揃ってますね。




テンプレートによっては、CSSの影響を受けて絵文字に枠がついたりすることがあります。その場合は以下のソースを追記してテンプレートの装飾を解除します。

img.emoji-smiley {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

参考
400種類以上の絵文字が簡単に使えるWordPressプラグイン～Emoji Emoticons

「Web Shufu」さんより引用

テンプレートの影響が無い場合は記述する必要はありません。

Emoji Emoticonsの気になる所

プラグインEmoji Emoticonsを停止すると絵文字は表示されなくなります。その場合、サイト上では入力したショートコードがむき出しになってしまいますので、一度プラグインを使い始めたらずっと有効にしておく必要があります。

あと、ショートコードをいちいちコピーしてくるのがちょっと面倒。AddQuicktagに登録しておけばワンタッチで使えますが、数が多いと大変です。



ちょっと使い勝手に課題があるEmoji Emoticonsですが、絵文字の種類は豊富です。WordPressで絵文字を多用しているサイトはあまり見かけないので、うまく使えば差別化になるかもしれませんね。