モニャピロセカンドシステム MT覚え書き：コメントにアイコン

設置方法。。。

まずはサーバにアイコンを入れておくディレクトリ（フォルダ）を作り、その中に使用するアイコンをアップ。

次に、
テンプレートモジュール（テンプレートページ下部）で新しくテンプレートを３つ作ります。
（モジュールを使わない場合は所定の位置に直接追加してください。）

まずひとつめ。

名前はとりあえず、CommentEmojiAとかにしてみたり。
（他２つも同じ感じ）

中身は、

<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像設定
function getCommentEmojiList() {
var list = new Array();
// 画像名、画像URLの設定
list[list.length] = new Array('・・・', '<$MTBlogURL$>icon_img/00.gif');
list[list.length] = new Array('ハート', '<$MTBlogURL$>icon_img/01.gif');
list[list.length] = new Array('汗', '<$MTBlogURL$>icon_img/02.gif');
list[list.length] = new Array('｜｜｜', '<$MTBlogURL$>icon_img/03.gif');
list[list.length] = new Array('ムカッ', '<$MTBlogURL$>icon_img/04.gif');
list[list.length] = new Array('♪', '<$MTBlogURL$>icon_img/05.gif');
list[list.length] = new Array('？', '<$MTBlogURL$>icon_img/06.gif');
list[list.length] = new Array('！', '<$MTBlogURL$>icon_img/07.gif');
list[list.length] = new Array('タラッ', '<$MTBlogURL$>icon_img/08.gif');
list[list.length] = new Array('ピカッ', '<$MTBlogURL$>icon_img/09.gif');
list[list.length] = new Array('ブレイク', '<$MTBlogURL$>icon_img/10.gif');
list[list.length] = new Array('ハート×２', '<$MTBlogURL$>icon_img/11.gif');
list[list.length] = new Array('ドクロ', '<$MTBlogURL$>icon_img/12.gif');
list[list.length] = new Array('普通', '<$MTBlogURL$>icon_img/13.gif');
list[list.length] = new Array('ニコッ', '<$MTBlogURL$>icon_img/14.gif');
list[list.length] = new Array('ポッ', '<$MTBlogURL$>icon_img/15.gif');
list[list.length] = new Array('ハテ', '<$MTBlogURL$>icon_img/16.gif');
list[list.length] = new Array('ニヤリ', '<$MTBlogURL$>icon_img/17.gif');
list[list.length] = new Array('メガネ', '<$MTBlogURL$>icon_img/18.gif');
list[list.length] = new Array('涙', '<$MTBlogURL$>icon_img/19.gif');
list[list.length] = new Array('うわーん', '<$MTBlogURL$>icon_img/20.gif');
list[list.length] = new Array('ビックリ', '<$MTBlogURL$>icon_img/21.gif');
list[list.length] = new Array('ムッ', '<$MTBlogURL$>icon_img/22.gif');
list[list.length] = new Array('えーん', '<$MTBlogURL$>icon_img/23.gif');
list[list.length] = new Array('うっとり', '<$MTBlogURL$>icon_img/24.gif');
list[list.length] = new Array('テレ', '<$MTBlogURL$>icon_img/25.gif');
list[list.length] = new Array('ポカーン', '<$MTBlogURL$>icon_img/26.gif');
list[list.length] = new Array('うーん', '<$MTBlogURL$>icon_img/27.gif');
list[list.length] = new Array('ゲッソリ', '<$MTBlogURL$>icon_img/28.gif');
list[list.length] = new Array('２ｃｈ', '<$MTBlogURL$>icon_img/29.gif');
list[list.length] = new Array('ブチュ', '<$MTBlogURL$>icon_img/30.gif');
list[list.length] = new Array('ショボン', '<$MTBlogURL$>icon_img/31.gif');
list[list.length] = new Array('ＺＺＺ', '<$MTBlogURL$>icon_img/32.gif');
return list;
}

function getCustmizeEmojiAttribute() {
// 画像タグに含める属性値（alt属性以外）
var att = 'border="0" style="vertical-align:middle"';

// ***************** 設定ここまで *****************
att = (att != '') ? (' ' + att) : '';
return att;
}
// -->
</script>

（'名前', '<$MTBlogURL$>フォルダ名/アイコン名'）です。
アップしたアイコンと名称をあわせます。
この名前は、コメントを書き込むときにアイコンの代わりに入る文字です。

アイコンはお好みにより追加したり変更したりしてみてください。
ちなみにウチは「icon_img」というディレクトリ（フォルダ）名にしてます。
その後、魚のアイコンも追加してみました(^O^)

で、保存。

そして、

<$MTInclude module="CommentEmojiA"$>

