>--> 自分のブログに Emoticons | クリボウの Blogger Tips

クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> 自分のブログに Emoticons

自分のブログに Emoticons

Posted at: 2006-02-23 6

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

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

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



導入方法
１．Blogger 管理画面「テンプレート」から、テンプレート head 要素内（<head> と </head> の間）に、次のコードを貼り付けます。
<script type="text/javascript" src="http://tools.kuribo.info/emoticon/emoticon.js"></script>

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

Blogger ブログの投稿部分にのみ適用したい場合は、post とクラス付けられた div 要素の開始タグを次のようにします。
<div class="post" id="p<$BlogItemNumber$>" onload="emoticon('p<$BlogItemNumber$>');">

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

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


スポンサードリンク：
お願い：
「この記事役に立った！」と思ったら、ぜひフィード登録をお願いします。　
このエントリーをはてなブックマークに追加

Comments:6

  1. はじめまして。

    私もBlogger使ってます。
    日本語の解説が嬉しくて、いろいろ読ませていただいてます。
    カレンダー貼り付け失敗、トラックバック失敗ですけど・・・（汗
    クリボウさんのところにリンクさせて頂こうと思い、メールアドレスを探したのですが見つからないのでこちらにコメントを残します。
    これからも役立つ情報待ってます。
    ヨロシクどうぞ。

    ReplyDelete

  2. コメントありがとうございます。
    カレンダー貼り付け、失敗でしたか。今後記事を書く際の勉強にもなるので、よければどこでつまずいたか教えて下さいませ。
    リンクやコメントは、自由にジャンジャンしてもらえるとうれしいです。

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.