--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2006年08月27日

コメントプレビューを設置

2006/09/13 XHTML対応のため修正


 コメント投稿時に、見やすいようにレイアウトして入力しても、実際投稿されたコメントはせっかくのレイアウトが崩れていることが多くて困っていました。またコメントプレビューがあっても、プレビューで見たとおりのレイアウトとは違って投稿されるものばかりでした。
 ところが、先日、お友達ののんびり前進じたばた生活まゆびさんのブログへお邪魔したとき、コメントプレビューは、プレビュー通りに、投稿されるすぐれものでした。さっそく本日(8/27)、まゆびさんの記事コメントプレビューを付けてみた!!で紹介されていた、stroll::blogstrollさんの記事コメントをプレビュー表示及びコメントプレビューを必要なときだけ実行するには?を参考に以下の手順で設置しました。
 まゆびさん、stroll、ありがとうございました。m(_ _)m


コメントプレビューを設置


  1. FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定]をクリックします。
  2. 「現在設定されているスタイル」の表の「編集」の欄の[ 修正 ]をクリックします。
  3. 「テンプレートの編集」にある、「HTMLの編集[テンプレート名]を編集しています。」の欄の中でクリックします。(この中であればカーソルはどこでも構いません。)
  4. [Ctrl]+[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにtextareaと入力して、検索してください。

    必ずバックアップしましょう!

    いつも書いてますが、編集する前に、必ずHTMLのコードをコピーして、「html_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「html_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪
  5.  <!-- コメント投稿 -->の下のtextareaであると確認して、下のようにコードを追加すれば、コメントプレビューの完成です。
     textareaは、<!-- コメント編集 -->の下にもあるので注意しましょう。今はコメント投稿のプレビューを設置します。
     
    • <%comment_body>を囲んでいる<div>のclassと
      <div class="comment-content" id="comment_preview">のclassを
      同じにします。(yozoの場合はcomment-contentでした。)

      プレビュー通りに、コメントが投稿されるようにするために、
      <div class="comment" id="c<%comment_no>">となっている部分の
      classと<div class="comment" id="comment_preview">のclassを
      同じにします。(yozoの場合はcommentでした。)
    • <textarea id="comment"?>のid(yozoの場合はcomment)と
      下に貼り付ける、JavaScriptの次の部分のidを同じにします。

    <div class="comment" id="c<%comment_no>">
    となっていたら、
    <div class="comment" id="comment_preview">とします。


    // コメント入力テキストエリアのid属性
    var textAreaId = 'description';→var textAreaId = 'comment';


    <!-- コメント投稿 -->

    ?途中省略?


    <dt><label for="comment">コメント:</label></dt>
    <dd><textarea id="comment" name="comment[body]" tabindex="12" accesskey="c" rows="10" cols="30" onkeyup="doCommentPreview()" onmouseup="doCommentPreview()" onblur="doCommentPreview()" onfocus="if (comment.innerHTML =='お気軽にカキコしてください。') comment.innerHTML = '';">お気軽にカキコしてください。</textarea></dd>
    <dt><label for="secret">Secret:</label></dt>
    <dd><input id="secret" type="checkbox" name="comment[himitu]" tabindex="12" accesskey="p" />サイト管理者にのみ通知する</dd>
    </dl>
    <input type="checkbox" name="checkboxCommentPreview" value="" onclick="changeCommentPreview()" onkeypress="changeCommentPreview()" tabindex="40" accesskey="l" /> コメントをプレビューしますか?<br />
    <label for="comment_preview">comment preview:</label><br />
    <div class="comment" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div><br />

    ?途中省略?


    <!-- コメント投稿フォーム終了 -->
    <script type="text/javascript">
    <!--
    // コメントプレビューを制御
    // ↓コメントプレビューをデフォルトでONにする場合は 1 、OFFにする場合は 0
    var isCommentPreview = 0;
    function changeCommentPreview() {
    isCommentPreview = (isCommentPreview == 0) ? 1 : 0;
    doCommentPreview();
    }
    // -->
    </script>
    <script type="text/javascript">
    <!--
    // コメントプレビュー
    function doCommentPreview(mode) {
    // コメント入力テキストエリアのid属性
    var textAreaId = 'comment';
    // プレビューを表示するタグのid属性
    var previewAreaId = 'comment_preview';
    // コメントプレビュー欄初期表示文字 または、画像タグ
    var initString = 'ここにコメントのプレビューが表示されます。';
    if ((null == mode || mode != 'init') && isCommentPreview == 0) return;
    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('&amp;');
    s = s.split('<').join('&lt;');
    s = s.split('>').join('&gt;');
    s = s.split(''').join('&quot;');
    s = s.split('
    ').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>
  6. [更新]をクリックして動作を確認しましょう。

yozoからのお願い

私がここで紹介している方法、ただ、自分がTRYしたことを書いているだけです。もっと簡単で、すばらしい方法もあると思います。ただ、言うまでもありませんが、参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょうね。もし、この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければCommentやTrackbackしていただけたら、幸いです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

スポンサーサイト

スレッドテーマ:カスタマイズ:ブログ

メイン

≪New 防災週間 人間もペットも備えあれば憂いなし | Top | 画像タグのエラーを回避する。 Old≫

トラックバックURL


トラックバック

コメントプレビューを設置しました from ととろのおもちゃ箱
最近、お友だちのブログでコメント欄に投稿前に表示状態を確認できる「コメントプレビ [Read More]

コメント

yozoさん、こんばんは♪(o^∇^o)ノ
トラバありがとうございます。<(_ _)>
こちらからも送らせていただきました。

こちらはたくさんの方がコメントしてくださいますから、
コメントプレビューがついて皆さん喜んでくれることでしょう!!(゚-゚*)(。。*)ウンウン
そして記事の方もとっても分かりやすいですよね!!
どこをどう変えたのかきちんと明記されていて素晴らしいです。(o^-')b グッ!

では私もコメントプレビュー今日から活用させていただきます~♪(o^-^o) ウフッ

コメント

>まゆびさん、こんばんはー♪
トラバ返してくださってありがとーございまっす♪m(_ _)m

>コメントプレビューがついて皆さん喜んでくれることでしょう!!(゚-゚*)(。。*)ウンウン
まゆびさんのおかげで、コメントしやすいブログになったと思います。
本当にありがとーございまっす♪m(_ _)m

>そして記事の方もとっても分かりやすいですよね!!
あはは・・・とりあえず、一度でやってしまえるようにしましたよ。
たぶん、10分くらいでFC2の方はできるのでは・・・って思ってますよ。
とっても励みになりますm(_ _)m

>私もコメントプレビュー今日から活用させていただきます~♪(o^-^o) ウフッ
あはは・・・心おきなく活用してくださいね。(*^-^)
本当に情報提供ありがとーございまっす♪m(_ _)m

コメント

おや、こちらにも流行のコメントプレビューが!
FC2での方法ですね。今度やってみようかしら・・・
私は常時オンがいいんだけど「stroll::blog」さんを読むとコメントが溜まってくるとどうやら反応が遅くなるとか・・・それではやはりこちらをまるっとコピペですね、楽でよかった(笑)
今すぐって分けには行かないけど、まあのんびりやってみますね。
毎度のコトながら分かりやすい記事をありがとうございます。

コメント

>ととろさん、こんばんはー♪

>FC2での方法ですね。今度やってみようかしら・・・
ととろさんのjerryちゃんのFC2ブログだったら、全く同じでできますからね。
たぶんログインやら画面を開ける手間の方が大きいかもというくらい、はやいですよ。この記事のチェックにやってみたら、そのくらいでしたよ。(*^-^)

>それではやはりこちらをまるっとコピペですね、楽でよかった(笑)
あはは・・・それですぐ使えますよ。どこに貼ればいいかというのに、JavaScriptの知識やらなんやらは必要ありませんからね。理解してする操作ではありません。ですから遠慮なくコピペしてくださいね。(゚-゚*)(。。*)ウンウン

>毎度のコトながら分かりやすい記事をありがとうございます。
そうおっしゃってくださると本当にうれしいですよ。
いつも励ましてくださってありがとーございまっす♪m(_ _)m

コメント

yozoさん、こんばんわ♪(゚▽゚*)

コメントのプレビュー、私もつけようかどうしようか悩んだんですよねぇ。
ココで紹介されているカタチではなく、別窓で開くヤツ。
でも、クリアボタンを設置してしまった後だったので、ボタンだらけになりそうだなぁとか、別窓開くとウザいかもなぁ(爆)とかって諦めたのですが・・・

ナルホド!!
この方法ならウチのBlogでも試してみる価値ありそうだ(・∀・)
JUGEM・FC2で可能ならウチでも平気なハズ?!
やってみるかなぁ~(゚▽゚;)

コメント

>Pavさん、おはよーございまっす♪

>コメントのプレビュー、私もつけようかどうしようか悩んだんですよねぇ。
そうなのですか?yozoも投稿欄に入力したとおりに出力されないのに、かなりのストレスを感じていましたので、本当にこれは助かっています。(゚-゚*)(。。*)ウンウン

>この方法ならウチのBlogでも試してみる価値ありそうだ(・∀・)
>JUGEM・FC2で可能ならウチでも平気なハズ?!やってみるかなぁ~(゚▽゚;)
livedoorもOKでしたよ。(*゚ー゚)(*。_。)ウンウン♪(゚ー゚*)(。_。*)ウンウン♪
お友達も、絵文字も使いづらいし、レイアウトは崩れるし・・・┐( -"-)┌ヤレヤレ...
というストレスもなくなってくれそうなので、期待してまっすv(*'-^*)bぶいっ♪

コメント

yozoさん、こんばんわ♪(゚▽゚*)

やっぱり一筋縄ではウマク設置できませんでした・・・
くぅ~~っ・・( ̄^ ̄;)

カスタマイズをパパッとやってしまおうなんて、自分の力量も考えずナメてたせいなんですが(。。;)
チョット今日は余裕なさそうなんで、またゆっくり眺めて思案してみるコトにします~~~( ̄∀ ̄;)ヤレヤレ

コメント

こんばんはー。
yozo殿もコメントプレビューを設置されたのですね!
プレビューがあるととっても便利ですよねー。
しかも自分が書いたコメントを見ながら書けるというのが
私的にはすごく気に入ってます☆
なかなか自分のブログのメンテナンスできなくて
まゆび殿やyozo殿のブログがパワーアップしていくのを
いつもいいなーと思いながら楽しませていただいてますー。

コメント

yozoさん、こんばんは^^
yozoさんもコメプレされたのですね。
さっそく、コメプレしながら書いてます^^
これ本当にいいですね(*^▽^*)
書きながらなんだか楽しいですよ♪

コメント

>Pavさん、こんばんはー♪

>やっぱり一筋縄ではウマク設置できませんでした・・・くぅ~~っ・・( ̄^ ̄;)
あらら・・・ダメでしたか・・・今ちょっと失礼させていただいて、Pavさんのブログのソースを拝見させていただきました。textarea のidはないみたいですね。nameと同じく id="comment"と追加しておけばいいと思いますよ。また、divのclassはclass="CommentText"とすればよさそうです。お時間のあるときにでも、またチャレンジしてみてくださいね。もしダメだったらごめんなさいでっすm(_ _)m

>チョット今日は余裕なさそうなんで
のんびりやりましょうね。テンプレートのことで大変ですもんね。(*^-^)
まさか『☆F3』だったりして ( ̄∀ ̄*)イヒッ

コメント

>ばばるさん、こんばんはー♪

>yozo殿もコメントプレビューを設置されたのですね!
そうなんですよ。まゆびさんのおかげなんですよ。(^○^)
早速気に入って活用してくださっているんですね。m(_ _)m

>なかなか自分のブログのメンテナンスできなくて
>まゆび殿やyozo殿のブログがパワーアップしていくのを
>いつもいいなーと思いながら楽しませていただいてますー。
あはは・・・もしもばばるさんがやってみたいカスタマイズがあるのでしたら、
いつでもお手伝いしますよ。頼りないけど・・・(ノ∇≦*)キャハッッッ♪
遠慮なくその際はお声をかけてくださいね。(゚-゚*)(。。*)ウンウン

コメント

>ゆうゆさん、こんばんはー♪

>yozoさんもコメプレされたのですね。さっそく、コメプレしながら書いてます^^
うふふ・・・さっそく活用してくださってありがたいですよ♪m(_ _)m
まゆびさんやmioさんのところで、みかけてこれは設置したいなぁ~って思っていたのですよ。そんなときに、まゆびさんがソースの出所を記事にしてくださったので、
ラッキー!と思って飛びつきましたよ(=⌒▽⌒=) ニャハハハ♪

コメント

yozoさん、こんばんわ、再びデス(・∀・;)

プレビュー設置完了しました。
ありがとうゴザイマス☆
昼間に設置ができなかった原因、スペルミスでした(。。;)
見直してもわからなかった・・・。
commentのmがイッコ足らなかっただなんて、恥ずかしくて誰にもいえません!!orz

ただ、わからなかったのが・・・。
コメントの編集の際のフォームにもプレビューつけようと思うと、それぞれに対してscriptはってやらないと動かないんですよね(。。;)
なので私は編集フォームの方はプレビューはずそうかと思ってるのですが、yozoさんどうしてるのかなぁと思って見に来てみたんですよ。
ん~、もうチョット暖めてみるかなぁ( ̄∀ ̄;)(笑)

あ、TBさせていただきますね♪

コメント

>Pavさん、おはよーございまっす♪

>プレビュー設置完了しました。ありがとうゴザイマス☆
できましたか!(*^-゚)vィェィ♪ オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!
IDのスペルミスでしたか?よくあることですよね。プログラムの動かない最大の原因は、yozoの場合も、スペルミスが多いですよ。(ノ∇≦*)キャハッッッ♪

>コメントの編集の際のフォームにもプレビューつけようと思うと、
>それぞれに対してscriptはってやらないと動かないんですよね(。。;)
お気づきになりましたか?IDごとのスクリプトになっているようですね。
それぞれのフォームに設定しないといけません。
外部ファイルにしたら、改変になっちゃうし・・・やむを得ませんね('-'*)エヘ
yozoも投稿フォームだけに設置してます。(*´ο`*)

コメント

yozoさん、こんにちは♪

コメントプレビューを設置なさったということで、何となくコメント書いてます(笑)
近頃は、夜はすっかり寝過ごしやすくなって来ましたが・・・
今日もこっちは昼は暑いぃ~~ですよ!

yozoさんとこも、暑そうなのかなぁ~~(??)

コメントプレビュー、早速見てみましたよ。
こりゃ便利で凄いですね!!o(*^-^*)o感動~♪

コメント

>ろんちゃんさん、こんばんはー♪

>コメントプレビューを設置なさったということで、何となくコメント書いてます(笑)
あはは・・・早速活用してくださったのですか♪なかなか便利でしょ。
更新ボタンのまゆびさんの真似をしたんですよ♪(*^-^)

>今日もこっちは昼は暑いぃ~~ですよ!
yozoは、大阪ですから昼間はめっちゃ暑いですよ。
朝夕はさすがに、涼しくなってきましたけどね♪┐( -"-)┌ヤレヤレ...
残暑はまだ厳しいですからね。お互い体調には気をつけましょうね。(^○^)

コメント

yozoさん、こんにちは!
こちらでもコメントプレビューが導入されたのですね♪
とっても使い心地がよくて、たくさんコメントを書いちゃいそうですw
まゆびさんやyozoさんの記事を読んでいたら、わたしもやっぱり記事に残しておきたくなってきました。
お二人の分かりやすい記事には敵わないですけれども。
こういうカスタマイズって、自分のテンプレートがどういう記述になっているか、
よく読み込むきっかけになっていいですよね☆
これでidなんかは勉強になりましたよ!
記事に仕上げたら、トラックバックさせていただきますね♪
(いつになるか分からないですけど^^;)

コメント

>mioさん、こんばんはー♪

>こちらでもコメントプレビューが導入されたのですね♪
>とっても使い心地がよくて、たくさんコメントを書いちゃいそうですw
いえいえ♪mioさんやまゆびさんのところで見かけて、お!こりゃいいやって
思っていましたからね。ストレスなしでコメント投稿できるのがいいですよね♪

>お二人の分かりやすい記事には敵わないですけれども。
あはは・・・またまた、そんな謙遜を。
まゆびさん、みおさんはわかりやすい記事ですからね。(*^-^)
yozoのところは、わかりにくい点のサポートつきです。(ノ∇≦*)キャハッッッ♪

>これでidなんかは勉強になりましたよ!
本当ですよね♪デザインはデザイン担当が、プログラムはプログラム担当がという時代はとうに終わっているみたいですね。valueやら、idやらnameやらを駆使しなきゃなりませんからね。(゚-゚*)(。。*)ウンウン

>記事に仕上げたら、トラックバックさせていただきますね♪
はい♪楽しみに待っています。((o(*^^*)o))わくわく

コメント

こんばんは!
strollさんの記事を読んでいたのですがどうにもこうにもお手上げだったので(笑)
あっちこっちうろうろ。場所は分かった気がしたけど、その後の書き換えが・・・分からなくてテンプレ触ることが出来なかった(^^;
ってことで、同じテンプレに縋ろうと思っていたこちらをまるっとコピペさせていただきました。確かにいっこも変更無しで出来ました(爆)
小粋空間さんにしていてよかったーと実感したひと時。
だから全然ととろにとっては勉強になりませんでしたが、次回記事の折にリンクをさせていただきます。
今日は遅いので置いただけです、でもお知らせまで。どうもありがとうございました。

コメント

>ととろさん、おはよーございまっす♪
コメントプレビュー設置されたのですか!
jerryちゃんのいる『ととろのおもちゃ箱』ですね。(*^-°)v オッケェー♪
・・・・・・・・・只今、訪問中でっす・・・・・・・・・
ばっちりできてましたね。
d(゚ー゚d(゚ー゚d(゚ー゚d(゚ー゚)b゚ー゚)b゚ー゚)b゚ー゚)b yeah!
 動いた後のスクリプトや追加コードでの変更点を確認してくださったら、納得だと思いますよ。この変更をさせるための記述を見直していけば、後々の勉強につながるのでは・・・なぁ~んてエラそうですね。m(_ _)m

コメント

yozoちゃん。こんにちはー。
何回も一気に来ちゃってごめんねー・・・。久々だったから・・・。
お邪魔しまーす♪

あ・・・!!!これー。まゆびさんのところで見た!!!コメントプレビュー♪
っていうか・・・。アハハ↓で、早速使ってみたりしている・・・。
FC2にyozoちゃんと一緒にお引越ししてよかったよー・・・。
もし違うととこに引っ越してたら・・・。
分からない事だらけでも・・・。
こんな参考になる記事にも出会えなかったし・・・。
きっとパニくって・・・。やーめた・・・。とかってなってたかもって今思うもん!!!

なるほどーー!!!うんうん。
コメントプレビューね!!!覚えておく♪

コメント

>enuちゃん、こんにちはー♪

>何回も一気に来ちゃってごめんねー・・・。久々だったから・・・。お邪魔しまーす♪
あはは・・・そんなに気を遣わなくていいですよ。どうぞ♪どうぞ♪遠慮なく。
でも、あんまり無理しなくていいですからね。なにしろ、ここは『気が向いたと記』ですからね。(=⌒▽⌒=) ニャハハハ♪

>あ・・・!!!これー。まゆびさんのところで見た!!!コメントプレビュー♪
早速活用してくれましたか?入力しやくすくなったでしょ(*^-^)
まゆびさんの情報のおかげですよ。enuちゃんもコメントプレビューしたくなったら
いつでも遠慮なく相談してね。意外と簡単ですよ。なにしろ貼り付けるだけですからね。プログラムを理解する必要なんてありませんから、ってyozoもわかんないんですけどね(ノ∇≦*)キャハッッッ♪

>きっとパニくって・・・。やーめた・・・。とかってなってたかもって今思うもん!!!
(^○^) それはyozoも同じですよ。いっつも元気をもらってますよ。
ブログが楽しいのも、enuちゃんはじめお友達のみなさんのおかげですもんね。
感謝してます。m(_ _)m

コメント

設置ではお世話になりました。
記事にしましたのでTBを送りますね。
記事中にリンクをさせて頂きました。あと画像が入ってますが、差し障りがあったら知らせてね。削除します。
大丈夫だと思ったので先にアップです。ではよろしくお願いします。

コメント

>ととろさん、こんばんはー♪

>設置ではお世話になりました。記事にしましたのでTBを送りますね。
たくさんの紹介をしてくださった上に、トラバまでありがとーございまっす♪
こちらからも返しのトラバ入れさせていただきました。m(_ _)m

>あと画像が入ってますが、差し障りがあったら知らせてね。削除します。
あはは・・・差しさわりなんてありませんよ。(ノ∇≦*)キャハッッッ♪
ととろさんのあきらめない姿勢にはいつも学ばされますよ。(*^-^)
今回のミスの発見、自力解決でさらなるスキルアップしましたね。
どんどん積極的に色々とやってみましょうね。もちろん楽しくね(*^-゚)vィェィ♪

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。