*Love*Dachs*天然でぉとぼけな5ゎん ★ダックスファミリーのブログ★ 

スポンサーサイト

   ↑  --/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

(記事編集) http://ange08.blog10.fc2.com/?overture" target="_new

--/--/-- | Comment (-) | HOME | ↑ ページ先頭へ ↑ |

コメントプレビュー機能のカスタマィズ

   ↑  2008/01/26 (土)  カテゴリー: *FC2ブログ カスタマィズ*

コメントプレビューのチェックボックス付きのカスタマイズ方法です。

うっすさんの記事を参考にさせていただきました

前からカスタマイズしたかったので もし、良かったら この記事&うっすさんの記事を参考にしてください。

コメントにオリジナル絵文字を導入したい場合、mixさんのブログで紹介されてます。

 参考にしてください(。◡ .◕) (◕. ◡。)ネェー ღღ

emoji emoji パンヤ絵文字を導入したい場合ゎこちらを参考にしてくださぃ emoji emoji


1.まずコメント本文を入力するtextareaタグをテンプレから探します。
ほとんどのテンプレは<--/comment-->の下あたりに配置されていると思います。

このテンプレの場合は、下記の赤字部分です。

 ・
 ・
 ・
  <td class="cftd"><script type="text/javascript" src="http://blog▼.fc2.com/load.js"></script></td><br>
  </tr>
  <tr>
  <td class="cfth">COMMENT</td><br>
  <td class="cftd"><textarea id="comment" cols="40" rows="5" name="comment[body]"></textarea></td><br/>
<div id="pangya_emojilist">
<!-- コメントにカスタマイズ絵文字入力機能:画像リスト出力 -->
<script src="http://blog-imgs-31.fc2.com/:::/pangya_comennt_list.js" type="text/javascript"></script>
<!-- コメントにカスタマイズ絵文字入力機能:画像リスト出力 ここまで-->
</div>
<br /><input type="checkbox" name="checkboxCommentPreview" value="" onclick="changeCommentPreview()" />コメントをプレビューする?
<label for="comment_preview">comment preview:</label><br />
<div class="c_body" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div><br />
  </tr>
  <tr>
  <td class="cfth">PASS</td>
  <td class="cftd_pass">
  <input id="pass" type="password" name="comment[pass]">
  管理者にだけ表示<input id="himitu" type="checkbox" name="comment[himitu]">
  <input type="submit" value="送信" class="form-btn">
  </td>
  </tr>
  </table>
  </form>


2.このtextareaタグに、以下赤字の様にスクリプトを追加します。

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


3・コメントプレビューを表示したい場所に、下記のHTMLタグを追加します。

<label for="comment_preview">comment preview:</label><br />
<div class="c_body" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div><br />

σ(・_・)は、パスワードを入力するエリアの上に付けてみました。
緑字のクラス属性は、<!--comment-->~<!--/comment-->の中にある<%comment_body>変数を囲っているdivタグで指定されているclass属性を指定します。
このテンプレの場合は、

<!--comment-->

<div class="c_body"><%comment_body></div>

<!--/comment-->

こうなっているので、”c_body”を指定します。
これは、表示の体裁をコメント表示に会わせるための指定なので、
無かったらclass="~”は無くてもいいかもしれません。

4.コメントプレビューするか否かのチェックボックスの追加
チェックボックスを設置したい場所に、以下のスクリプトを追加。
・デフォルトでプレビューを行わない場合

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

・デフォルトでプレビューを行う場合

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



5.最後に以下のスクリプトを<!--/comment_area-->の直前に置く。

