忍者ブログ
｜ADMIN｜EDIT｜RES｜

果報は寝て待て(-_☆)


果報を寝て待ってはいるのですが・・・
11月 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 
◇ ◆ ◇ Recent Entry ◇ ◆ ◇
(12/14) モンスターハンターワールド(MHW)ベータテスト(体験版)の感想 ：[games]MHW
(12/14) 12/13のツイートまとめ ：[Twitter]Twitterのまとめ
(12/13) 12/12のツイートまとめ ：[Twitter]Twitterのまとめ
(12/12) 12/11のツイートまとめ ：[Twitter]Twitterのまとめ
(12/11) 12/10のツイートまとめ ：[Twitter]Twitterのまとめ
(12/10) 12/09のツイートまとめ ：[Twitter]Twitterのまとめ
(12/09) 12/08のツイートまとめ ：[Twitter]Twitterのまとめ
(12/08) 12/07のツイートまとめ ：[Twitter]Twitterのまとめ
(12/07) 12/06のツイートまとめ ：[Twitter]Twitterのまとめ
(12/06) 12/05のツイートまとめ ：[Twitter]Twitterのまとめ
≪ [184] [183] [182] [181] [180] [179] [178] [177] [176] [175] [174] ≫
　　　　　　

[PR]

　　　　

2024/11/21 (Thu)｜

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。



編集
　　　　　　

コメント投稿時のプレビューする？って機能

　　　　

2006/08/29 (Tue)｜[customize]ＨＴＭＬ/ＣＳＳ

コメント投稿時のプレビューについて、いろんなトコロで紹介されているのかと思いますが・・・

忍ブロでは、管理者のコメント返信用の画面上ではプレビューできるんですよね。
で、こんなカンジでプレビューできたらいいなぁと思ってはいたのですが・・・。

先日、コメント投稿ボタンに加えて「やっぱヤメ」のクリアボタンを設置する方が安易にできたモノで(・∀・；)
なんかこの上にプレビューボタンまでつけたらゴチャゴチャするなぁと懸念していたんです。


そんな矢先に！！
yozoさんトコでの『コメントプレビューを設置』の記事を見てみると、チェックボタンでプレビューするかしないかをコメント作成者が選ぶコトができるってハナシで(ﾟ▽ﾟ*)
そういや、前にstrollさんトコで見たなぁと思ってたら、やっぱり出所はstrollさんトコでした(笑)


そんなワケで、さっそく設置をしてみました。



：：：追記(８/２９)：：：
追記記事内で紹介しているソースで、忍ブロ(新規テンプレート)用に私が書き換えた部分がわかるように明示しました

：：：追記２(９/１１)：：：
同様のコメントプレビュー設置されていたBLOGを発見しましたので、TBさせていただきました。
今日現在でTB先は以下の４件になります。
当記事の投稿時のTB
stroll::blog | コメントをプレビュー表示
yozoの気が向いたと記2.0
記事を紹介していただいた方のTB
Benjamin's Forum Site - べんじゃみんのブログ : コメントのプレビューを表示できるようにする
本日追加したTB
きまぐれ日記｜ちょっぴりカスタマイズ。
詳しい説明は、yozoさんの記事もしくはstrollさんの記事に書いてある通りですので省略します。
テンプレートによっては異なると思いますので、是非、参考記事の方も目を通してくださいね。

参考記事：
yozoの気が向いたと記２．０(yozoさん)：
『コメントプレビューを設置』

strollblog(strollさん)：
『コメントをプレビュー表示』
『コメントプレビューを必要なときだけ実行するには？』



で、作業は大きく分けて３つ。
１．コメント投稿フォームで、textareaのｉｄをつける
２．プレビューの表示部分を設置
３．プレビューを動かす為のｓｃｒｉｐｔを埋め込む



ココではテンプレートの編集→ＨＴＭＬ画面とにらめっこです(・∀・；)

ＨＴＭＬの中からコメントフォーム部分を探します。
そして、コメントを記載する部分にあたる<textarea～・・・>という部分を探します。
忍ブロの新しいテンプレートから作成したテンプレートなら、以下の通りになっているハズです。
<textarea class="CommentForms" name="comment" cols="40" rows="4"></textarea>


