※初版：5/16
改定：5/18 「コメント欄にも絵文字機能を付けたいのですが…」を追加。
改定：5/19 IMGタグがXHTMLとして正しくなかったので修正
改定：5/28 ソースを見やすく書き換え、コメント欄の絵文字について追記
前にやった「タグエディタとネタバレボタン」の応用で、
いささか強引ではありますが「絵文字ボタン」を作ってみました。
こんな感じになります
参考： タグ入力支援にICONを追加する[nicky!用]
stroll::blog | コメントにカスタマイズ絵文字入力機能
.:. PEPPER .:.（アイコン元）
■絵文字ボタンを投稿画面に加える■
１．タグエディタを実装する。
２．「skin」フォルダに新しく「emoji」フォルダを作り、
こちらからダウンロードした絵文字アイコンをアップする。
（FREE GRAPHICS＞D.BALLOON＞01を今回使用）
３．「skin＞admin_form.html」を開き、
タグ支援ボタンの手前に↓のタグを入れる。
<!--絵文字入力ボタン-->
<dt>絵文字</dt>
<dd>
<img src="./skin/emoji/pp_00.gif" width="17" height="17" alt="…" onclick="enclose('<img src="${INFO_URL}skin/emoji/pp_00.gif" width="17" height="17" alt="…" border="0" style="vertical-align:middle" />','');return false;" />
<img src="./skin/emoji/pp_01.gif" width="17" height="17" alt="ハート" onclick="enclose('<img src="${INFO_URL}skin/emoji/pp_01.gif" width="17" height="17" alt="ハート" border="0" style="vertical-align:middle" />','');return false;" />
<img src="./skin/emoji/pp_02.gif" width="17" height="17" alt="汗" onclick="enclose('<img src="${INFO_URL}skin/emoji/pp_02.gif" width="17" height="17" alt="汗" border="0" style="vertical-align:middle" />','');return false;" />
<img src="./skin/emoji/pp_03.gif" width="17" height="17" alt="蒼ざめ" onclick="enclose('<img src="${INFO_URL}skin/emoji/pp_03.gif" width="17" height="17" alt="蒼ざめ" border="0" style="vertical-align:middle" />','');return false;" />
<img src="./skin/emoji/pp_04.gif" width="17" height="17" alt="怒" onclick="enclose('<img src="${INFO_URL}skin/emoji/pp_04.gif" width="17" height="17" alt="怒" border="0" style="vertical-align:middle" />','');return false;" />
<img src="./skin/emoji/pp_05.gif" width="17" height="17" alt="♪" onclick="enclose('<img src="${INFO_URL}skin/emoji/pp_05.gif" width="17" height="17" alt="♪" border="0" style="vertical-align:middle" />','');return false;" />
<img src="./skin/emoji/pp_06.gif" width="17" height="17" alt="？" onclick="enclose('<img src="${INFO_URL}skin/emoji/pp_06.gif" width="17" height="17" alt="？" border="0" style="vertical-align:middle" />','');return false;" />
<img src="./skin/emoji/pp_07.gif" width="17" height="17" alt="！" onclick="enclose('<img src="${INFO_URL}skin/emoji/pp_07.gif" width="17" height="17" alt="！" border="0" style="vertical-align:middle" />','');return false;" />
<img src="./skin/emoji/pp_08.gif" width="17" height="17" alt="滝汗" onclick="enclose('<img src="${INFO_URL}skin/emoji/pp_08.gif" width="17" height="17" alt="滝汗" border="0" style="vertical-align:middle" />','');return false;" />
<img src="./skin/emoji/pp_09.gif" width="17" height="17" alt="ひらめき" onclick="enclose('<img src="${INFO_URL}skin/emoji/pp_09.gif" width="17" height="17" alt="ひらめき" border="0" style="vertical-align:middle" />','');return false;" />
<img src="./skin/emoji/pp_10.gif" width="17" height="17" alt="ハートブレイク" onclick="enclose('<img src="${INFO_URL}skin/emoji/pp_10.gif" width="17" height="17" alt="ハートブレイク" border="0" style="vertical-align:middle" />','');return false;" />
<img src="./skin/emoji/pp_11.gif" width="17" height="17" alt="LOVE LOVE" onclick="enclose('<img src="${INFO_URL}skin/emoji/pp_11.gif" width="17" height="17" alt="LOVE LOVE" border="0" style="vertical-align:middle" />','');return false;">
<img src="./skin/emoji/pp_12.gif" width="17" height="17" alt="ドクロ" onclick="enclose('<img src="${INFO_URL}skin/emoji/pp_12.gif" width="17" height="17" alt="ドクロ" border="0" style="vertical-align:middle" />','');return false;" />
</dd>
<!--絵文字入力ボタンここまで-->
４．
このようになっていれば成功です。
あとはHTMLタグを多少なりともかじった方なら、好みのアイコンに
入れ替えることも簡単だと思われます。
あまりスマートではない方法ですが、手軽に絵文字を使いたい！という
方はお試しください。
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
⇒ このままでは使用できません。
このスクリプトはimgタグで絵文字を挿入しています。
コメント欄ではタグが変換されないので、そのままタグが出てきて
しまうのです。
ですが「stroll::blog」さんの方法で
コメント欄に絵文字を追加することができるようになりましたので、
別件でまた解説したく思います。こちらをご覧ください。
■みぃ [H] ... 2006/05/18（木） edit・delete
kirijiさん、こんばんは。
先ほどはコメントありがとうございました。
あとで時間のあるときにでもやってみようと思っていたのですが、コメント欄では出来ないのですね～。
うーん、残念ですがあきらめます。
でも、とても分かりやすい説明だったので、管理者投稿画面への実装は失敗なくできました。
更新も楽しくなりそうです＾＾
ありがとうございました。