絵文字を簡単に表示させることができるjQueryプラグイン「CSS Emoticons」

CSS Emoticons

CSS EmoticonsというjQueryプラグインを使えば、Webページ上に絵文字を簡単に表示させることができます。楽しい雰囲気の文章を作りたい時なんかに活用できそうですね。絵文字にはCSS3が使われており、記号を組み合わせることで色んな絵文字ができるので、画像よりも管理がしやすいのが良いですね。以下は使い方です。

CSS Emoticonsの使い方

実際に試してみると、こんな感じで可愛い絵文字を表示させることができます。

CSS Emoticonsの使い方

使い方はとても簡単です。jQuery本体とダウンロードしたファイルを読み込んで、プラグインをセットします。

<link href="jquery.cssemoticons.css" rel="stylesheet" type="text/css">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.cssemoticons.js"></script>
<script>
$(function() {
    $('.comment').emoticonize();
});
</script>

絵文字を使いたい場所はcommentというクラス名をつけたdiv要素で内包します。

<div class="comment">これはサンプルです :O</div>

シンプルで使いやすいですね。文字の最後にある「:O」が絵文字になります。他にも「:^)」や「T_T」など色んな組み合わせが可能です。

CSS Emoticons

また、絵文字にマウスオーバーすると、どんな記号が使われているかを確認することができます。

CSS Emoticons

ということで、jQueryプラグインで絵文字を手軽に使いたい時に活用したいですね。

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives