Wordpressには、絵文字を利用可能にするプラグインがいくつかあります。その中でも、デフォルトで登録されている絵文字の数が圧倒的に多いのが、Emoji Emoticons。導入も簡単です。

インストール・有効化

まずは、Wordpress管理画面左サイドバー「プラグイン」→「新規追加」と進んで、インストール・有効化します。

これだけで、絵文字入力が可能になります。

利用可能絵文字一覧

Emoji Emoticonsで利用できる絵文字は、EMOJI CHEAT SHEETに載っています。

このページで、各絵文字の右にある「:」で囲まれた文字列が、その絵文字を表すemoji codeです。

絵文字を入力する

絵文字の入力はemoji codeの入力によって行います。

例えば、上記のページのいちばん右上にある笑顔の絵文字を入力したければ、記事編集画面やコメント欄に:smile:と入力すればいいのです。

とても簡単です。

表示位置の調整

これで、絵文字が表示されるようになりました。

しかし、絵文字の位置がテキストの位置に比べて上下にずれる場合があります。当サイトもそうでした。

この現象の主な原因はテキストのサイズと絵文字画像のサイズが異なっていることが原因です。

そこで、絵文字のサイズをテキストのサイズに合わせます。

Emoji Emoticonsの絵文字にはemoji-smileyというクラス名があてられているので、style.cssで.emoji-smileyのスタイルを設定して、widthとheightをテキストのサイズと同じ数値に設定します。

これで、表示位置はほぼ問題なくなると思いますが、それでも不満な場合はvertical-alignを適宜設定して細かい調整をします。満足できる表示になったらそこで終了です。

参考までに、記事本文のテキストのサイズを16.1px（1.15rem）に設定している当サイトでは、以下のように書き込みました。

img.emoji-smiley{
    width:16.1px;
    width:1.15rem;
    vertical-align: -7%;
}

TwentyTwelveの場合は影と縁取りをなくす必要あり

これで、絵文字の表示は完璧かといえば、使っているテーマによってはそうもいかない場合があります。

例えば、当サイトのようにTwentyTwelveテーマを使っている場合は、このままでは絵文字に縁取り・影・周囲の隙間が出来てしまいます。

そこで当サイトでは、.emoji-smileyに以下のようなスタイルをさらに当てて、縁取り・影・周囲の隙間をなくしました。

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

コメント欄でも使える

これで、今度こそ問題なく絵文字が使えるようになりました。

絵文字は、記事本文だけでなくコメント欄でも使えます。

Emoji cheat sheetを見てコードを打ち込むだけで簡単入力できます。

絵文字でブログに潤いを与えてみませんか。