<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 (!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>


文字の部分は、2のtextareaタグで指定されているid属性を、
文字の部分は、3で追加したプレビューを表示するタグのid属性を、
文字の部分は、コメントプレビュースクリプトが実行できる場合に、コメントプレビュー欄にデフォルト表示する文字 または、画像タグ。

σ(・_・)は、このスクリプトは外部ファイルにしました。

で、出来上がったHTMLがこちら。赤字部分が追加したところです。




  <!--/comment-->

<!-- コメントにカスタマイズ絵文字入力機能:画像変換 -->
<script src="http://blog-imgs-31.fc2.com/:::/pangya_emoji_.js" type="text/javascript"></script>
<!-- コメントにカスタマイズ絵文字入力機能:画像変換 ここまで-->

  <div class="commentform">
  <div class="cb_title">COMMENT FORM</div>
  <form method="post" action="./" name="comment_form">
  <input type="hidden" name="mode" value="regist">
  <input type="hidden" name="comment[no]" value="<%pno>">
  <table class="cftable">
  <tr>
  <td class="cfth">NAME</td>
  <td class="cftd"><input id="name" type="text" name="comment[name]" value="<%cookie_name>"></td>
  </tr>
  <tr>
  <td class="cfth">TITLE</td>
  <td class="cftd"><input id="subject" type="text" name="comment[title]"></td>
  </tr>
  <tr>
  <td class="cfth">MAIL</td>
  <td class="cftd"><input id="mail" type="text" name="comment[mail]" value="<%cookie_mail>"></td>
  </tr>
  <tr>
  <td class="cfth">URL</td>
  <td class="cftd"><input id="url" type="text" name="comment[url]" value="<%cookie_url>"></td>
  </tr><tr>
  <td class="cfth"></td>
  <td class="cftd"><script type="text/javascript" src="http://blog▼.fc2.com/load.js"></script></td><br>
  </tr>
  <tr>
  <td class="cfth">COMMENT</td><br>
  <td class="cftd"><textarea id="comment" cols="40" rows="5" name="comment[body]" onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea></td><br/>
<div id="pangya_emojilist">
<!-- コメントにカスタマイズ絵文字入力機能:画像リスト出力 -->
<script src="http://blog-imgs-31.fc2.com/:::/pangya_comennt_list.js" type="text/javascript"></script>
<!-- コメントにカスタマイズ絵文字入力機能:画像リスト出力 ここまで-->
</div>

<br /><input type="checkbox" name="checkboxCommentPreview" value="" onclick="changeCommentPreview()" />コメントをプレビューする?
<label for="comment_preview">comment preview:</label><br />
<div class="c_body" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div><br />

  </tr>
  <tr>
  <td class="cfth">PASS</td>
  <td class="cftd_pass">
  <input id="pass" type="password" name="comment[pass]">
  管理者にだけ表示<input id="himitu" type="checkbox" name="comment[himitu]">
  <input type="submit" value="送信" class="form-btn">
  </td>
  </tr>
  </table>
  </form>
<!-- コメントプレビュー ここから -->
<script type="text/javascript" src="
http://blog-imgs-31.fc2.com/:::/preview.js
"></script>
<!-- コメントプレビュー ここまで -->

  

※σ(・ε・`●私)の場合、パンヤ絵文字と他の絵文字を使っているので 下記のスクリプトを <!--/comment_area-->の直前に書きます。これがないとコメント欄で絵文字が表示されませんでした。


<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能:画像変換
function changeCustmizeEmojiTag() {
// (1)コメント全体のタグの id 属性
var commentAreaIdName = '';
// (2)コメント全体のタグ名
var commentAreaTag = 'div';
// (3)各コメントの class 属性
var commentBodyClassName = 'c_body';

// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
var objComArea;
var classComArea;
var objComBody = new Array();
if (commentAreaIdName != '') {
objComArea = document.getElementById(commentAreaIdName);
if (!objComArea || !objComArea.innerHTML) return;
classComArea = objComArea.getElementsByTagName(commentAreaTag);
} else {
classComArea = document.getElementsByTagName('*');
}
for (var i = 0; i < classComArea.length; i++) {
if (classComArea[i].className == commentBodyClassName) objComBody[objComBody.length] = classComArea[i];
}
for (var i = 0; i < objComBody.length; i++) {
objComBody[i].innerHTML = getStringCustmizeEmojiTag(list, objComBody[i].innerHTML, att);
}
}

function getStringCustmizeEmojiTag(list, s, att) {
for (var i = 0; i < list.length; i++) {
s = s.split('[' + list[i][0] + ']').join('<img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" />');
}
return s;
}
changeCustmizeEmojiTag();
// -->
</script>
 <!--/comment_area-->

FC2スレッドテーマ : *memo*φ(・ω・*(・ω・*)φメモメモ♪ (ジャンル : ブログ

(記事編集) http://ange08.blog10.fc2.com/blog-entry-76.html

2008/01/26 | Comment (-) | HOME | ↑ ページ先頭へ ↑ |
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。