コレを以下のように書き換えます。
尚、この色の部分は、忍ブロ(新規テンプレート)用に修正した部分になります。
<textarea class="CommentForms" id="comment" name="comment" cols="40" rows="4" onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea>


そして次に、プレビューを表示させたい場所へ、以下のソースを入れ込んでしまいます。
<input type="checkbox" name="checkboxCommentPreview" value="" onClick="changeCommentPreview()" /> コメントをプレビューしますか？<br />
<label for="comment_preview">comment preview:</label><br />
<div class="CommentFormBlock" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div><br />


場所については、テンプレートのデザインやそれぞれの好みもあると思うのですが、私は記事作成部分のすぐ下に入れてしまいました。
「同じでいいや☆」って人は、ココまでの作業を全て盛り込んだ下記のソースをお使い下さい。

この部分を探します！！

<tr>
<td class="CommentFormTh">Ｃｏｍｍｅｎｔ</td>
<td class="CommentFormTd"><textarea class="CommentForms" name="comment" cols="40" rows="4"></textarea></td>
</tr>


コレを↓のソースへ書き換えてしまいます。

<tr>
<td class="CommentFormTh">Ｃｏｍｍｅｎｔ</td>
<td class="CommentFormTd"><textarea class="CommentForms" id="comment" name="comment" cols="40" rows="4" onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea></td>
</tr>
<tr>
<td class="CommentFormTh"><label for="comment_preview">ｐｒｅｖｉｅｗ？</label></td>
<td class="CommentFormTd"><input type="checkbox" name="checkboxCommentPreview" value="" onClick="changeCommentPreview()" /><br/><div class="CommentFormBlock" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div></td>


