まず
<head>内に以下のjavascriptを追加します
<script language="JavaScript" type="text/javascript" src="./admin/js/admin.js"></script>
<script type="text/javascript">
<!--
//絵文字入力開閉
function emojiInputTagShowHide(id, image){
var disp = document.getElementById(id).style.display;
if(disp == "block"){
document.getElementById(id).style.display = "none";
document.getElementById(image).src = "/admin/img/tool_img/emoji_on.gif";
}else{
document.getElementById(id).style.display = "block";
document.getElementById(image).src = "/admin/img/tool_img/emoji_off.gif";
}
return false;
}
//-->
</script>
次に
<!-- BEGIN comment_area -->から
<!-- END comment_area -->の間にある
<form>タグ(たぶんデフォルトだと
<form action="./?mode=comment" method="post">になっていると思います)に
name="comform"を追加します。
<form action="./?mode=comment" method="post" name="comform">
要するにこんなカンジ↑になります。
さらに同様に
<form>内にある
<textarea>タグに
name="description"を追加します。
(<form>タグ、及び<textarea>には、元からname属性がついてる場合がありますが、たぶんココで書いてあるcomformとdescriptionだと思いますのでそれはそのままで問題ないです。
※別のname属性がついている場合はまた微妙に他の部分との兼ね合いで変更が必要かもしれません。)
そして
<!-- BEGIN comment_area -->から
<!-- END comment_area -->の間に以下のタグを追加します。
<img src="/admin/img/tool_img/emoji_on.gif" width="42" height="19" onclick="emojiInputTagShowHide('text_comment', 'inputag_button_comment')" title="絵文字" alt="絵文字" style="cursor:hand" id="inputag_button_comment" />
←コレネ
で、絵文字を展開させたい部分に以下のタグを追加します。
(↑と同様に
<!-- BEGIN comment_area --><!-- END comment_area -->内が良いと思われます)
<div class="text" id="text_comment" style="display:none;">
<a href="javascript:;" onClick="addEmoji(document.comform.description, '嬉しい');" title="嬉しい"><img src="admin/img/emoji/a01.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '楽しい');" title="楽しい"><img src="admin/img/emoji/a02.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '悲しい');" title="悲しい"><img src="admin/img/emoji/a03.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '怒り');" title="怒り"><img src="admin/img/emoji/a04.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'びっくり');" title="びっくり"><img src="admin/img/emoji/a05.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'ショック');" title="ショック"><img src="admin/img/emoji/a06.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'ときめき');" title="ときめき"><img src="admin/img/emoji/a07.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '冷や汗');" title="冷や汗"><img src="admin/img/emoji/a08.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'しょんぼり');" title="しょんぼり"><img src="admin/img/emoji/a09.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '男');" title="男"><img src="admin/img/emoji/a10.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '女');" title="女"><img src="admin/img/emoji/a11.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '拍手');" title="拍手"><img src="admin/img/emoji/a12.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'グッド');" title="グッド"><img src="admin/img/emoji/a13.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'バッド');" title="バッド"><img src="admin/img/emoji/a14.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '聞き耳を立てる');" title="聞き耳を立てる"><img src="admin/img/emoji/a15.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '見る');" title="見る"><img src="admin/img/emoji/a16.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '抱擁');" title="抱擁"><img src="admin/img/emoji/a17.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '晴れ');" title="晴れ"><img src="admin/img/emoji/b01.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '曇り');" title="曇り"><img src="admin/img/emoji/b02.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '雨');" title="雨"><img src="admin/img/emoji/b03.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '雪');" title="雪"><img src="admin/img/emoji/b04.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '雷');" title="雷"><img src="admin/img/emoji/b05.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '強風');" title="強風"><img src="admin/img/emoji/b06.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '霧');" title="霧"><img src="admin/img/emoji/b07.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '月');" title="月"><img src="admin/img/emoji/b08.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '電車');" title="電車"><img src="admin/img/emoji/c01.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '飛行機');" title="飛行機"><img src="admin/img/emoji/c02.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '車');" title="車"><img src="admin/img/emoji/c03.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '自転車');" title="自転車"><img src="admin/img/emoji/c04.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '船');" title="船"><img src="admin/img/emoji/c05.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'バス');" title="バス"><img src="admin/img/emoji/c06.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '学校');" title="学校"><img src="admin/img/emoji/d01.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '家');" title="家"><img src="admin/img/emoji/d02.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'ビル');" title="ビル"><img src="admin/img/emoji/d03.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '病院');" title="病院"><img src="admin/img/emoji/d04.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '犬');" title="犬"><img src="admin/img/emoji/e01.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '猫');" title="猫"><img src="admin/img/emoji/e02.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '鳥');" title="鳥"><img src="admin/img/emoji/e03.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '魚');" title="魚"><img src="admin/img/emoji/e04.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '馬');" title="馬"><img src="admin/img/emoji/e05.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '豚');" title="豚"><img src="admin/img/emoji/e06.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '赤ちゃん');" title="赤ちゃん"><img src="admin/img/emoji/e07.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '子供');" title="子供"><img src="admin/img/emoji/e08.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'おばけ');" title="おばけ"><img src="admin/img/emoji/e09.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '映画');" title="映画"><img src="admin/img/emoji/f01.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '食事');" title="食事"><img src="admin/img/emoji/f02.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '美容室');" title="美容室"><img src="admin/img/emoji/f03.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '読書');" title="読書"><img src="admin/img/emoji/f04.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '温泉');" title="温泉"><img src="admin/img/emoji/f05.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'カラオケ');" title="カラオケ"><img src="admin/img/emoji/f06.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'サッカー');" title="サッカー"><img src="admin/img/emoji/g01.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'サーフィン');" title="サーフィン"><img src="admin/img/emoji/g02.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'スキー');" title="スキー"><img src="admin/img/emoji/g03.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'ジョギング');" title="ジョギング"><img src="admin/img/emoji/g04.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '水泳');" title="水泳"><img src="admin/img/emoji/g05.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'テニス');" title="テニス"><img src="admin/img/emoji/g06.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'ゴルフ');" title="ゴルフ"><img src="admin/img/emoji/g07.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '野球');" title="野球"><img src="admin/img/emoji/g08.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '携帯');" title="携帯"><img src="admin/img/emoji/h01.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'ビール');" title="ビール"><img src="admin/img/emoji/h02.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '熱燗');" title="熱燗"><img src="admin/img/emoji/h03.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'ホットコーヒー');" title="ホットコーヒー"><img src="admin/img/emoji/h04.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'ソフトクリーム');" title="ソフトクリーム"><img src="admin/img/emoji/h05.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'ラーメン');" title="ラーメン"><img src="admin/img/emoji/h06.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'おでん');" title="おでん"><img src="admin/img/emoji/h07.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'パン');" title="パン"><img src="admin/img/emoji/h08.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'ハンバーガー');" title="ハンバーガー"><img src="admin/img/emoji/h09.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '靴');" title="靴"><img src="admin/img/emoji/h10.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'ペン');" title="ペン"><img src="admin/img/emoji/h11.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'メール');" title="メール"><img src="admin/img/emoji/h12.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'PC');" title="PC"><img src="admin/img/emoji/h13.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'テレビ');" title="テレビ"><img src="admin/img/emoji/h14.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '花');" title="花"><img src="admin/img/emoji/h15.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '植物');" title="植物"><img src="admin/img/emoji/h16.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'お金');" title="お金"><img src="admin/img/emoji/h17.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '工具');" title="工具"><img src="admin/img/emoji/h18.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '王冠');" title="王冠"><img src="admin/img/emoji/h19.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'おにぎり');" title="おにぎり"><img src="admin/img/emoji/h20.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '時計');" title="時計"><img src="admin/img/emoji/h21.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'ケーキ');" title="ケーキ"><img src="admin/img/emoji/h22.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'プレゼント');" title="プレゼント"><img src="admin/img/emoji/h23.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'ゲーム');" title="ゲーム"><img src="admin/img/emoji/h24.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'CD');" title="CD"><img src="admin/img/emoji/h25.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'カメラ');" title="カメラ"><img src="admin/img/emoji/h26.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '銃');" title="銃"><img src="admin/img/emoji/h27.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '桜');" title="桜"><img src="admin/img/emoji/h28.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '!');" title="!"><img src="admin/img/emoji/i01.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '?');" title="?"><img src="admin/img/emoji/i02.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '!?');" title="!?"><img src="admin/img/emoji/i03.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'ラブ');" title="ラブ"><img src="admin/img/emoji/i04.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '失恋');" title="失恋"><img src="admin/img/emoji/i05.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'OK');" title="OK"><img src="admin/img/emoji/i06.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'マル秘');" title="マル秘"><img src="admin/img/emoji/i07.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '祝');" title="祝"><img src="admin/img/emoji/i08.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'zzz');" title="zzz"><img src="admin/img/emoji/i09.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '怒りマーク');" title="怒りマーク"><img src="admin/img/emoji/i10.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, '汗');" title="汗"><img src="admin/img/emoji/i11.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'スペード');" title="スペード"><img src="admin/img/emoji/i12.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'クローバー');" title="クローバー"><img src="admin/img/emoji/i13.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'ハート');" title="ハート"><img src="admin/img/emoji/i14.gif" width="15" height="15"></a>
<a href="javascript:;" onClick="addEmoji(document.comform.description, 'ダイヤ');" title="ダイヤ"><img src="admin/img/emoji/i15.gif" width="15" height="15"></a>
</div>
コレでHTML側の変更は終了です。
あとはCSS側で
#input_button_comment(絵文字開閉ボタン)、
#text_comment(絵文字表示部分)あたりをイジれば見栄えの調整もできると思いまする。
※参考までにうちの場合のCSS↓
#inputag_button_comment{
position: relative; top: +4px;
}
#text_comment a img{
border-style:none;
border-width:0px;
padding:1px;
}
#text_comment a:hover{
border-style:dotted;
border-width:1px;
border-color:#999999;
}
#text_comment a{
border-style:solid;
border-width:1px;
border-color:#FFFFFF;
}
わからない事があったり、間違えがあればコメントしてくださいませ。