2005年 6月 12日(日)   仏滅    今日は何の日?   

TopMovableTypeMTカスタマイズ > コメントとエントリ投稿用絵文字パワーアップ

MTカスタマイズコメントとエントリ投稿用絵文字パワーアップ new

みなさんがコメントをくださる時用の絵文字は ここ、あたしがエントリする時用の絵文字は ここ で それぞれ
実装済みなんだけど、実は 少々の不便があって、気にはなってたけど、どうしようもないかな・・・と諦めてたんです。
それは・・・絵文字をクリックすると、カーソルの位置ではなく、常に 文末に 絵文字が入ってしまうことでした。
それと、もうひとつ。エントリ用の絵文字は body でしか使えない (追記では使えない) ってのも、
body のところで絵文字を表示させておいて、コピペして追記のところにむりやり持ってくだなんて
なんだかスマートじゃないな~って・・・思ってたんですよね~。ところが!「エントリに絵文字」 に
トラックバックをくださった mayu*can さんに行ってみると (」゜ロ゜)」 ナント!!あたしが なんだかなぁ~~~、と
思ってた2点、バッチリクリアなさってるではありませんか!絵文字は コメントでも エントリ投稿時にも
ちゃんと カーソルを置いたところに入るし、追記でも 絵文字が使えるし・・・(o^^;o) オドロイタワ・・・
てことで、早速 やむやむでも 真似させていただきました。えーーーっと、このカスタマイズは
あらかじめ、MT Smileys を導入しておく必要があります。ここ あたりを参考に まず、MT Smileys を入れてください。
そこまでできたら、あとは楽チン!カーソルを置いたところに 絵文字を表示させるには、
Smileys の JavaScript を 以下のものに差し替えるだけです。

<script type="text/javascript" language="javascript">
<!--
// MT Smileys http://mt-hacks.com/mt-smileys.html
// Edited By Noel http://noe.lolipop.jp/
function emoticon (smiley) {
var txtarea = document.comments_form.text;
smiley = ' ' + smiley + ' ';
if(navigator.appName.indexOf("Microsoft") > -1){ // If IE
txtarea.focus();
if (!document.selection) return;
var range = document.selection.createRange();
range.text=smiley;
txtarea.focus();
// return false;
}else{ // If other browser
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? smiley + ' ' : smiley;
txtarea.focus();
} else {
var length = txtarea.textLength;
var start = txtarea.selectionStart;
var end = txtarea.selectionEnd;
var txtarea1 = txtarea.value.substring(0, start);
var txtarea2 = txtarea.value.substr(end, length);
txtarea.value = txtarea1 + smiley + txtarea2;
txtarea.focus();
}
}
}
//-->
</script>

