ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > カスタマイズをしよう! > title - コメントにプレビューの機能をつけたい!

コメントにプレビューの機能をつけたい!

コメントを書く時にプレビューがあるとわかりやすくていいなーと思ったことありませんか?そのプレビューの機能を追加する方法を紹介します。
あらかじめプレビューする状態としない状態がチェックボックスで選べて、さらに書いている途中でチェックを入れてもそこからプレビューが始まります。
このブログのコメント欄を見てみると、どのような感じになるのかわかりやすいと思います。

コメントにプレビューの機能する方法

【参考記事】 「こそっとゴルフ・パンヤ」様:コメントプレビュー機能追加について
        「stroll::blog」様:コメントをプレビュー表示コメントプレビューを必要なときだけ実行するには?

1.最初に管理画面のテンプレートの設定からHTMLの編集を開きます。そして<!--/comment-->というタグを探します。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。見つかったらその少し下の方に、

<textarea id="comment" cols="50" rows="5" name="comment[body]"></textarea>
この様なtextareaで囲まれているタグがあると思います。下になければ、上の方を見て下さい。「Ctrl」+「F」を使って検索すると、2つあると思いますが1つは普通のコメント用、もう1つはコメントの編集用なので間違えないで下さい。

<textarea id="comment" cols="50" rows="5" name="comment[body]"onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea>

見つかったらこの様に[body]"の後ろに赤字で書かれたタグを挿入して下さい。
あと青字で書かれているようにid="名前"のタグが自分の所にない人は、この様にid="comment"を同じ位置に書き加えて下さい。そしてすでにid="名前"がある人は後で使うので名前を覚えておいて下さい。

2.次に<!--comment-->~<!--/comment-->に囲まれたタグの中にある<%comment_body>というタグを探します。

このブログだと・・・

<!--comment-->
<dl class="section" id="cm<%comment_no>">
<dt class="cm_header"><%comment_title></dt>
<dd class="cm_body"><%comment_body></dd>
<dd class="cm_footer"><ul>
<li><%comment_year><%comment_month><%comment_day>&nbsp;|</li>
<li><%comment_mail+name> #<%comment_trip></li>
<li><%comment_url+str></li>
<li class="admin"><a href="<%comment_edit_link>" title="コメントの編集">[Edit]</a></li>
</ul></dd>
</dl>
<!--/comment-->
この様になっていました。<%comment_body>が見つかったら、このタグを囲っているタグの指定している名前を覚えておきます。このブログの場合は赤字で書かれたcm_bodyという名前です。(ddで囲われているから)

3.名前を覚えたら、コメントプレビューを表示したい場所に、

<label for="comment_preview">comment preview:</label><br />
<div class="2で覚えた名前を記入" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div><br />

を張りつけます。
2で覚えた名前を入力と言うところは、1つ上で覚えた名前を入れます。僕ならcm_bodyをここに記入します。※間違えて1で覚えた名前を記入しないで下さい。
「ご利用のブラウザ、設定ではご利用になれません。」の部分は、プレビュー表示不可能なブラウザとJavaScriptがOFFの場合に表示する文字です。

また、表示したい場所がよくわからない人は<input type="submit" value="送信" />この様なタグを探して、その後ろの方にでも張りつけて見て下さい。(出来上がりの後に確認して場所を変えたければ、その近辺に色々と張ってみてしっくりくる場所を探して下さい。)

4.次にコメントをプレビューするかどうかのチェックボックスの設置をします。
・最初の状態がプレビューをする?にチェックを入れたい場合

<input type="checkbox" name="checkboxCommentPreview" value="" onClick="changeCommentPreview()" checked /> コメントをプレビューする?


・最初の状態がプレビューをする?にチェックを入れない場合

<input type="checkbox" name="checkboxCommentPreview" value="" onClick="changeCommentPreview()" /> コメントをプレビューする?


初期状態でプレビューさせたい人は上を、見ている人にプレビューするか決めて欲しい人は下のタグを、あなたの置きたい場所に張りつけます。