ここまで済んだら、あとは以下のｓｃｒｉｐｔを埋め込みます。
埋め込む場所については、もっと他の場所でも構わないのかもしれませんが・・・。
とりあえず私は、投稿画面のスグ下、</table></form>の下に続けて入れ込んでしまいました。
<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('\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>


以上で作業は終了です。
記事詳細画面のプレビューで『※チェックするとココにコメントのプレビューが表示されます。』と表示されていれば成功☆
更新して確認してみてください。
PR


トラックバック()｜ コメント(5)｜ 編集
　 ＜＜ prev entry 　 　 ｜ HOME ｜ 　 　 next entry ＞＞ 　　　　
+++ この記事へのコメント +++
　
name
title
color
mail
URL
comment

ご利用のブラウザ、設定ではご利用になれません。
password Vodafone絵文字 i-mode絵文字 Ezweb絵文字
secret? 　※チェックすると管理者へのみの表示となります。
　
すみません
プレビュー見ようとしてenterしたら
「に」だけ書かれてパスも入れてなかったでした
kisato URL 2006/09/29(Fri)22:02:57
EDIT｜RES
Re:すみません
>プレビュー見ようとしてenterしたら
>「に」だけ書かれてパスも入れてなかったでした

・・・ごめんなさい（。。；）
テンプレートを変えたらプレビューがおかしくなってしまって、現在使用できなくなってるんですよ
やっぱり紛らわしいですよねぇ。
近いうちに何とかします！！(＞＜；)
[ 2006/10/01 23:12 ]
無題
に
kisato URL 2006/09/29(Fri)22:00:41
EDIT｜RES
TBありがとうございます☆
私も言及アリのリンクは大歓迎です。
今後ともＦＦ３関連ともどもよろしくおねがいしますね(^-^)
暁 URL 2006/09/12(Tue)09:09:51
EDIT｜RES
Re:TBありがとうございます☆
>私も言及アリのリンクは大歓迎です。
>今後ともＦＦ３関連ともどもよろしくおねがいしますね(^-^)

ありがとうございました。
コチラこそ、今後ともよろしくお願いします♪(ﾟ▽ﾟ*)
[ 2006/09/13 01:00 ]
TBありがとうございます。
はじめまして。
言及のあるトラックバックは大歓迎です。
今後とも、よろしくお願い致します。

忍ブログって試したことないんですけど、コメントや投稿にスマイルアイコンの様なものがあるといいかも・・・。
べんじゃみん 2006/08/31(Thu)00:55:59
EDIT｜RES
Re:TBありがとうございます。
べんじゃみんさん、はじめまして。

>言及のあるトラックバックは大歓迎です。
>今後とも、よろしくお願い致します。
コチラこそ・・・。
ショボさ満載の何でもアリなＢｌｏｇで申し訳ナイくらいなんですが
どうぞ、今後ともよろしくお願いします(・∀・；)

>忍ブログって試したことないんですけど、コメントや投稿にスマイルアイコンの様なものがあるといいかも・・・。
ん～・・・
策がナイというワケではナイんですよね。
実際、カスタマイズされてる方もいらっしゃいますので。
べんじゃみんさんのトコロはたくさんアイコンありましたもんね。
確かにあるといいのかも・・とべんじゃみんさんのトコロで思ったりしたのですが、なかなか手がソコまで回らなくって（。。；）
そんなワケで、ココでは絵文字でガマンしてもらってます(爆)
[ 2006/08/31 01:05 ]
うまく設置できましたね！
Pavさん、こんにちはー♪
コメントプレビュー設置
ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!
相変わらず、コンパクトにまとまっていますね。
手順どおりサクサクできそうです。(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
追伸:トラバありがとーございまっす♪連続投稿もありませんでしたよ。サーバーが重くて(?)お手数かけましたね。m(_ _)m
こちらからも、返しのトラバをいれさせていただきました。
また、&amp;は&amp;amp;と書けばＯＫですよ。その他の青色の字の部分も同様です。
yozo URL 2006/08/29(Tue)12:21:23
EDIT｜RES
Re:うまく設置できましたね！
yozoさん、コンニチワ♪(ﾟ▽ﾟ*)

>コメントプレビュー設置
>ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!

ありがとうゴザイマス(〃゜▽゜)ノ

>相変わらず、コンパクトにまとまっていますね。
>手順どおりサクサクできそうです。(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ

あいかわらずの不親切さ加減です。
考える部分はどっか行っちゃってて・・・（￣ｍ￣*）

>追伸:トラバありがとーございまっす♪連続投稿もありませんでしたよ。サーバーが重くて(?)お手数かけましたね。m(_ _)m

おおぉぉぉ　w(*･o･*)w
そりゃヨカッタです☆

エキサイトと比べてしまうと、ＦＣ２は断然重いですが・・・
ソネブロみたいに、悲しいどころか笑っちゃうくらい重い(というか繋がらない)ＢＬＯＧだって存在しているのですからヘッチャラです(笑)

>また、&amp;は&amp;amp;と書けばＯＫですよ。
>その他の青色の字の部分も同様です。

(ﾉﾟοﾟ)ﾉ ｵｵｵｵｫｫｫｫｫｫ-
そっか、そうすればいいんだ！！
全く気がつかなかった・・・（。。；）
アタマ、カタイですねぇ・・・私・・・(￣∀￣；)

それはそうと、ＴＢありがとうゴザイマシタ☆
[ 2006/08/29 15:56 ]
+++ この記事へのトラックバック +++
この記事にトラックバックする：
Search in BLOG
CATEGORIES
ARCHIVE

RECENT COMMENTS
RECENT TRACKBACKS
MY LINKLIST
ドリコムRSSとブログリストに登録
BlogPeopleのリンクリストへ登録

PRIVATE LINKLST ▼
TRACKBACK PEOPLE ▼
RECENT ENTRIES ▼
Pavloba ? ! ? !


すぐにサボって寝てしまうので、時々構って下さい。
鼻を触ると喜びます？
QR code ▼
RSS ▼
MailForm ▼
COUNTER ▼
＜＜ コメント編集画面での不具合 　 ｜ HOME ｜ 　 共有テンプレートとして公開して後悔かも？（￣▽￣；） ＞＞
　　　　
+++ Powered By 忍者ブログ +++
Copyright © 果報は寝て待て + Template Design BY © Ｐａｖｌｏｂａ
+++ 忍者ブログ + [PR]
+++