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. swipe-menu-js

    JavaScript

    横からスライド・スワイプ表示するハンバーガーメニュー実装「swipe-menu-js」

    swipe-menu-jsは横からスライド・スワイプ表示するシンプルな…

  2. jquery.mark

    JavaScript

    キーワードをハイライトしてくれる「jquery.mark」

    jquery.markはキーワードをハイライトしてくれるjQueryプ…

  3. Foxholder
  4. AnimatedSlideNav

    JavaScript

    動きがオシャレなアニメーションのサイドナビゲーション「AnimatedSideNav」

    AnimatedSideNavは、動きがオシャレなアニメーションによる…

  5. Responsive Parallax Drag-slider With Transparent Letters

コメント

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

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

最近の記事

  1. Anker アルカリ乾電池
  2. スタンスミス(EDIFICE/IENA別注)
  3. WI-1000XM2
  4. mill オイルヒーター

アーカイブ

PAGE TOP