おれてきぶろぐ。

日々ダラダラ
<< なんとなくJT同盟に入ってみるテスツ | main | 田舎 >>
スポンサーサイト

一定期間更新がないため広告を表示しています

| - | | - | -
コメント欄に絵文字
みつきねーさんに絵文字の入力画面どうやってつけるの〜?とのコメント頂いたので詳細を書いてみまする。


ぶっちゃけstroll::blogさんのソースをほぼまんまパクっただけなんですがね(汁




以下説明↓
まず<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属性がついてる場合がありますが、たぶんココで書いてあるcomformdescriptionだと思いますのでそれはそのままで問題ないです。
※別の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;
}




わからない事があったり、間違えがあればコメントしてくださいませ。
| 雑記 | 18:54 | comments(9) | trackbacks(2)
スポンサーサイト
| - | 18:54 | - | -
コメント
こんにちはー、アンアンです。

早速質問なのですが汗
このスクリプトを設置してみたのですが、
絵文字をクリックしても反映されないようなのです。

私の設置ミスの可能性も大なのですが、
分からなかったので質問させて頂きました><

何かアドバイス等よろしくお願いしますmm
| アンアン | 2004/07/29 9:25 PM |
無事解決しました!!
ほんとーにありがとうございました(涙
| アンアン@管理人 | 2004/07/29 9:38 PM |
>アンアンさん
ほんとに行き違いになっちゃいましたねw

アンアンさんのサイトのコメント欄に書いておきましたのでご覧になってくださいまし〜嬉しい
| poisonous | 2004/07/29 9:38 PM |
絵文字を配置することができました♪
またまたお世話になりました〜
これからいろいろいじってみます見る
| みつき | 2004/07/29 10:30 PM |
>みつきしゃん
設置おつかれさま
CSSなんかの勉強してガリガリいじるよろし-w-
ハマルよ〜男
| poisonous | 2004/07/29 10:51 PM |
yooooy
| hoodia and phentermine | 2006/03/15 3:16 PM |
yooooy
| how to play deuces wild video poker | 2006/03/19 2:44 AM |
great site
| adderall online order | 2006/03/20 10:12 AM |
i like pops
| seasonale | 2006/03/23 10:14 AM |
コメントする









この記事のトラックバックURL
http://poisonous.jugem.cc/trackback/61
トラックバック
コメント欄カスタム
絵文字表示させてみた。 前にどっかで見たんだけどどこだったかわかんなくて、 最近なにげに探してたカスタム小技を おれてきぶろぐさんで発見してしまったので、早速実行〜。 絵文字大好きで不便だったから何より自分の為にいいっすね!! ところでどこでこ
| 打ち上げ華火 | 2004/07/29 7:33 PM |
コメントに絵文字
なーんだか久々サクサク表示されるような気がするので、今のうちに何か書いておこうっと(´ー`)y-~~ 1つ目。えっと、きぬがさ。 グループに入ってみました。 2つ目。[:女:]←が透過されてない気がします。 …って、されてるじゃん。 ありー?こっちでは透
| Doでもいいこと | 2004/09/07 2:46 PM |
CALENDAR
S M T W T F S
   1234
567891011
12131415161718
19202122232425
2627282930  
<< November 2017 >>
SELECTED ENTRIES
CATEGORIES
ARCHIVES
RECENT COMMENT
RECENT TRACKBACK
LINKS
PROFILE