CSS Emoticons

JavaScript

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

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

[ads_center]

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プラグインで絵文字を手軽に使いたい時に活用したいですね。

関連記事

  1. Multi-Level Menu

    JavaScript

    流れるような遅延アニメーションが美しい階層化メニュー実装「Multi-Level Menu」

    Multi-Level Menuは流れるような遅延アニメーションが美し…

  2. mgGlitch

    JavaScript

    グリッチ効果を付けれるjQueryプラグイン「mgGlitch」

    mgGlitchは、CSS3の変換を利用して指定した要素にアニメーショ…

  3. t-scroll

    JavaScript

    アニメーションとともにアイテムが一つずつ現れる「t-scroll」

    t-scrollはアニメーションとともにアイテムを一つずつ表示させるこ…

  4. progresspieSVG

    JavaScript

    円形のプログレスバーを実装できる「progresspieSVG」

    progresspieSVGは円形のプログレスバーを実装できるjQue…

  5. JavaScript

    リスト化した要素を自分が指定した数に分割できるjQueryプラグイン「Easy List Split…

    リスト化した要素を自分が指定した数に分割できるシンプルだけど便利なjQ…

  6. Lettering.js

    JavaScript

    一文字ずつスタイルなどを調整できるようにしてくれる「Lettering.js」

    Lettering.jsは一文字ずつCSSなどでスタイルを調整できるよ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 久保田城
  2. ハードサイド CS80
  3. ACC-TRBX
  4. ピスタチオ クリスマス ツリー フラペチーノ

Instagram始めました

Facebookページ

PAGE TOP