2005年 1月 31日(月) 先負 今日は何の日?
コメント・プレビュー
LeapK.com さまのところで、コメントをしようとしたら、
テキストエリアの下に リアルタイムで 書いてることが表示される、いわゆる 「コメントプレビュー」 を実現されていて
「いいですねー、これ。」・・・・とコメントしたら、ご親切に JavaScript を 公開してくださいました。
「コメントプレビューのJavaScript」 というエントリが それです。
元ネタさま、リンク先変更になりました。こちら です。05.03.09 追記
やむやむでは、ほんの少しだけ修正して 個別エントリアーカイブの コメント記入のテキストエリアのところに
↓のように 記述を追加しました。
<p> (中略)
<textarea tabindex="4" id="text" name="text" rows="10" cols="50" onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea>
</p>
<p>
<label for="comment_preview">Comment Preview :</label>
</p>
<div class="comment" style="background-color:#efefef; padding:1px 10px 10px;">
<p><div class="entry_body" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div><script type="text/javascript">
<!--
// コメントプレビュー機能のスクリプトです
function doCommentPreview(mode) {// コメント入力テキストエリアのidを指定します
var textAreaId = 'text';// プレビューを表示するタグのid属性
var previewAreaId = 'comment_preview';// コメントプレビュー欄初期表示文字 または、画像タグ
// コメントが何も入力されていない時に表示される文字になります
var initString = 'ここにコメントのプレビューが表示されます。';if (!isDoCommentPreview()) return;
if (!getElementCommentPreview(textAreaId) || !getElementCommentPreview(previewAreaId)) {
return;
} else if (null != mode && mode == 'init') {
getElementCommentPreview(previewAreaId).innerHTML = initString;
return;
}var s = getStringCommentPreview(textAreaId);
if (null == s || '' == s || '<br />' == s) {
s = initString;
}if (getElementCommentPreview(previewAreaId)) {
getElementCommentPreview(previewAreaId).innerHTML = s;
}
}function getStringCommentPreview(e) {
var s = '';
s = getElementCommentPreview(e).value;
s = s.split('&').join('&');
s = s.split('<').join('<');
s = s.split('>').join('>');
s = s.split('\'').join('"');
s = s.split('\n').join('<br />');
return s;
}function getElementCommentPreview(e, f) {
var l = (document.layers) ? 1 : 0;
if(l) {
f=(f) ? f : self;
var a = f.document.layers;
if (a[e]) return a[e];
for (var w = 0; w < a.length;) {
return getElementCommentPreview(e, a[w++]);
}
}
if (document.all) return document.all[e];
return document.getElementById(e);
}function isDoCommentPreview() {
var ua = navigator.userAgent;
var doNotAgentList = [
ua.indexOf('Opera/6') != -1,
ua.indexOf('Mac') != -1 && ua.indexOf('MSIE 5') != -1
]
for (var i = 0; i < doNotAgentList.length; i++) {
if (doNotAgentList[i]) return false;
}
return true;
}
doCommentPreview('init');
//-->
</script>
</p>
</div>
実際、どんなふうになるかは、コメントのテキストエリアに なにか書きこみしてみてください。
「確認」 を押せば、コメント・プレビューの画面が ちゃんと用意されてるんだから、こんなの必要ない、と
思われる方も おいでかもしれませんが、リアルタイムで 同じ画面のすぐ下に 書いたとおりのものを見られる
この機能、ドリコムのブログとかでも 標準で付いてた機能だったので、取り入れることができて良かったです。
かづさん、どうもありがとうございました。ぺこ <(_ _)>
05.02.07 追記です。このエントリにTBくださいました 今日の覚え書き さま の こちらのエントリ を拝見して、
コメントプレビューに 薄っすら 背景色を付けるカスタマイズを 真似してみました。
↑のソースで、青い字の部分は 見た目の 空き具合の調節で 取りました。また、赤い字の部分を追加しました。
今までの なんとなく 文字が宙に浮いた感じがなくなって 良さげですよね。もそ さん、ありがとうございました。
≫ コメントプレビュー from
Stupid excuse!!
さすらいのカスタマー主婦さえらさんの所でハケーン。 以前やりっぱなしにしていた(... [続きを読む]
≫ [O*] コメント欄にプレビューついた♪ from
**ORANGE**
sbでやってるブログでも付けてる機能なんですが コメントのテキストエリアの下に ... [続きを読む]
≫ コメントプレビュー from
toybox-gu
またまたやむやむさんのとこで、素敵なエントリーがしてあったので 早速導入〓☆ 「... [続きを読む]
≫ コメントプレビュー機能とコメントスパム対策 from
今日の覚え書き
前からどうしてもこの「コメントプレビュー機能」を付けたくて、以前超有名な「stroll::blog」さんのコメントをプレ... [続きを読む]
≫ コメントプレビュー from
Yellow Heart
やむやむさんのエントリーで、「コメントプレビュー」を発見 丸ごとコピペさせて貰い... [続きを読む]
≫ コメントプレビューをつけてみる from
Nonsense?
いつもお世話になっているもそさんのサイト、 それからさえらさんのサイトを参考に、... [続きを読む]
≫ コメントプレビュー from
Treasure
なんだか周りのMT使いさんがみんな コメントプレビューってのを付け始めたので 遅... [続きを読む]
≫ コメントプレビューとサイドメニュー・続きを読むの折りたたみ from
neko no 肉球@BLOG
JUGEM時代はこの3つを搭載していたのですが、 MTに移動してからはまだ手を付... [続きを読む]
≫ コメントプレビュー from
Honey*moon
今更のエントリーになってしまったけど、 もそちゃんやfoofooちゃんもエントリされてた やむやむさんの「コメント・プレビューのスクリプト」 泣き言言いながら、... [続きを読む]
≫ 覚書:最近のカスタマイズ from
我楽
最近、ちょこちょこいじってた内容を覚書しときます。既出ネタなのでエントリーあげするほどのネタでも無いのですが。(苦笑) ■リアルタイムでコメ... [続きを読む]
≫ 折りたたみ♪ from
Moony*Moony
小粋空間様で 3カラムテンプレートをお借りした時に サイドメニューの折りたたみス... [続きを読む]
≫ コメント・プレビュー! from
M*s Cafe-Blog-
ヤプログとかで導入されている、コメント欄にリアルタイムにプレビューして確認しなが... [続きを読む]
≫ コメントのプレビュー from
とってちってた★
久々にMTネタ。 ヤプログとかドリコムとか書いたコメントが下にリアルタイムで表示されるでしょ? あれ、やってみたかったのね。 で、さっそく検索&検索。 やむやむ... [続きを読む]
≫ コメントプレビュー from
MAHALO
コメント欄下にプレビューが出るようにした 参考にさせて頂いたのは【やむやむ】さま... [続きを読む]
≫ コメントプレビューとファビコンつけてみた from
PHAT∴LOVESICK
カスタマイズいたしました、分かり易いエントリーに感謝です。
これからもどうぞ宜しくお願いいたしまする。 [続きを読む]
≫ コメントプレビュー from
Other Lives
ドリコムブログ(ここの人とか)で使われているコメントプレビューがいいなぁと前から... [続きを読む]
≫ コメントプレビューの設置 from
Sans-Souci
いろいろなBlogさんでコメントするときに、下にプレビュー画面が表示されるところ... [続きを読む]
≫ カスタマイズ録(1 from
CU*Chu!
これから私がやって来たカスタマイズを記録に残すべく書いて行こうとおもってます。 ... [続きを読む]
≫ 便利!コメントプレビュー from
grumble
前からやむやむさえらさんのコメントフォーム下に出るコメント・プレビュー、 いいな... [続きを読む]
≫ コメントプレビュー機能 from
*** CCC ***
コメントプレビューを設置しました。 やむやむさんの記事を参考にさせていただいてい... [続きを読む]
≫ プレビューしながらコメントを書く from
夏のクラクション
めったに来ないお客様のためにコメントを書きやすくする プレビューウィンドウを付け... [続きを読む]
≫ コメントプレビューを導入してみる from
LOVE×LOVE!?
やむやむ: コメント・プレビューを参考に、コメントプレビューの設置に挑戦してみま... [続きを読む]
≫ コメントプレビュー from
ちとGo!Go!
コメントプレビュー、設置してみた♪ 導入させていただいたのは「やむやむ」さんの ... [続きを読む]
≫ リアルタイムなコメントプレビュー from
ELECTRICSHEEPdogs!
DRECOMさんとかのブログで、コメントに書き込んだ内容がリアルタイムに表示され... [続きを読む]
≫ コメント・プレビュー機能を追加 from
おじさんの備忘録
MovableType3.2にコメントプレビューを追加 [続きを読む]
≫ [ B]コメントプレビュー from
`ohana
「やむやむ」さま、「Leapk.com」さま、「おじさんの備忘録」さまを 参考に... [続きを読む]
≫ コメントプレビューの表示と、mt-site.jsの作成 from
■甘楽的日々徒然■(乙女ゲーのことなど徒然日記)
コメントを書き込む時に、リアルタイムでプレビュー出来るようにしました。ついでに、コメント投稿する時に、「情報を保存する?」のボックスがあるのに、チェックし... [続きを読む]
≫ リアルタイムでコメントをプレビュー from
WingMemo
コメントのプレビュー(確認)がリアルタイムで出来るようにしてみました。 コメントの確認は文字の折り返し地点や全体のレイアウトの確認に頻繁に使ってます。1つ... [続きを読む]
≫ コメントプレビュー from
Kissx3
記事にコメントをつける際、確認ボタンを押してどうなのかをチェックする場合もあると思うんですが・・・・・・実はこのページに移るだけでも時間を食ってしまうん... [続きを読む]
≫ 進め!MovableType4(コメントプレビュー) from
笑むなAikoの『お玉杓子は飲み物です』
FC2時代の必須カスタマイズ、MT4にも付けてみました。 [続きを読む]
こんちわー!
これいただきますぅ~。
つぅか、以前ドコかで見つけてやってみたんですけど大エラー大会になってたんスよねぇ。
スクリプト弄りかけてて、そのまま放置という。(笑)目からうろこでした。助かりましたぁ!
>>1 198さん
いいですよねー、このカスタマイズ、あたしの中ですごいヒットです。
あたしって、今までも絶対 「確認」 を押して確認してましたから、
それが同じ画面でできるなんて素敵です。(* ̄∇ ̄*)エヘヘ
さえらさん おはようございます
早速 私も使わせていただきました
sbでは 設置してたんですが MTにも付けられてうれしいです
さえらさんには 感謝!感謝です
ありがとうございました
>>3 mayumiさん
(( ̄_ ̄ )(  ̄_ ̄)) いえいえぇ
あたしも 自力で開発したわけではないので・・・(〃_ 〃)ゞ ポリポリ
さえらさん、これはいいですね!
早速、使わせて頂きました
色々カスタマイズされてて、凄く参考になります
これからも楽しみにしてますね♪
>>5 コブーさん
いいでしょ~。すごく気に入ってます。
といっても、よそさまの知恵袋から 技を拝借しただけなんですけどね。
さえらちゃんこんちわ~
これ可愛いので、丸ごとコピペさせて貰いました
さえらちゃんのカスタマイズいっぱい参考にさせて貰いま~す
>>7 真希さん
w(゜o゜)w オーッ 真希しゃん。ありがとうございますぅ。・・・・って、あたしのオリジナルスクリプトじゃないので
アレなんですが。(〃_ 〃)ゞ ポリポリ
さえらさん、あやしい方法をパクってくれてありがとうございます♪
こちらこそ本当にお世話になりました。
この機能は素晴らしすぎです。
MT標準装備にすべきだ!!
背景はちょっとだけ色が付いてた方が見やすいなぁと思って強引にいじくっちゃいましたよ(ノ´∀`*)
多分もっとスマートな方法があると思うんですけど、まぁ見られりゃええやんって事で許してくださいませ。
>>9 もそさん
( ̄ー ̄(_ _( ̄ー ̄(_ _ ウンウン 見られりゃ上等っ
ていうか、あやしくてもなんでも、背景に色が付いてたら見やすいのになー、と、
思いつくだけでも ブラボー!ですよ。その発想が 素敵
ホント、標準でついててもよさそうな機能よねぇ。
こんにちは。foofooです。
私も頂いていきますぅ。
うまくいったらTBさせていただきますね。
でわん♪
>>11 foofooさん
( ‘∇‘ )ノ” コンニチハ~♪
w(゜o゜)w オーッ このカスタマイズは 反響大きかったですねぇ。かづさんに 超感謝だわ。 (*^▽^*)ゞ
はじめまして。
実はこそこそ拝見していました。
そんなわけで、
わたしも頂戴しました。
画期的なスプリクトですね。
さえらさん、凄いです。
>>13 美羽さん
はじめましてぇ。ええええ、困っちゃうぅ。あたしのオリジナルじゃないので
ぜ~~んぜん、すごくないですよぉ。(〃_ 〃)ゞ ポリポリ
はじめまして。コメントプレビュー、実装させていただきました。
ありがとうございます。
でもでも!たくさんのコメントがずらずら並んで
区切りがよくわからない、という問題は、このスクリプトでは解消されないんですね~。
こちらのコメントみたいに、わかりやすくならべるには
どうやったら良いのでしょうか?
かなり困ってます!ぜひぜひご指導ください
>>15 まっきぃさん
コメントに ひとつ置きに背景色をつけてるのは こちらの しましまプラグインで やってます。
コメントだけじゃなくて、トラックバック、エントリ、検索結果の画面にも しましまを使ってますよ。
>>16 さえらさん
さっそくお返事、ありがとうございます!
しましまプラグイン、素敵ですね~。
でもちょっと見た感じ、MTでしかできなそうですよね。
実は私はJUGEMなんですよ~。こちらはMTさんのためのページでしたか、やっぱり。
そうかな~と思いつつも、どうしても欲しい機能だったので
。
ありがとうございました!
>>17 まっきぃさん
あららぁ・・・・ごめんなさいね、すぐ気がつくべきでした。
JUGEMでも できる方法が見つかるといいですね、お役にたてなくてごめんなさい。
さえらさん、コメントを有難うございました
元ネタさまにトラバしたのですが、エラーになり、ま
だ届いていないかもしれないです
複数回送信してダブってはいけないので、時間を
おいて様子をみます。
またお世話になります際にはよろしくお願い致します。
>>19 realguuuさん
わざわざご連絡いただいてありがとうございましたぁ。
faviconもハワイアンですね。ヾ(´▽`;;)ゝ エヘヘ
さえらさん、こんばんは。
いつも、あちらこちらのエントリでフォローしていただいて恐縮です。
気を遣っていただいて、とても恐縮しております。
実は、
申し訳ないご報告に参りました。
サイトをPHP化しようとしたのですが、手順を間違えてしまい、やむなく、過去のエントリ(HTMLファイル)へのアクセスは、全てトップページへリダイレクトするように設定しております。
該当の、エントリを探している人が居ましたら、以下からご覧いただければ幸いです。
今後とも宜しくお願いいたします。
http://www.leapk.com/archives/2005/01/30_000334.php
情けない、ご報告ですみません。
ご連絡を有難うございました。
そういうご事情だったのですね。今日も一度トラバ
送信をしてみたのですがNGだったので、こちらが
何なら怪しいことをしてしまったのではないかと不
安になっていました。
かづさんからタイムリーなご連絡があり、驚いてい
ます。
早速新しいURLにトラバを送信しましたら無事に
出来ました。有難うございました。
>>23 realguuuさん
(゜゜(。。(゜゜(。。 ウンウン そうなんでうよぉ。
何度も トラバ チャレンジしてみてくださったんですね。☆⌒(*^∇゜)v ありがとう
こんにちは はじめまして。
こちらのコメントプレビューのソースをウチのブログ使わせて頂きました
やっぱり確認ボタンよりもその場でプレビューするほうがわかりやすいですね。
トラックバックさせていただいたんですが、上手く行かなくって何度も飛ばしてしまったと思うんですが・・・もしそうだったらスミマセン(T_T)
とってもわかりやすくって参考になりました!
またちょくちょく伺います〜。
>>25 さとしえさん
はじめまして~。
プレビューが同一画面に見えるってのは かなりの魅力ですよね。
トラックバック 重複分は削除させていただきました。ぜんぜん気にしないでくださいねー。
初めまして。もそちゃん経由でおじゃましました。
実はだいぶ以前に参考にさせて頂いたのですが
頑張っても出来ない!と思っててそのまま2週間近く放置してました。
今日久しぶりにカスタマイズするのにもう一度やってみようと思ってたら
何故か放置していたはずなのに既に出来てました・・・ まさにIt"s miracle!!!
たぶん出来てないと思ってただけみたいです。
おかげさまで出来ました!!ありがとうございます
今お引越し準備中のため、旧サイトのほうに後ほどリンクを貼らせて頂きます。
宜しくお願い致します。
>>27 マオさん
はじめまして~。もそさんのところから来てくださったんですね。ヽ( ̄▽ ̄)ノ
あたしも前に似たようなことがありました。なんでできないんだろ・・・?って 半ば諦めて
放置してたカスタマイズ、別の日にもう一度やってみたら、なんなくできたって経験・・・
あの時はどうして何度やってもダメだったのかな~って感じでした。
コメントプレビューは、絶対欲しい機能ですよね。
やったー!さえらさん。うまくいったよ♪(* ̄ω ̄)v
最初ね、
onkeyup="doCommentPreview()" onblur="doCommentPreview()"
の部分に気が付かにゃくて、それ無しでやってたの。
だから全くプレビュー出来にゃくて
ぇ━(*´・д・)━!!!にゃんで出来にゃいの?って凹んだ×2。
だけど、しばらく睨んでたらやっと気付いたの。
バカだね~( ´∀`)ヵヵヵ
でもでも出来て、とっても嬉しいよー。
さえらさん、☆(>ω・)アリガ㌧♪
ワタシの愛を受け取ってくれ(* ̄ヽ ̄)ナゲキッスヽ(* ̄・ ̄)ノ^☆チュッ♪
さえらさん、何度もご足労いただき、ありがとうございました
そうですね、この機能は是非ほしかった機能です。すごい便利なんだもん!
このカスタマイズのついでに 今書いてるここ、このテキストエリアを広げてみたんです。
さっぱり~~
あ、でもここが広くなったらプレビューってあんまり意味無いのかな・・・
ありがとうございました~(^-^)ノ
>>31 sofさん
カスタマイズってやり始めるとキリがないよね。テキストエリア、広げられますよ。
やってみる?(=^_^=) ヘヘヘ
初めまして。
ちょっと前に「エントリにも絵文字を使おう」も
導入させて頂いたのですが、コメント欄やTB URLを見つけられず
お礼が遅くなってしまい、すみません。
こちらのコメント・プレビューも導入させて頂きました。
ありがとうございました!
今後もどうぞよろしくお願い致します。
>>33 かよこさん
はじめまして。それは失礼しました。ごめんなさい。
しばらくアクセスできそうになかったので、いったん、コメントやトラックバックを受け付けない設定にしてたんです。
コメントプレビュー、ホント便利ですよね。
はじめまして♪
コメントプレビューの背景に、色がつく・・ってイイですね。^^
さっそく参考にさせていただきますね♪
すみませ~ん!
なぜか二重投稿に・・・。(汗)
お手数ですが、削除してくださいませ。・・・
>>35 まりりんさん
はじめまして。コメントありがとうございました。カスタマイズはオリジナルじゃないので
恐縮してます。コメント重複はお気になさらないでくださいね。
さえらさん、はじめまして。リアルタイムなコメントプレビューカスタマイズ、参照させていただきました。
プレビュー部分の色もgoodだったので、ホントソノママコピペで使わせていただいちゃいました。
ちょっとムリしましたが(?)コメントエラー画面の方にも取り入れてみました。
プレビュー欄、わかりやすくてホントに便利だと思います。感謝感謝です♪
やむやむさん、私と同じ「小粋空間テンプレご利用サイトさん」かつ「洋楽好き?」でいらっしゃるようで・・・^^
これからもちょくちょくお邪魔させていただきま~す。
トラバもしかしたらダブって飛ばしちゃったかもです。申し訳ありません。。。
もしダブってたらお手数ですが削除よろしくお願いいたします。
>>39 maiさん
はじめまして。コメントとトラックバックありがとうございました。
トラックバック、ダブってませんでしたよ。だいじょうぶです。
洋楽好きなんですけど、最近はあんまり聴けてませんねー。( ̄~ ̄;)
はじめまして
この機能ずっと探していてやっと見つける事ができました♪
上記コードを頂き早速MT3.2に実装してみましたニャ。
ありがとうございましたニャ。
こんばんわぁ。
そして、初めましてですニャ。
壱さんのサイトさんで教えていただきまして、おじゃましていますニャ。コメントプレビュー参考にさせていただきますニャ。
それと、こちらのですね。名前の横にあるかわいいアイコンいいですね☆
教えていただけますかニャ?
いきにゃりで申し訳にゃいですニャ。。。よろしくお願いいたします
*上のところに@nekoとつけるとおもしろいことがおこるとあったんであえて使わせください。
名前はHNでfeiですニャ。よろしくお願いしますニャ。*
>>43 にゃん
はじめまして。
@neko は fei@neko と名前のところに入れていただくと 投稿者名が feiにゃん になるはずだったんですよ。
あと、名前の横にあるアイコンは こちら でご紹介していますが
うちのは 管理者と 管理者以外の方を区別するだけで 投稿者ごとにアイコンを変える方法を
紹介されたエントリも たくさんあると思いますので、そういうのをお望みでしたら
検索等で捜してみられるといいかもしれません。
すみません。。。
feiです
上のコメントエリアのところに全て貼り付けでしょうかニャ???
<textarea id="comment-text" name="text" tabindex="10" accesskey="t" rows="10" cols="30"></textarea><br />
<script type="text/javascript">
<!--
listIcons('document.comments_form.text', 'macro');
-->
</script>
↑が私のコメントエリアの内容にゃんですけども。。。
絵文字を入れておりまして・・・その下に表示したいんですぅ
すみませんが。。。アドバイスよろしくお願いいたします
>>45 feiにゃん
上のと feiさんのとを よく見比べて 足りないものを補ってみてください。
onkeyup="doCommentPreview()" onblur="doCommentPreview()" を textarea のところに追加します。
おはようございますニャ。
テンプレートアイーカイブ・・・最近、再構築をすると500エラーにゃんですニャ。
でも、朝見たら反映されていて無事に、コメントプレビューが出てましたぁ
°゚°。。ヾ( ~▽~)ツ ワーイ♪
ありがとうございますニャ。
w( ̄▽ ̄;)wワオッ!!
間違っていますね。。。「アーカイブ」ですね
色々、ゲストアイコンとか。。。あとですね、ネコ語すっかり気にいってしまったんで
まねっこさせていただきましたニャ。(o*。_。)oペコッ
ありがとうございますニャ。
テンプレート。。。いまいちわかりませんが。。。エントリーが多いとにゃりますかニャ?って言っても、
私、そんにゃににゃいんですよ。
画像はもしかして?重いかもしれません
こんばんわ。
あのですね。聞きたいんですけども・・・いいですかニャ?
例えばやむやむさんのサイドメニューにマウスを乗せると。。。説明とURLが表示されますよね?
私も、nice titleというのを導入していますが、やむやむさんのように透過されていにゃいんですニャ。
こちらで、カスタイマイズで載っているかさがしましたが。。。見つからず
ありますかニャ?教えてください。(´・(●●)・)(o´_ _)oペコリ
よろしくお願いいたしますニャ。
*説明で分からにゃい点はお知らせください*