MTのコメントで絵文字を使う
ずっとやってみたかった、コメントで絵文字を使う方法！
ぽちっとアイコンを押せばその絵文字が挿入されるので
コメントを付けてくれる方もちょっと楽しいのではないかな？
と思っています(*'-')
しかし、コメント数が多くなったり、絵文字が使われれば使われるほど
表示が重くなってしまうのでそこらへんはご注意くださいね！
チームニゴイでございます。さんのエントリーコメントにアイコン と
Magic Whiteさんのエントリーコメントに絵文字機能復帰です
を参考にさせていただきました。
ここでは少し補足しながら覚書きを書いておきます。(自分が忘れないため･･･)
＊2007年1月7日に3.3対応に書き換えました。
テンプレートに直接スクリプトを書き込んでいってもいいのですが、
長くなってしまう事と、後々のカスタマイズのしやすさを考えて
テンプレート･モジュールを使います。
スクリプトは3つです。
・画像設定スクリプト
・画像リスト出力スクリプト
・画像変換スクリプト
スクリプトを読み込ませるテンプレートは
・エントリー・アーカイブ（個別エントリーアーカイブ）
・コメントプレビューのテンプレート
必要に応じてスタイルシートで表示方法を指定する事もできます。
1・好きなアイコンを探してくる。
自分が使いたいアイコンを素材屋さんなどから探してきて、アップロードします。
2・画像設定スクリプトのテンプレートモジュールを作ります。
管理画面の、テンプレート＞モジュールの、右上にある
「モジュールを新規作成」をクリック。
テンプレートの名前をCommentEmojiAに。
モジュールの中身に
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像設定
function getCommentEmojiList() {
var list = new Array();
// 画像名、画像URLの設定
list[list.length] = new Array('・・・', '<$MTBlogURL$>emoji/0.gif');
list[list.length] = new Array('ハート', '<$MTBlogURL$>emoji/1.gif');
list[list.length] = new Array('汗', '<$MTBlogURL$>emoji/2.gif');
return list;
}
function getCustmizeEmojiAttribute() {
// 画像タグに含める属性値（alt属性以外）
var att = 'border="0" style="vertical-align:middle"';
// ***************** 設定ここまで *****************
att = (att != '') ? (' ' + att) : '';
return att;
}
// -->
</script>
と入れて保存。
赤文字の所はコメントを書く時、絵文字を押した時に
コメントフォームの中に絵文字の変わりに表示される文字です。
［ハート］という風に表示されます。好きな言葉にできます。
青文字の所はその画像があるURLを書く所です。
'<$MTBlogURL$>emoji/0.gif'だと、
MTのindex.htmlと同じ場所にあるemojiというフォルダの中にある0.gifという画像。ですね。
<$MTBlogURL$>の所にはウェブログの設定で入れているブログのＵＲＬが入ります。
<$MTBlogURL$>の上の階層に画像を置いたりした場合は
'http://(フォルダまでのURL)/emoji/0.gifという風に
どーんとパスを書いてやればいいと思います。
フォルダの名前も好きな名前にして大丈夫です。
list[list.length] = new Array('・・・', '<$MTBlogURL$>emoji/0.gif');
は、好きなだけ増やす事ができます。
しかしあまり増やしすぎると重くなってしまいますのでほどほどに・・・ね。
3・CommentEmojiAを読み込む設定をします。
エントリー・アーカイブの</head＞の上に
<$MTInclude module="CommentEmojiA"$>
と書きます。
4・画像リスト出力スクリプトのテンプレートモジュールを作ります。
管理画面の、テンプレート＞モジュールの、右上にある
「モジュールを新規作成」をクリック。
テンプレートの名前を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>
と入れて保存。
5・CommentEmojiBを読み込む設定をします。
エントリー・アーカイブのコメントフォームの好きな場所に
<$MTInclude module="CommentEmojiB"$>
と書きます。
私は3.3では以下の赤文字の所に入れています。
<div id="comments-open-footer" class="comments-open-footer">
<$MTInclude module="CommentEmojiB"$>
<input type="submit" accesskey="v" name="preview" id="comment-preview" value="確認" />
<input type="submit" accesskey="s" name="post" id="comment-post" value="投稿" />
</div>
6・画像変換スクリプトのテンプレートモジュールを作ります。
管理画面の、テンプレート＞モジュールの、右上にある
「モジュールを新規作成」をクリック。
テンプレートの名前をCommentEmojiCに。
モジュールの中身に
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag() {
// （１）コメント全体のタグの id 属性
var commentAreaIdName = '';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentBodyClassName = 'comment-content';
// ***************** 設定ここまで *****************
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>
と入れて保存。
*注
緑文字の所のclass 属性、3.2以降はこのままでOKです。
3.2以前のバージョンでは、多分commentbodyだと思います。
ご確認ください。
7・CommentEmojiCを読み込む設定をします。
エントリー・アーカイブの<MTEntryIfCommentsOpen>の上に
<$MTInclude module="CommentEmojiC"$>
と書きます。
8・classの指定。
3.3では最初から指定がしてあるので、何もしなくてOKです。
3.2などの場合、
個別エントリーアーカイブの<div id="c<$MTCommentID$>">を
<div id="c<$MTCommentID$>" class="comment-content">にします。 緑文字の所は、commentbodyなど、 上で出てきたものと同じにしてください。
9・コメントプレビューのテンプレートにも読み込む設定をします。
・</head＞の上に
<$MTInclude module="CommentEmojiA"$>
と書きます。
・好きな場所でいいですが、とりあえず<div id="comments-open-footer" class="comments-open-footer">の下に
<$MTInclude module="CommentEmojiB"$>
と書きます。
・</MTEntryIfCommentsOpen>の上に
<$MTInclude module="CommentEmojiC"$>
と書きます。
必要な方は、スタイルシートなどで見た目を調節してください。
保存して、再構築で完成ヽ(・∀・)ノ！
画像の名前とURLを設定するのが面倒ですが、がんばってください！
かわいいアイコン探す楽しみが増えました♪
このカスタマイズは3.1で試しました。以後ずっと使っています。
2007年1月7日に3.3対応に記事内容を書き換えました。
3.2、3.1での方法も注釈を入れて書いていますので、確認しながらお試しください。
3.33-ja
Template by
絵文字の使い方は[！]
文の好きな[ハート]場所で下に並んでいる
好きな絵文字をクリックしてください。
投稿したら［ ］で囲まれた文字の所が
対応する絵文字になります。
コメント時刻: 2005年05月23日 20:18
こんばんは[ニコッ]
参考およびコメントありがとうございました[ピカッ]
アイコンがあると華やぎますよね〜[♪]
これからもよろしくお願い致します。
コメント時刻: 2005年05月23日 21:58
きゃ〜！
お越しいただきまして、コメントまでいただきまして
ありがとうございます[ハート×２]
アイコンいいですよね〜(*'-')
こちらこそ、これからもよろしくお願いします！
コメント時刻: 2005年05月23日 23:46
難しいです[涙]
なんせど初心者なんで・・・。
でも設置したいです・・・。
ついでにカウンターも
これって初心者むりですか？[｜｜｜]
コメント時刻: 2005年06月13日 19:27
>yasu*さん
初心者でも決して無理ではありません[！]
私もこの改造は失敗の連続でした。
(他の方法で出来なかったからこの方法にしたり、色々やりました)
でも諦めずにタグとにらめっこしていけば出来ると思います。
どこら辺が分からないでしょうか？どんな些細な事でも言ってください。
お手伝いできると思います。
コメント時刻: 2005年06月14日 01:26
何もかもです[涙]
この間やっと、カウンター設置が解ったのです。
恥ずかしながら・・・。
でもですね、これをしようと思ったら、すべてカスタマイズできるフォーマットを使うのはわかるんですよね・・・。
そっからがまったくです[｜｜｜]
コメント時刻: 2005年06月18日 10:43
>yasu*さん
あ、ライブドアブログを使っていらっしゃるんですね。
この記事は Movable Type 用に書いてるのでさぞかし
チンプンカンプンだったと思います[タラッ]
私はライブドアブログをちゃんと使った事が無いので
ライブドアブログ用の解説はできません[涙]ｺﾞﾒﾝﾈ
変わりに、ライブドアブログ用のコメントで絵文字を使う方法を
解説されている記事を見つけてきました。
buena suerte!さんの「コメントに絵文字機能をlivedoor Blogで！」という記事です。
URLはhttp://blog.livedoor.jp/cie/archives/13836504.html
丁寧に解説されているようですし、質問にも答えてくださっているようなので
頑張ればきっと絵文字を使えるようになると思います。
がんばってください[！]
コメント時刻: 2005年06月18日 13:58
たすかりました。
ありがとうございます。
何事もやる気だと自分を励ましております。
感謝です[うっとり]
コメント時刻: 2005年06月20日 15:47
>yasu*さん
本当、何事もやる気ですね！あと根気！[ポッ]
カスタマイズ頑張ってください。応援してます
コメント時刻: 2005年06月22日 17:51
こんにちは、りぃさん
お世話になっています。
この前、此方の記事を参照させて頂いたので
トラックバックをさせて頂きました。
ありがとうございます。
MT3.2を使っている時は、MTMacroプラグインの方法で
問題なく出来たんだけど、3.3でも絵文字は表示されるけど
Javaエラー「未知のエラーとかって」出るので・・・原因は、不明。汗
話し替わって今日は、雨も上がってお天気が良いけど
子供が風邪を引いているので、出かけるの止めちゃいました。（^^ゞ
風邪が流行っているので気をつけて下さいね。
では、良い週末をお過ごし下さいね。
コメント時刻: 2006年12月10日 13:28
≫mituruさん
お役に立てたようで嬉しいです[ポッ]
あら、3.3からMacroプラグイン駄目なんですね(´・ω・｀)
たくさん仕様が変わっちゃったから、どこかでエラーが出てるのかな。
情報ありがとうございます。記事を修正する時に付け加えておきます。
お子様の風邪は大丈夫ですか？
今年は幸いまだ風邪をひいていません。
が、毎年1回は風邪をひく自信があるので気をつけますっ[うわーん]
コメント時刻: 2006年12月11日 23:51
こんばんは、りぃさん
風邪治りました。ありがとうございます。
子供の場合は、急な発熱があるので困ります。
年内の仕事が終ったので、これでお休みに入れます
年内は、カスタマイズ等で大変お世話になりました。
では、良い年をお迎え下さいね。
コメント時刻: 2006年12月29日 18:39
≫mituruさん
今年もあと明日だけになってしまいましたね～。
1年間お仕事お疲れ様でした。
くれぐれも無理はしない程度に、来年もがんばってくださいね[！]
来年も、少しずつですがカスタマイズを記事にしていきたいと思っています。
あまり期待しないで待っててくださいネ[うわーん]
良いお年を！
コメント時刻: 2006年12月30日 18:29
はじめまして [♪]
りぃさんの説明どおり設定していきました。
説明が完璧なので、難なくクリアー！！
見栄えのいいGIFもさくさくと収集して終了。
ありがとうございました m(_ _)m
しかし、なんか不細工です・・・[えーん]
GIFにマージンみたいなのが入っていて、田植え直後の田んぼみたいに広がってしまっています。
画像自体は大きさに問題なしなんですが。
HTMLならば MARGIN とか PADDING で調整できるのですが、JAVAは全くの素人なのでわかりません。
お助けくださいませ。
コメント時刻: 2007年01月06日 00:32
↑ 名前が抜けておりました。
失礼しました。 [てへへ]
コメント時刻: 2007年01月06日 00:35
≫3daruさん
はじめまして[ポッ]
ちょっ、田植え直後の田んぼって・・・！
あまりに表現が上手で爆笑してしまいましたっ[テレ]
間隔が広がってしまうのは・・・
最後のスタイルシートも記入して保存したでしょうか？
もしそうなら、その部分を削除してみたら詰まって並ぶかもしれません。
できなかったらまたコメントください。
この記事自体情報が古くなってて申し訳ないです。
今から3.3用に記事内容を修正したいと思います。
コメント時刻: 2007年01月07日 14:12
ありがとうございます！
田植え直後の田んぼから、収穫前の田んぼに変えることが出来ました。
カスタマイズした時にCSSが効かなくなっていたのが原因でした。
申し訳ありません [涙] JAVAの問題ではありませんでした。
記事内容の修正、ありがとうございます。 とっても分かりやすいです。
ありがとうございました。
コメント時刻: 2007年01月07日 18:42
≫3daruさん
無事に稲穂が実ったようでよかったです(笑)[祝]
また分からない所とか変な所とかあったらコメントしてください[ニコッ]
コメント時刻: 2007年01月07日 19:53
こんにちは。
何度も絵文字入力にトライしてましたがナカナカ・・・
しかし
こちらの、親切・丁寧な解説で
やっと出来ました[♪]
ありがとうございました[ニコッ]
コメント時刻: 2007年02月05日 15:43
≫ジュリママさん
こんにちは[ポッ]
カスタマイズ成功おめでとうございます！
お役に立てたようで嬉しいです[うっとり]
コメント時刻: 2007年02月05日 23:54
初めまして！
こちらの丁寧な説明で、絵文字を使えるように出来ました[ハート]
これで、素っ気無いブログが少しは可愛くなった気が(っ´∀｀)っ
助かりました。ありがとうございましたm(__)m
コメント時刻: 2007年03月09日 15:26
≫スウさん
はじめまして[ポッ]
カスタマイズ成功おめでとうございます。
お役に立ててよかったです～。
（お返事遅れてごめんなさい[涙]）
コメント時刻: 2007年03月18日 11:33
この度こちらのエントリーを参考に「コメントで絵文字」のカスタマイズをさせて頂きました。
ありがとうございました。
大変わかりやすかったのでトラックバックを遅らせて頂いたところ、文字コードを確認しなかったので文字化けしてしまいました。
お手数ですが削除お願いできますでしょうか？
よろしくお願い致します。
コメント時刻: 2007年04月04日 17:35
≫Chapaさん
参考にしていただきありがとうございます[ポッ]
お役に立てて嬉しいです。
トラックバックの件、作業完了しました。
対応がとても遅くなってしまいごめんなさい[えーん]
コメント時刻: 2007年04月06日 22:16