自分のブログに Emoticons

Emoticons
メッセージに添えられる ;) や :P といった顔文字、よく目にしますよね。今回取り上げるは、これらの顔文字を自動的に画像に置き換えて表示するためのツールです。
アイデアはあれどシンプルな画像がなく、諦めかけていたんですが、今回 Google Chat の Emoticonsというのを見つけたので、それを使うことにしました。
このツール、一度導入してしまえば、あとは普通に記事を投稿するだけで、自動的に顔文字が画像に替わるのが便利なところ。

置き換えられる文字列は <3　:(|)　:-o　:D　:(　X-(　B-)　:'(　=D　;)　:-|　=)　:-D　;^)　;-)　:-)　:-/　:P　\m/ の19種類。

デモ
顔文字がどのように画像に切り替わるのかは、実際に見てもらった方がわかりやすいかと思います。下のフォームに、上記の顔文字を使った好きなメッセージを入れて「テスト」ボタンを押してみてください。

導入方法
１．Blogger 管理画面「テンプレート」から、テンプレート head 要素内（<head> と </head> の間）に、次のコードを貼り付けます。

２．テンプレート内の Emoticon を適用したい div 要素のタグに onload="emoticon('id');" という属性を書き入れます。赤字の部分はその div 要素の id を書き込んでください。

Blogger ブログの投稿部分にのみ適用したい場合は、post とクラス付けられた div 要素の開始タグを次のようにします。

<div class="post" id="p<$BlogItemNumber$>" onload="emoticon('p<$BlogItemNumber$>');">

Blogger のコメント部分の場合には、comments と id のついた div 要素、開始タグを次のようにしてください。

ちなみに、書き換え後の画像の中には、背景が透明でなく白いものがあるので、適用される範囲も背景が白い方がきれいです。

スポンサードリンク：

お願い：

「この記事役に立った！」と思ったら、ぜひフィード登録をお願いします。　

Comments:7

クリボウの Blogger Tips

自分のブログに Emoticons

Comments:7

Comments on Google+:

About Me

Followers

Facebook and Google+ Pages

Labels

Archives

Popular Posts

Link List

Zenback - Everyone's Related Posts

etc...