PEEKABOO

使用テンプレート：noble（Twilight bookstore様）

まず、小粋空間様よりスクリプトをDL

アイコン用の画像をサーバーの任意の場所にアップ

スクリプトをエディタで開く（必ずUTF-8で）

アイコン画像を設定する　5行目〜

list[list.length] = new Array('晴れ', 'http://www.〜');
前の'　'に絵文字のテキスト表示、後ろの'　'にアイコン画像のURL
アイコンの数だけ記述する

コメントフォームの前に検索フォームがあるため、このままではコメント入力欄に絵文字が挿入されないので

// コメントを入力するテキストエリアを指定
var textarea = 'document.forms[0].description';
の赤字の部分を
comformに修正

Serene Bachのindex.htmlと同じディレクトリにスクリプトをアップ

Serene Bachのテンプレートを修正
＜head＞ 〜 ＜/head＞の間にタグを追加

＜script type="text/javascript" src="{site_top}emoji.js" charset="utf-8"＞＜/script＞

コメント入力欄の任意の場所（絵文字の一覧を表示した居場所）に絵文字の表示タグを追加

＜dt＞＜label for="icons"＞icons:＜/label＞＜/dt＞＜dd＞
＜script type="text/javascript"＞
＜!--
writeCustmizeEmojiTagList();
// --＞
＜/script＞
＜/dd＞
赤字の部分は好きな名称に変えてOKです。
青地の部分は表示位置をきちんと合わせたかったので追加しました。

テキストを対応する絵文字に変換するスクリプトをコメントエリア終了直前に追加

＜script type="text/javascript"＞
＜!--
changeCustmizeEmojiTag();
// --＞
＜/script＞
（＜!-- END comment_area --＞の直前に）

スクリプトのフォームの部分を修正したのでformタグにname属性を追加

＜form name="comform" action="{site_cgi}" method="post"＞

ここまでは比較的順調だったわけです。
ところがです。
どうやってもコメントに挿入したアイコンのテキストが投稿しても絵文字に変換されないのです。
ここで頼れる隊長、小野田さんの助けをお借りして、やっと完了。

テンプレートを更に修正

＜!-- BEGIN comment_area --＞
＜div class="comment"＞
＜h3 id="comments"＞comments＜/h3＞
＜!-- BEGIN comment --＞
＜dl id="{comment_id}"＞
　　↓
＜!-- BEGIN comment_area --＞
＜div id="comments"＞
＜h3 class="comment_head"＞Comments＜/h3＞
＜!-- BEGIN comment --＞
＜div class="comment"＞
＜dl id="{comment_id}"＞

あとは頭に追加した＜div＞の閉じタグ＜/div＞をコメントエリア終了直前に追加

h3が.commentの子要素なので＜h3 id="comments"＞comments＜/h3＞のままではcommentsの表示がおかしくなります。
そこで＜h3 class="comment_head"＞Comments＜/h3＞にしたので、その要素をCSSに追加

h3.comment_head{
padding:2px 0 0 20px;
color:#999;
font-size:11px;
letter-spacing:1px;
text-transform:capitalize;
}

これでようやく完了です！
いやあ長い道のりでしたわ……。
ようするにまずは＜div class="comment"＞〜＜/div＞を＜div id="comments"＞で囲んでやらなきゃいけないみたいです。

yujiro様、楽しいスクリプトありがとうございました！
ちなみに隊長はYoujiro様だったりします:-D

にしても再構築、まともにできること少ないんですけど、私だけですか？
全再構築なんてありえないので、50記事ずつ再構築できるようにしているのですが、それでもなかなかうまくいかないことが多く、結局インデックスと1-50で挫折してしまいます……。

関連記事：
コメントで絵文字
続 コメントで絵文字