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

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

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