なお、このスゴ技スクリプトは mayu*can さんの コメント欄に絵文字を (追加カスタマイズ) から コピーさせていただきましたが、
元ネタは Hitori-Goto さんの きつねさんでもOK です。ありがとうございます。
また、上記スクリプトは コメント欄の絵文字用で、これを エントリの本文や追記で使うには、
tmpl/cms/edit_entry.tmpl に 上記JavaScript と smileys の内容をコピペするわけですが
本文に使うためには、↑ 赤い字のところを entry_form.text に 修正する必要があります。
同様に 追記で使うためには entry_form.text_more とし、さらに 以下の2点を修正します。
  • ↑ 青い字のところに function emoticon1 (smiley) { のように 1 を追加する。
  • smileys の画像パス (http から始まる 絶対パスで指定) のところも a href="javascript:emoticon1 とする。
    これで、上書き保存して、tmpl/cms/edit_entry.tmpl を アップします。
    絵文字を使いたい(表示させたい) テンプレート(MainIndex ・ 個別エントリアーカイブ等) に 以下の修正を かけます。
    <$MTEntryBody$> を <MTMacroApply><$MTEntryBody$></MTMacroApply> に
    <$MTCommentBody$> を <MTMacroApply><$MTCommentBody$></MTMacroApply> に
    そして、追記は・・・ <$MTEntryMore$> を <MTMacroApply><$MTEntryMore$></MTMacroApply> に。
    また、各テンプレートの一行目には <$MTInclude module="smiley macros"$> も 忘れずに・・・
    これで、追記でも 絵文字が使えるし、コメントでも エントリ投稿時でも カーソルの位置に 絵文字が入るようになりました。

    Posted by Caetla at 05:20 | Category : MTカスタマイズ | Comments [11] | Trackbacks [11] | Clip!! | Ranking
    Tag : MovableType , カスタマイズ , 絵文字
    この記事はどうでしたか?(お気軽に 記事に点数を付けてみてくださいね♪)
    Bad ← 1 2 3 4 5 → Good
    評定平均:(3.1) 総合点:(2351) 投票人数:(758)

  • エントリーURL


     

    トラックバックURL


     

    トラックバック

    MT3.17調整中 from http://www.f-f-f.net/blog/archives/000406.php FFF HP
    昨日の夜中に「もう駄目だぁ〓! :cry: 」と、諦めて3.151に戻したのです... [続きを読む]

    Tracked on 2005年06月12日 13:51

    コメントリストのテンプレートを修正 from http://caetla.oops.jp/blog/archives/001694.html ぴぃかぶぅ
    ちょっと、実験トラックバックで~す。ど~なるかな? [続きを読む]

    Tracked on 2005年06月12日 16:17

    “MT Smileys”を追記(extend)でも使えるように・・・&プラスα。 from http://blog.toycozy.com/blog/archives/2005/08/21-1519.php TOY COZY MUSEUM 別館
    以前も書きましたが、そのカタチからも笑顔の表情を感じさせる“(笑)”というのを、かなりの頻度で好んで使っているわけですが... [続きを読む]

    Tracked on 2005年08月21日 15:53

    MTで絵文字 from http://www.s-koichi.info/blog/archives/2005/09/01/2151-003880.html つまらん日記
    MTで絵文字を使うカスタマイズを施す事になった。 絵文字を使う方法としては一般... [続きを読む]

    Tracked on 2005年09月01日 22:08

    エントリーにも絵文字が欲しくて♪ from http://www.mellmell.jp/blog/archives/200509/13_/1503.php ++Blog-MELL++
    コメント欄には 絵文字が使えるようにと設定済みだったので 今度はエントリーでも使... [続きを読む]

    Tracked on 2005年09月13日 15:35

    MovableType3.2 コメント欄で絵文字を使う from http://mynoah.net/archives/2005/10/29_1343.php おじさんの備忘録
    MovableType3.2のコメント欄で絵文字を使う [続きを読む]

    Tracked on 2005年10月29日 13:43

    コメントとエントリー投稿で画像(絵文字)を使う~MovableType from 21世紀のアフィリエイト通販生活
    MT Smileysプラグインを使って、MovableTypeのコメントとエント... [続きを読む]

    Tracked on 2005年11月25日 02:32

    うまくいかない絵文字が... from dotabata.net
    この前エントリーに絵文字ではblog自体の設定を変える方法で絵文字の入力に成功し... [続きを読む]

    Tracked on 2005年12月11日 14:36

    「エントリー、追記」と「コメント」欄に絵文字使用。 from Movable Typeではじめたアフィリエイト。
     やっと完成したよ†。:-)いったいどれだけかかったんだか・・・:x 途中で泣き入って、ほんとやめて... [続きを読む]

    Tracked on 2006年04月30日 07:14

    「エントリー、追記」と「コメント」欄に絵文字使用。 from Movable Typeではじめたアフィリエイト。
     やっと完成したよ†。:-)いったいどれだけかかったんだか・・・:x 途中で泣き入って、ほんとやめて... [続きを読む]

    Tracked on 2006年04月30日 11:53
    コメント
    1

    さえらさん、トラックバックありがとうございます愛
    コメントはエラーだったとのことで、申し訳ありませんでした泣

    さて、私は説明が下手なので心配していたのですが、無事成功なさったようでよかったですVery Happy
    いつも、さえらさんのエントリを参考にさせていただくばっかりなので(ありがとうございますハート )、ちょっとお役に立てたようでうれしいですドキドキ

    Posted by ゲスト http://www.mayucan.com/ at 2005年06月12日 11:01 [RES]
    2

    >>1 繭さん
    説明下手なんて、ぜんぜんそんなことないですよ~ハート
    すっごく、わかりやすかったので、楽々 修正できましたグッ!
    どうもありがとうございましたらぶらぶ

    Posted by 管理人 さえら http://caetla.oops.jp/blog2/ at 2005年06月12日 12:49 [RES]
    3

    え~~~っと・・・
    ここ のエントリで I18N.pm を Encode.pm版に差し替えて トラックバックをいただいたときに
    「~」 が 「〓」 に ならないようになってたはずなのに、なっちゃったので、Encode.pm版 I18N.pm を
    最新版にして、ぴぃかぶぅ から トラックバックを送信して 実験してみたわけですが・・・
    見事、「~」 が 「〓」 に ならないで 表示されました。これは OKだったんだけど、あらたな疑問が・・・
    なんで ぴぃかぶぅ の ファビコン、真っ黒なんだ~~~?MainIndexだけじゃなく、個別アーカイブや
    カテゴリアーカイブ、日付アーカイブにも favicon を指定してるのに・・・
    favicon.ico を http から始まる 絶対パスで 指定してないのがいけないのかな、と思って
    修正してみたんだけど、真っ黒アイコンは 直りません。コメントのところには ちゃんと表示されるのに なんでかなぁ。。。

    Posted by 管理人 さえら http://caetla.oops.jp/blog2/ at 2005年06月12日 17:10 [RES]
    4

    こんにちは。
    何故か今頃にこちらの記事に辿り着きました。追記欄でSmileyアイコンが使えないというのは、微妙に大きなLaughing 制約だったりしたものですから、助かりました。有り難うございます。

    Posted by ゲスト toycozy http://blog.toycozy.com/blog/ at 2005年08月21日 15:54 [RES]
    5

    >>4 toycozyさん
    そうなんですよねー。記事編集の画面が 絵文字だらけには なっちゃいますが、Rolling Eyes
    やっぱり どこでも思ったときに自由に絵文字入れられるのは 魅力です。アハッ

    Posted by 管理人 さえら http://caetla.oops.jp/blog2/ at 2005年08月22日 05:23 [RES]
    6

    またまた、参考にさせて頂きました。
    でもみごとに失敗してしまいましたvv
    文字化けしてるからおかしいなぁ? と思ってたのですが
    とりあえず投稿しないとわからないので
    ドキドキしながら投稿してみたらみごとに文字化けのまま真っ青
    コメントの方は出来ているのに何故なんでしょう
    設置自体はきれいに出来たんですけど・・・
    お知恵を貸していただけると有難いのですが
    よろしくお願いします

    Posted by ゲスト MELL http://www.mellmell.jp/blog at 2005年09月13日 16:16 [RES]
    7

    >>6 MELLさん
    このカスタマイズで 文字化けは一度もなかったので、どうしてなのか よくわからないんですけど
    もしかしたら、修正したテンプレートを ブログと同じ文字コードで保存するとかで、直らないでしょうか?
    ていうか、それくらいしか思いつかないので、それで直るといいなー、って感じです。
    頼りなくてすみません。

    Posted by 管理人 さえら http://caetla.oops.jp/blog2/ at 2005年09月13日 21:50 [RES]
    8

    色々ありがとうございましたVery Happy
    あれからもう一度見直しして
    コメントのとこも右サイドバーがくずれるので
    テーブルに突っ込んで汗
    エントリーは最初からやり直してみました。
    ちゃんと表示されるようになりました笑顔
    どこがどうって解らないのですが、
    単純なミスをしていたのかもです。
    ホントにお騒がせしました(o*。_。)oペコッ

    Posted by ゲスト MELL http://www.mellmell.jp/blog at 2005年09月14日 02:01 [RES]
    9

    >>8 MELLさん
    いつもあいまいなお返事しかできなくてホントすみません。
    だけど、直ってよかったです。L(@^▽^@)」

    Posted by 管理人 さえら http://caetla.oops.jp/blog2/ at 2005年09月14日 05:05 [RES]
    10

    やっとうまくいきましたニャ。
    随分悩んできましたが,こちらのエントリーを参考にしてできましたニャ。
    ありがとうございましたニャ。Very Happy

    Posted by ゲスト dotabatapapaにゃん at 2005年12月11日 13:38 [RES]
    11

    >>10 dotabatapapaにゃん
    はじめまして~。ご参考になったならうれしいです。あたしもいろんなかたのお世話になって
    やっとできたので、お気持ちよ~くわかりますぅ。

    Posted by 管理人 さえら http://caetla.oops.jp/blog2/ at 2005年12月11日 16:11 [RES]
    コメントしてください

    サイン・インを確認しました、 . さん。コメントしてください。 (サイン・アウト)

    (いままで、ここでコメントしたとがないときは、コメントを表示する前にこのウェブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)


    情報を登録する?


    Very Happy Smile Sad Surprised Shocked Confused Cool Laughing Mad Razz Embarassed Crying or Very Sad Evil or Very Mad Twisted Evil Rolling Eyes Wink
    チュッ グッ! ハート ハートブレイク ニコッ アハッ グスン プンプン 雪 晴れ 曇り 雨 ・・・ 愛 汗 |||
    怒 ♪ ? ! vv 閃いた! 失恋 らぶらぶ ドクロ 真顔 微笑 笑顔 困惑 ニヤリ キョロ 泣
    ベー 驚 むむっ 真っ青 ドキドキ くんくん ガーン クゥ ゲソッ 目が点 チュゥ ショボーン zzz Powered by MT Smileys

    Amazon Search
    Google Similar