で、それを、「個別エントリーアーカイブ（Individual Entry Archive）」の＜/head＞の上に。


続いてふたつめ。

CommentEmojiB

<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像リスト出力
function writeCustmizeEmojiTagList() {
// コメントを入力するテキストエリアを指定
var textarea = 'document.comments_form.text';

// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
for (var i = 0; i < list.length; i++) {
window.document.write('<a href="javascript:;" onClick="addCustmizeEmoji(' + textarea + ', '' + list[i][0] + '');"><img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" /></a>');
}
}

// reference from jugem.jp (c)
function addCustmizeEmoji(obj, tag) {
var item = '[' + tag + ']';
if (document.selection) {
obj.focus();
sel = document.selection.createRange();
sel.text = item;
} else if (obj.selectionStart || obj.selectionStart == '0') {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
obj.value = obj.value.substring(0, startPos)
+ item + obj.value.substring(endPos, obj.value.length);
} else {
obj.value += item;
}
}
writeCustmizeEmojiTagList();
// -->
</script>

で、保存。

<$MTInclude module="CommentEmojiB"$>

を、「個別エントリーアーカイブ（Individual Entry Archive）」テンプレートの、
コメントフォーム近くの表示させたい場所に。
ちなみにウチは、

<p><label for="text">コメント:</label><br /><br />
<$MTInclude module="CommentEmojiB"$>

と、

<p><label for="text">コメント:</label> <MTIfAllowCommentHTML>
(書式を変更するような一部のHTMLタグを使うことができます)</MTIfAllowCommentHTML><br /><br />
<$MTInclude module="CommentEmojiB"$>

ここに追加。（見た目上＜br /＞を増やしてあります）


続いてみっつめ。

CommentEmojiC

<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag() {
// （１）コメント全体のタグの id 属性
var commentAreaIdName = '';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentBodyClassName = 'commentbody';

// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
var objComArea;
var classComArea;
var objComBody = new Array();
if (commentAreaIdName != '') {
objComArea = document.getElementById(commentAreaIdName);
if (!objComArea || !objComArea.innerHTML) return;
classComArea = objComArea.getElementsByTagName(commentAreaTag);
} else {
classComArea = document.getElementsByTagName('*');
}
for (var i = 0; i < classComArea.length; i++) {
if (classComArea[i].className == commentBodyClassName) objComBody[objComBody.length] = classComArea[i];
}
for (var i = 0; i < objComBody.length; i++) {
objComBody[i].innerHTML = getStringCustmizeEmojiTag(list, objComBody[i].innerHTML, att);
}
}

function getStringCustmizeEmojiTag(list, s, att) {
for (var i = 0; i < list.length; i++) {
s = s.split('[' + list[i][0] + ']').join('<img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" />');
}
return s;
}
changeCustmizeEmojiTag();
// -->
</script>

で、保存。


そして、またまた、「個別エントリーアーカイブ（Individual Entry Archive）」テンプレートに、

<$MTInclude module="CommentEmojiC"$>

を、

<$MTInclude module="CommentEmojiC"$>
</MTEntryIfCommentsOpen>
</MTEntryIfAllowComments>

のように追加。


次に、個別エントリーアーカイブ（Individual Entry Archive）のコメント表示部分を修正。

<div id="c<$MTCommentID$>">

の部分を、

<div id="c<$MTCommentID$>" class="commentbody">

にします。（これを追加しないと表示されないので注意）

好みによってはスタイルシートで、commentbodyの表示の指定します。
（スタイルシートの指定は無くても大丈夫かな？：未確認）

そして、同じようにコメントリスト、コメントプレビューテンプレートも修正。

プレビューの方は、

<MTComments>
<div class="commentbody">
<$MTCommentBody$>
<p class="posted">投稿者 <$MTCommentAuthorLink default_name="Anonymous" spam_protect="1" show_email="0"$> : <$MTCommentDate$></p>
</div>
<$MTInclude module="CommentEmojiC"$>
</MTComments>

ってな感じで、

<div class="commentbody"></div>

で、囲ってみたり。（あってるのかな？）

以前、スマイルアイコンプラグインより先にこちらを試したのですが、なぜかうまく動作しなかったので保留したままでした。今回、モジュール化させたり、アイコンを増やして再度チャレンジしてみたら動いたのでこちらを採用したというわけです(^O^)
スマイルプラグインでもほぼ同じ結果は得られるのですが、コメントを書いてる最中（カーソルの位置）に戻ってアイコンを書き込めないのが書き直しが多い私にはちょっとつらかったので。。。(^^ゞ
設置のしやすさは同じ感じでしょうか。。。どちらも時間はかかりました。が、アイコンの追加が楽しいのも事実(^O^)