記事一覧

WebDiaryProに絵文字ボタンを作る

※初版:5/16
  改定:5/18 「コメント欄にも絵文字機能を付けたいのですが…」を追加。
  改定:5/19 IMGタグがXHTMLとして正しくなかったので修正
  改定:5/28 ソースを見やすく書き換え、コメント欄の絵文字について追記

前にやった「タグエディタとネタバレボタン」の応用で、
いささか強引ではありますが「絵文字ボタン」を作ってみました。

こんな感じになりますハート

参考: タグ入力支援にICONを追加する[nicky!用]
    stroll::blog | コメントにカスタマイズ絵文字入力機能
    .:. PEPPER .:.(アイコン元)

■絵文字ボタンを投稿画面に加える■

1.タグエディタを実装する。

2.「skin」フォルダに新しく「emoji」フォルダを作り、
  こちらからダウンロードした絵文字アイコンをアップする。
  (FREE GRAPHICS>D.BALLOON>01を今回使用)

3.「skin>admin_form.html」を開き、
  タグ支援ボタンの手前に↓のタグを入れる。

<!--絵文字入力ボタン-->
<dt>絵文字</dt>
<dd>
<img src="./skin/emoji/pp_00.gif" width="17" height="17" alt="…" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_00.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;…&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_01.gif" width="17" height="17" alt="ハート" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_01.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;ハート&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_02.gif" width="17" height="17" alt="汗" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_02.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;汗&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_03.gif" width="17" height="17" alt="蒼ざめ" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_03.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;蒼ざめ&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_04.gif" width="17" height="17" alt="怒" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_04.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;怒&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_05.gif" width="17" height="17" alt="♪" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_05.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;♪&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_06.gif" width="17" height="17" alt="?" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_06.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;?&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_07.gif" width="17" height="17" alt="!" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_07.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;!&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_08.gif" width="17" height="17" alt="滝汗" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_08.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;滝汗&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_09.gif" width="17" height="17" alt="ひらめき" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_09.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;ひらめき&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_10.gif" width="17" height="17" alt="ハートブレイク" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_10.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;ハートブレイク&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_11.gif" width="17" height="17" alt="LOVE LOVE" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_11.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;LOVE LOVE&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;">
<img src="./skin/emoji/pp_12.gif" width="17" height="17" alt="ドクロ" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_12.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;ドクロ&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
</dd>
<!--絵文字入力ボタンここまで-->

4.
  ファイル 56-1.jpg
  このようになっていれば成功です。

あとはHTMLタグを多少なりともかじった方なら、好みのアイコンに
入れ替えることも簡単だと思われます。
あまりスマートではない方法ですが、手軽に絵文字を使いたい!という
方はお試しください。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +

■絵文字入力をコメント欄にも付けれませんか?

このままでは使用できません。
 このスクリプトはimgタグで絵文字を挿入しています。
 コメント欄ではタグが変換されないので、そのままタグが出てきて
 しまうのです。

 ですが「stroll::blog」さんの方法で
 コメント欄に絵文字を追加することができるようになりましたので、
 別件でまた解説したく思います。こちらをご覧ください。

TRACKBACK

Web Diary Proのコメント欄に絵文字をつける from Right Bower
タグが使えないコメント欄でも絵文字を可能にする「stroll::blog」さんのスクリプトです。それに「6畳一間に魚とカメとヒト2人」さんの解説を元に、Web Diary Proのコメント欄につける場合を...
2006/06/14(水)18時50分 受信
タグエディタ導入 from Blog Design
わかりやすいタグエディタのパッケージが 「Right Bower」で配布されていたので導入してみました絵文字ボタンも入れてみました。アイコンは前回と変わってませんが「迷える子羊」で紹介...
2008/03/27(木)21時54分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2014/07/31(木)02時07分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/26(月)04時13分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/05(木)02時05分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/03/16(月)07時44分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/03/17(火)01時33分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/03/17(火)01時36分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/03/21(土)08時26分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/03/26(木)01時43分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/04/01(水)00時24分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/04/03(金)02時18分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/04/10(金)18時56分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/04/11(土)07時07分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/04/15(水)05時47分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/08/17(月)17時51分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/08/24(月)05時02分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/09/20(日)20時44分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/11/02(月)13時19分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/11/08(日)15時27分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/11/08(日)15時36分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/11/08(日)15時40分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/11/10(火)13時22分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/11/10(火)13時35分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/11/13(金)21時14分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/11/13(金)22時11分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/11/13(金)22時23分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/11/13(金)22時48分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/12/15(火)13時52分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/12/16(水)10時42分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/12/16(水)14時43分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/12/30(水)18時04分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/01/03(日)20時20分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/01/03(日)21時13分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/01/11(月)18時35分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/01/12(火)18時55分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/01/12(火)19時08分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/01/19(火)03時12分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/01/19(火)04時25分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/03/21(月)21時42分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/04/10(日)06時30分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/04/13(水)10時00分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/04/13(水)10時21分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/04/14(木)18時24分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/04/14(木)18時47分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/04/14(木)23時42分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/04/15(金)20時52分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/04/16(土)20時56分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/04/17(日)21時28分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/04/18(月)22時18分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/04/19(火)22時38分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/04/20(水)11時43分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/05/31(火)07時59分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/05/31(火)07時59分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/06/03(金)03時31分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/06/03(金)03時31分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/06/09(木)02時26分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/06/09(木)02時26分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/06/14(火)05時02分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/06/14(火)05時02分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/06/16(木)04時14分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/06/16(木)04時19分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/06/16(木)04時19分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/06/17(金)07時31分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/06/23(木)04時56分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/06/24(金)18時25分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/07/01(金)13時35分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/10/03(月)22時40分 受信

COMMENT

■みぃ [H] ... 2006/05/18(木) edit・delete

kirijiさん、こんばんは。
先ほどはコメントありがとうございました。

あとで時間のあるときにでもやってみようと思っていたのですが、コメント欄では出来ないのですね~。
うーん、残念ですがあきらめます。

でも、とても分かりやすい説明だったので、管理者投稿画面への実装は失敗なくできました。
更新も楽しくなりそうです^^

ありがとうございました。

■kiriji ... 2006/05/18(木) edit・delete

みぃさん、折り返しコメントをくださりありがとうございます。
コメント欄でもタグが解禁されれば
この方法でも絵文字ボタンが可能なのですが、
そうすると荒らし対策が大変になるんですよね。
(imgタグ解禁→変な画像が貼られる場合もある)
スプリクトにはとんと疎い自分では
今のところここまでが精一杯のようです。申し訳ない。

みぃさんのブログもお邪魔したときに拝見しまして、
とても楽しそうなご家族で、微笑ましくサイトをめぐらせていただきました。
絵文字で日記がまた賑やかになりますと嬉しいです。

■まきにゃん ... 2008/06/02(月) edit・delete

度々お世話になっております。
絵文字機能非常に気に入ってしまったのですが、
Web Board Professionalで使えないかな?と思い
同じ様な手順で挑戦しましたが上手く変換されない
悲しい結果に終わってしまいました。
対応策に見当ありましたらご教授いただけると幸いです。

■未承認 ... 2014/07/22(火) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/07/30(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/11/19(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/29(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/03/07(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/06/20(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/09/18(金) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2017/03/13(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2017/03/13(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2023/09/16(土) edit・delete

管理者に承認されるまで内容は表示されません。