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]
    Amazon Search
    Google Similar