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

diamonds.jsダイヤモンドみたいな形のイメージギャラリーを実装できるjQueryプラグイン「diamonds.js」前のページ

置くだけで充電できる無接点充電パッド「QE-TM101」の購入レビュー次のページ無接点充電パッド「QE-TM101」

関連記事

  1. no-image
  2. Albumize

    JavaScript

    アルバムみたいな画像コレクションのギャラリーを管理・実装できるjQueryプラグイン「Albumiz…

    Webページにある画像コレクションをアルバムのようなギャラリーに管理・…

  3. Coin Slider

    JavaScript

    ユニークなエフェクトを実装できるjQueryイメージスライダー「Coin Slider」

    ユニークなエフェクトで画像がスライドしていくjQueryイメージスライ…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachと$.eachの簡単な使い方のメモ

    jQueryのeachと$.eachの使い方のメモです。あんまり深い知…

  5. jquery.adaptive-backgrounds.js
  6. jsPanel3

    JavaScript

    多機能なフローティングパネルを実装できるjQueryプラグイン「jsPanel3」

    jsPanel3は、高度で多機能なフローティングパネル(ウィンドウ)を…

コメント

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

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

最近の記事

  1. 十和田湖
  2. 富有柿
  3. アイリスオーヤマの加湿器
PAGE TOP