2006年09月03日

コメントプレビューを設置(livedoorブログ版)3

2006/10/04 投稿後との差異の再調整
2006/09/17 XHTML対応のため修正

 2006/08/27に、yozoの別ブログのyozoの気が向いたと記2.0にコメントプレビューを設置しました。詳しくはこの記事→コメントプレビューを設置
 ここのlivedoorブログも、コメント投稿時に、見やすいようにレイアウトして入力しても、実際投稿されたコメントはせっかくのレイアウトが崩れていることが多くて困っていました。そこで、絵文字はもちろんのこと、レイアウトもプレビュー表示の通りに投稿されるコメントプレビューを下の手順で設置しました。

 このカスタマイズは、お友達ののんびり前進じたばた生活まゆびさんの記事コメントプレビューを付けてみた!!で紹介されていた、stroll::blogstrollさんの記事コメントをプレビュー表示及びコメントプレビューを必要なときだけ実行するには?を参考にさせていただきました。 m(_ _)m
 また、ROOM-Mmioさんも記事コメントプレビューで設置のし方をわかりやすく紹介されています。あわせて案内させていただきます。

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

  1. [カスタマイズ/管理]−[デザインの設定]−[カスタマイズ]をクリックします。
    (デザインの設定の画面でスタイルシート(CSS)が選択された状態になります。)
    • 必ずバックアップしましょう!

     いつも書いてますが、編集する前に、必ずCSSやHTMLのコードをコピーして、例えば「css_bk.txt」や「html_bk.txt」のようにバックアップファイル(テキスト形式)を作成しておきましょう。間違って失敗しても、「css_bk.txt」や「html_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪
  2. 一番下に、.commentpreviewコードを記入して、「この内容で保存する」をクリックします。
    ※先頭の「.」を忘れないようにしましょう。投稿後のコメント表示のCSSを参考に編集してください。yozoの場合は、#commentbodyやcommenttextなどで、padding(枠内の余白)、line-height(行間)、background-color(背景色)を調整して、最後にmargin-right(右余白)を追加しました。
    .commentpreview{
    margin-right:15px;
    padding:10px 0 10px 5px;
    line-height:125%;
    background-color:#f9f0ba;
    }
  3. [個別記事ページ]をクリックして、[Ctrl]+[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにtextareaと入力して、検索してください。
  4. textareaであると確認して、下のようにコードを追加すれば、コメントプレビューの完成です。  
    • コメントプレビューを表示したいところに追加する<input 〜の部分の
      <div>のclassをclass="commentpreview"に変更しましょう。

      <input 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="commentpreview" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div>
    • textareaのidを確認して、var textAreaIdのidを一致させます。

      <textarea id="text" name="body"〜>となっていたら、 JavaScriptの次の部分のtextとして、textareaのidと同じにします。
      // コメント入力テキストエリアのid属性
      var textAreaId = 'text';

    〜途中省略〜

    <tr>
    <td nowrap>&nbsp;</td>
    <td colspan="3"><textarea id="text" name="body" rows="10" cols="50" tabindex="12" accesskey="c" onkeyup="doCommentPreview()" onmouseup="doCommentPreview()" onblur="doCommentPreview()" onfocus="if (text.innerHTML =='お気軽にカキコしてください。') text.innerHTML = '';">お気軽にカキコしてください。</textarea>
    <div id="emoji" style="position:absolute; background-color:#FFFFFF; left: 30px; border:1 solid #000000; margin:0 0 0 0; padding:0 0 0 0; display:none;"></div></td>
    </tr>
    <tr>
    <td nowrap>&nbsp;</td>
    <td colspan="3" align="center"><input type="submit" value=" 投稿する " class="button" name="button" /></td>
    </tr>
    </form>
    </table>
    <input 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="commentpreview" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div>

    </div>
    <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 = 'text';
    // プレビューを表示するタグの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('\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>

    〜途中省略〜

  5. [ブログに設定を反映(再構築)]をクリックして、「再構築する部分を指定」を「全てのページ」を選択して[ブログを再構築する]をクリックして完了です。

yozoからのお願い

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

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


yozoblog at 13:01│Comments(6)TrackBack(4)カスタマイズ 

トラックバックURL

この記事へのトラックバック

1. コメントプレビューを付けてみた!!  [ のんびり前進じたばた生活 ]   2006年09月03日 16:46
「naoKの「ホイきたー!」」のnaoKさんの ブログにコメントしようとしたときに素敵なコメントプレビューを発見!! コメントを書いた後にボタンを押すとこんな風なコメントになりますと 見せてくれます。 便利だなぁと思って』退
2. コメントプレビューを設置  [ yozoの気が向いたと記2.0 ]   2006年09月03日 21:44
 コメント投稿時に、見やすいようにレイアウトして入力しても、実際投稿されたコメントはせっかくのレイアウトが崩れていることが多くて困っていました。またコメントプレビューがあっても、プレビューで見たとおりのダ??
3. コメントプレビュー  [ ROOM-M ]   2006年09月03日 22:13
このモノクロテンプレート「ink」の作者さん、cieさんのFC2ブログにおじゃました際に見かけたコメントプレビュー。 コメント用のテキストエリアに文字入力をすると、それを追いかけるようにプレビューが表示されて、と??://rpc)
4. CLEVER BBSにプレビューを設置(usamoスキン版)  [ yozoの気が向いたと記2.0 ]   2006年09月18日 12:33
 2006/08/27に、ここのコメントプレビューを設置しました。詳しくはこの記事→コメントプレビューを設置 それに続けてyozoの別ブログでlivedoorブログのyozoのおすすめ本にも同じようにコメントプレビューを設置しています p://rpci

この記事へのコメント

1. Posted by まゆび   2006年09月03日 16:50
yozoさん、こんにちは♪(*゚▽゚)ノ
トラバありがとうございました♪<(_ _)>
いつもいつも丁寧に紹介していただいてありがとうございます!!
ライブドアの方にも早速付けられるとはさすがですね!!
私はかなりしり込みしてますが。(笑)
あちらはあまりテンプレートをいじっていないので、
FC2よりも時間がかかってしまいます。(苦笑)
でもコメントプレビューは便利ですものね。
私も時間に余裕ができたら設定してみます♪(o^-^o) ウフッ
2. Posted by まゆびさんへ   2006年09月03日 21:52
5 >まゆびさん、こんばんはー♪

>ライブドアの方にも早速付けられるとはさすがですね!!
あはは・・・FC2もそうでしたが、ここlivedoorこそ、
コメントプレビューが必要なのでは・・・って思ってましたよ。(^○^)
コメントしにくいですからね。気楽にコメントできるのが一番ですよね。(゚-゚*)(。。*)ウンウン

>私も時間に余裕ができたら設定してみます♪(o^-^o) ウフッ
あはは・・・やってみてびっくりでしたよ。速攻でできました。FC2の設置をしてすぐだったから、楽だったのかもしれませんけどね。よろしければ、ここを参考になさってくださいね。(*^-^)

追伸:トラバ返してくださって、ありがとーございまっす♪m(_ _)m
3. Posted by mio   2006年09月03日 22:12
yozoさん、トラックバックでのお知らせありがとうございました☆
記事でもご紹介くださってうれしいです〜♪
あちらにもこちらにも、ちゃちゃっと設置しちゃうyozoさんに感動中。。。
わたしなんて、あーだこーだと、半日がかりでやっと出来たのがアレですから・・・

こちらのブログにもプレビューがついて、とってもコメント入れやすくなりましたね♪
何より、コメントプレビュー・・・楽しいです(*'m')
4. Posted by enu   2006年09月03日 23:32
5 こんばんはー。yozoちゃん。
うおーー。こっちにもコメントビューつけたんだねー☆
すごーーい☆
早速書き込んだら見てみよーっと☆
これ、とっても便利な機能だもんね♪
どんどんカスタマイズ(?)も進んで、どんどん素敵なブログになっていくねー☆
いいかんじでっす☆
5. Posted by mioさんへ   2006年09月04日 07:49
5 >mioさん、おはよーございまっす♪
こちらこそ、トラバを返してくださってありがとーございまっす♪m(_ _)m

>あちらにもこちらにも、ちゃちゃっと設置しちゃうyozoさんに感動中。。。
>わたしなんて、あーだこーだと、半日がかりでやっと出来たのがアレですから・・・
実は、記事は遅くなりましたが、FC2に設置して、同じ日にlivedoorブログにも設置していたのですよ。
やっぱり覚えているうちに、ちゃちゃっとやっちゃうのが一番速いですからね。(=⌒▽⌒=) ニャハハハ♪

>何より、コメントプレビュー・・・楽しいです(*'m')
はい。今もプレビューしながら、書いてます。レイアウトのストレスがなくなりますから、
気持ちよくコメント投稿できますよね。(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン
6. Posted by enuちゃんへ   2006年09月04日 07:53
5 >enuちゃん、おはよーございまっす♪

>うおーー。こっちにもコメントビューつけたんだねー☆すごーーい☆
えへへ・・・実は記事は遅くなったのですが、FC2に設置してすぐにこちらにも設置したのですよ。(*^-^)

>早速書き込んだら見てみよーっと☆これ、とっても便利な機能だもんね♪
コメント投稿のときに、レイアウトを考えるのがとても大変でしたからね。これで気楽に投稿できるでしょ。
yozoも当然ですが、みなさんも便利になるので、設置できてよかったですよ。(^○^)

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔   
 
 
 
コメントをプレビューしますか?

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