自分のブログに Emoticons 
Emoticons
メッセージに添えられる ;) や :P といった顔文字、よく目にしますよね。今回取り上げるは、これらの顔文字を自動的に画像に置き換えて表示するためのツールです。
アイデアはあれどシンプルな画像がなく、諦めかけていたんですが、今回 Google Chat の Emoticonsというのを見つけたので、それを使うことにしました。
このツール、一度導入してしまえば、あとは普通に記事を投稿するだけで、自動的に顔文字が画像に替わるのが便利なところ。
置き換えられる文字列は <3 :(|) :-o :D :( X-( B-) :'( =D ;) :-| =) :-D ;^) ;-) :-) :-/ :P \m/ の19種類。
デモ
顔文字がどのように画像に切り替わるのかは、実際に見てもらった方がわかりやすいかと思います。下のフォームに、上記の顔文字を使った好きなメッセージを入れて「テスト」ボタンを押してみてください。
導入方法
１．Blogger 管理画面「テンプレート」から、テンプレート head 要素内（
２．テンプレート内の Emoticon を適用したい div 要素のタグに
ちなみに、書き換え後の画像の中には、背景が透明でなく白いものがあるので、適用される範囲も背景が白い方がきれいです。
メッセージに添えられる ;) や :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 要素の開始タグを次のようにします。
Blogger のコメント部分の場合には、comments と id のついた div 要素、開始タグを次のようにしてください。
<div class="post" id="p<$BlogItemNumber$>" onload="emoticon('p<$BlogItemNumber$>');">
Blogger のコメント部分の場合には、comments と id のついた div 要素、開始タグを次のようにしてください。
<div id="comments" onload="emoticon('comments')">
ちなみに、書き換え後の画像の中には、背景が透明でなく白いものがあるので、適用される範囲も背景が白い方がきれいです。
はじめまして。
私もBlogger使ってます。
日本語の解説が嬉しくて、いろいろ読ませていただいてます。
カレンダー貼り付け失敗、トラックバック失敗ですけど・・・（汗
クリボウさんのところにリンクさせて頂こうと思い、メールアドレスを探したのですが見つからないのでこちらにコメントを残します。
これからも役立つ情報待ってます。
ヨロシクどうぞ。
By
minoru, at 25 February, 2006 15:40
コメントありがとうございます。
カレンダー貼り付け、失敗でしたか。今後記事を書く際の勉強にもなるので、よければどこでつまずいたか教えて下さいませ。
リンクやコメントは、自由にジャンジャンしてもらえるとうれしいです。
By
kuribo, at 02 March, 2006 23:05
Post a Comment