CSS EmoticonsというjQueryプラグインを使えば、Webページ上に絵文字を簡単に表示させることができます。楽しい雰囲気の文章を作りたい時なんかに活用できそうですね。絵文字にはCSS3が使われており、記号を組み合わせることで色んな絵文字ができるので、画像よりも管理がしやすいのが良いですね。以下は使い方です。
[ads_center]
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」など色んな組み合わせが可能です。
また、絵文字にマウスオーバーすると、どんな記号が使われているかを確認することができます。
ということで、jQueryプラグインで絵文字を手軽に使いたい時に活用したいですね。