場所がよくわからない人は、先ほど張りつけたタグのさらに後ろにどちらかを張りつけて下さい。
青字の部分の言葉を変えたい人は、好きな言葉に変えて下さい。

5.最後に<!--/comment_area-->を探して下さい。value="送信"の少し下にあると思います。
見つけたら、その直前に下記のタグを張りつけます。

<script type="text/javascript">
<!--
// コメントプレビューを制御
// ↓コメントプレビューをデフォルトでONにする場合は 1 、OFFにする場合は 0
var isCommentPreview = 0;
function changeCommentPreview() {
isCommentPreview = (isCommentPreview == 0) ? 1 : 0;
doCommentPreview();
}
// コメントプレビュー
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('\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>


オレンジでかかれた0の所は、初期状態をプレビューする方のチェックボックスを設置した人は0を1に変えて下さい。
赤字で書かれた所は1.で覚えた名前をここに入力します。commentと違う名前の人は書き換えて下さい。
青字で書かれた所は、プレビュー欄に表意される言葉です。変えたい人は好きな言葉に変えて下さい。

このブログを例にすると、

</form>
</div>
<script type="text/javascript">
<!--
~~~~~~~~
//-->
</script>

<!--/comment_area-->

この様に<!--/comment_area-->の直前に上記のタグを挿入します。

以上で編集作業は終わりです。最後に変更を押して保存をして下さい。
これでブログを確認すると、コメントのプレビューが追加されていると思います。

※1つの記事にコメントとトラックバックが50以上つくブログの場合は、コメントプレビュー処理がだんだんと遅くなってしまうので、初期状態をプレビューしないにしたほうがよいです。

できたので「stroll::blog」のstrollさんにお礼を言に行く。

この方法で上手くいかない人はFCafeさんにコメントのプレビューという記事があるのと、共有プラグインにもC-PREVIEWがあるのでそちらを試して下さい。


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
たまたま通りかかって、面白そうだったので使わせて頂きました。
で、自分なりに外部jsにしてみました。
ただし軽いバグありです。
(ちゃんと動作するのに、最初だけ「ご利用のブラウザ、設定では…。」が表示されます。)

改善点はありますが、自分のブログで記事にしても大丈夫でしょうか?
こんにちは。
kk6さんのブログを拝見させていただきましたが、自分よりもかなりコンピュータ言語の知識がある方だと思います。
このスクリプトも自分で考えた物ではなく、WEB上で見つけたものを参考に記事を書いたので、スクリプトの部分は自分でもあまりわかっていません。
記事にするのはたぶん大丈夫だと思うので、改善点がわかるようでしたら、教えていただけるとありがたいです。

原因がわかりました。
最初、scriptタグをhead内に記載して外部jsを読み込ませてたんですが、
もしや外部jsを読み込んだ後にjava off時の表示部分を読ませてるからだめなんじゃないかと思い
scriptタグを<!--/comment_area-->の直前に持ってきたら問題なく動作しました。
単純なミスでしたね…お騒がせしました。

結局たいした改変はしてませんが、記事に起こしてみます。

ちなみに自分もたいていは今回のように他の方が紹介しているものを参考にしてるだけなので
実際に自分だけでできることは少ないです^^;
なるほど!!
このブログも外部jsにしてあるのですが、この記事を書く時に、両方ためして問題なかったので、環境の違いでうまく出来ない人もいるのか~と思っていました。
でも原因を聞いてみると「なるほど~」確かに簡単な事でしたね。僕もすぐにkk6さんのブログを見てピンっと気づけばよかったです。
自分が外部jsにしてあるのは、単純に短くなって見やすいからだったのでSEO的な問題で外部jsにした方がいいのは知りませんでした。勉強になりました。ありがとうございました!
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/177-bcdd6a8d   

コメント・プレビュー機能を外部js化
初心者でもできる簡単FC2ブログの作り方 -コメントにプレビューの機能をつけたい!-(管理人:るんばばさん)という記事を見つけたので、参考にしてうちのブログもコメント・プレビュー機能を実装してみました。

Template Designed by DW99