2012.04 «  - - 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 31 - - » 2012.06
TOP > コメントを折りたたみ表示する
 ← 第59回パニャふぁん杯参加 | TOP | 5枚目のシール ゲット

スポンサーサイト 

--年--月--日 (--)
上記の広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。
[--.--.--(--) --:--] スポンサー広告 | Trackback(-) | Comment(-)
↑TOPへ


COMMENT

コメントを閉じる▲

コメントを折りたたみ表示する 

2006年03月10日 ()
昨年末に「続きを読むを折りたたみ表示する」記事をアップしましたが、
投稿されたコメントもパーマリンクに飛ばずに、
トップページで読めるようにカスタマイズしてみました。

【参考記事】
・ARTIFACT ―人工事実― : Movable Type作業メモ

①</head>タグの上に以下のJavaScriptを記述。

<script language="javascript" type="text/javascript">
<!--
function showHide(id){
var disp = document.getElementById(id).style.display;
if(disp == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
return false;
}
//-->
</script>


②コメントを見るためのスイッチを付ける
記事本文最後のトラックバック数やコメント数を表示させるところにコメントを見るためのスイッチを付けます。
<!--allow_comment-->~<!--allow_comment-->の間にコメント数を表示させる(コメント投稿する際のリンク)記述があるので、
そこに以下のJavaScriptを記述。

<!--allow_comment--><a href="<%topentry_link>#com" title="コメント">Comments(<%topentry_comment_num>)</a><!--/allow_comment-->
  ↓
<!--allow_comment--><a href="<%topentry_link>#com" title="コメント">Comments(<%topentry_comment_num>)</a>
<!--not_permanent_area-->
<script language="JavaScript">
<!--
document.writeln("<a href=¥"javascript:void(0);¥" onClick=¥"showHide('cmnt<%topentry_no>');¥"> 見る▼</a>");
//-->
</script>
<!--/not_permanent_area-->

<!--/allow_comment-->


③コメントを表示させる記述を追加
rdfを定義している部分の上に、以下を追加。

<div class="sidehide" id="cmnt<%topentry_no>"><hr>
<div id="topentry_comment_area<%topentry_no>" style="text-align:left">
<!--comment_list-->
<div class="topentry_comment_body">
<div><strong><%topentry_comment_list_title></strong> by<%topentry_comment_list_name></div>
<div><%topentry_comment_list_brbody></div>
<hr />
</div>
<!--/comment_list-->
</div>

<div style="text-align:right">
<a href="javascript:void(0);" onClick="showHide('cmnt<%topentry_no>');">コメントを閉じる▲</a>
</div>
</div>

<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"~


④スタイルシートに以下を追記。

.sidehide{display:none;}



⑤<%topentry_comment_list>を有効にする。
管理者ページ>環境設定の変更>ブログの設定ページを開き、
一番下「アドバンス設定(上級者用)」の「<%topentry_comment_list>を有効にする」を、
”無効にする”から”有効にする”に変更します。

以上で、「見る▼」をクリックすると、投稿されたコメントが表示されます。

さらにカスタマイズ その1
コメントにパンヤ絵文字を表示できるようにしている場合、
このままでは絵文字が表示されません。
パンヤ絵文字を使用できるようにした時に挿入したJavaScriptを少々細工して、
本文の③で説明した部分の中にさらに追記します。

<div class="sidehide" id="cmnt<%topentry_no>"><hr>
<div id="topentry_comment_area<%topentry_no>" style="text-align:left">
<!--comment_list-->
<div class="topentry_comment_body">
<div><strong><%topentry_comment_list_title></strong> by<%topentry_comment_list_name></div>
<div><%topentry_comment_list_brbody></div>
<hr />
</div>
<!--/comment_list-->
</div>

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

<div style="text-align:right">
<a href="javascript:void(0);" onClick="showHide('cmnt<%topentry_no>');">コメントを閉じる▲</a>
</div>
</div>

<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"


コメント全体を囲むタグはID属性を使用しているため、各記事毎にユニークになるように、記事番号を付加するようにしています(紫文字の部分)。
これで、パンヤ絵文字が表示されます。

さらにカスタマイズ、その②
昨年末の記事「続きを読むを折りたたみ表示する」で記述した方法をやめて、
今回追加したJavaScriptを使用して実現する方法に変えてみました。
スタイルシートを利用して表示の有無を実現している分、多少軽くなるかと思います(どうでしょ?w)。
<!--more_link-->~<!--/more_link-->で囲まれた部分を以下のように修正する。

<!--more_link--><div class="entry_text"><a href="<%topentry_link>#more">続きを読む</a></div><!--/more_link-->
  ↓
<!--more_link-->
<script language="JavaScript">
<!--
document.writeln("<a href=\"javascript:void(0);\" onClick=\"showHide('more<%topentry_no>');\">Open↓</a>");
//-->
</script>
<noscript>
<a href="<%topentry_link>#more">続きを読む</a>
</noscript>

<div class="sidehide" id="more<%topentry_no>">
<hr />
<p><%topentry_more></p>
<p><a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Close↑</a></p>
</div>

<!--/more_link-->

<!--more-->
<a name="more" id="more"><%topentry_more></a>
<!--/more-->
</div>


続きを読むを折りたたみ表示する」でheadタグ内に記述したJavaScriptは削除してかまいません。

トップページで、コメント投稿もさせたい?
それは、まだ不具合があるので、この次に( ̄∀ ̄*)

※この記事が参考になったら、トラックバックお願いいたします。
[2006.03.10(Fri) 23:05] [BLOGいじり]カスタマイズTrackback(4) | Comments(14)
↑TOPへ


COMMENT

初めまして by かんな
訪問履歴から、こちらへ伺いました。
共有テンプレを公開しているお題小町の管理人、かんなです。
とても素敵に、見やすくカスタマイズされていらっしゃいますね。
ツリー化や続きを読むの折りたたみなど、あたしが苦手で避けて
しまっているカスタマイズなどお得意なようで羨ましいです^^;

テンプレをご利用頂き、大変嬉しく思っておりますが1つだけ
お願いがあります。スクロールした際、最後に右下に表示される
「 Item+Template by odaikomachi 」 の表記ですが
以前とは画像が変わっておりますので、Itemの部分を変更して
頂けませんでしょうか。 若しくは、配布時のテンプレ時よりも
かなり素敵にカスタマイズされていますので、著作権表記を
全部削除して頂けますか?
どちらでも構いません。 よろしくお願いいたします。

>かんなさん by Tigerうっす
はじめまして。
テンプレートを利用させて頂き、ありがとうございます^^
なかなか気に入ったテンプレートが見つからなかったのですが、
シンプルでクールなかんなさんのテンプレを見つけ、即気に入りました。
いじりすぎて、ごちゃごちゃになってしまった感があるのですが・・・w

著作権表示の件、了解いたしました。
お題小町さんの本テンプレの記事を拝見したところ、
画像差し替えの場合は、著作権表示の変更が必要だったのですね。
失礼いたしました。
Itemの部分を削除させていただきました。
テンプレの原型およびメニューの折りたたみScriptは利用させていただいていますので、
テンプレの著作権表示は残してあります。

これからも素敵なテンプレ、素材の作成でのご活躍をお祈りしています。

はじめまして~ by ai
Tigerうっすさん初めまして!FC2のカスタマイズ見させてもらい、使わせてもらいました!これでブログが見やすくなったと思います~。ありがとうございましたwヾ(o・ω・o)ノ≡☆

>aiさん by Tigerうっす
aiさん、はじめまして~。
カスタマイズなさったのですね。
お役に立てて、よかったです^^
いじり始めると、欲がでてきますよねぇw
カスタマイズ好きなので、これからも色々いじっていこうと思います。
また、見に来てね^^

はじめまして。 by るな
一度は、やってみたいと思っていた
折りたたみ表示が、一回で失敗せずにカスタマイズ出来てうれしいです。

スタイルシートのいじり方が悪いのか・・・
コメント部分の、フォントが大きくなるのですが
また、修正したいと思います。

この度は、ありがとうございました。
また、カスタマイズの勉強させて頂きたいと思います。

あと、初めてトラックバック使ったのですが、
これで、良かったのでしょうか・・・
それでは、今後とも宜しくお願いいたします。

>るなさん by Tigerうっす
はじめまして~。
カスタマイズのお役に立ててよかったです^^
トップページのコメント表示は、topentry_comment_bodyクラス属性で指定すればOKですよ。
トラックバックもありがとう~。
これでOKです[ぺこあにめ]

ありがとうございます♪ by るな
アドバイスありがとうございます♪
無事、希望どうりの表示なりました♪
ますます感動です。(笑)

本当に、いろいろありがとうございました。
これからも、お邪魔させて頂きます♪

それと、LINKもさせて頂けたらと思っています。
何か、支障があるようでしたらおっしゃってください。
それでは、また[おみごとあにめ]。

>るなさん by Tigerうっす
カスタマイズも無事終了したようですね^^
自分の思ったようなカスタマイズができると、
嬉しいですよね^^
難しい問題が解けたときの様な気分?w
リンクの件、もちろんOKです。
私からもリンクさせて頂きますね~。
今後ともよろしくです[ぺこあにめ]

はじめまして by choco
はじめまして。chocoと申します。
折りたたみ表示にするスクリプト、参考にさせていただきました。
ありがとうございます。
また困った事があったら参考にさせていただきたいと思います。
今後ともよろしくお願いいたします。

by ぴよこ隊隊長
こんにちは(ぺこ)
コメントの折りたたみに付いて参考にさせて頂きました。(わら)
紆余曲折はありましたが(実は参考にしながら一度挫折してる(あせ))、なんとか導入することが出来ました。[わーんあにめ]
ありがとうございました(ぺこ)

>ぴよこ隊隊長さん by Tigerうっす
カスタマイズは自分通りに動くと嬉しいですけど、
はまると何がなんだかわからなくなりますよね^^;
でも、お役に立ててよかったです^^

ありがとうございました by ぱぴ
お友達から聞いてきました。
コメントの折りたたみ、できました!
ありがとうございます[わらあにめ]

はじめまして by 雪月華ひな
さらにカスタマイズ②のほうを使わせて頂きました。
ありがとうございます^^

お尋ねします by ちよ
作りたてのブログを少々いじっております。
今回fc2で「tw_3col_1_plg」テンプレートを使用させていただいております。
追記の開閉の部分でお尋ねします。
オープンして追記を読んだ後 クローズを押した時、オープンの所に戻す方法はありますでしょうか。

続きを読むを折りたたみ表示する に記載されている12/28追記の部分がそうなのかとチャレンジしてみましたが、どうしても出来ません[かなし]
詳しくはブログの方にも載せてありますので、アドバイスいただけませんでしょうか。
宜しくお願いします。[ぺこ]

コメントを閉じる▲

 ← 第59回パニャふぁん杯参加 | TOP | 5枚目のシール ゲット

COMMENT

訪問履歴から、こちらへ伺いました。
共有テンプレを公開しているお題小町の管理人、かんなです。
とても素敵に、見やすくカスタマイズされていらっしゃいますね。
ツリー化や続きを読むの折りたたみなど、あたしが苦手で避けて
しまっているカスタマイズなどお得意なようで羨ましいです^^;

テンプレをご利用頂き、大変嬉しく思っておりますが1つだけ
お願いがあります。スクロールした際、最後に右下に表示される
「 Item+Template by odaikomachi 」 の表記ですが
以前とは画像が変わっておりますので、Itemの部分を変更して
頂けませんでしょうか。 若しくは、配布時のテンプレ時よりも
かなり素敵にカスタマイズされていますので、著作権表記を
全部削除して頂けますか?
どちらでも構いません。 よろしくお願いいたします。
[ 2006.03.11(Sat) 14:17] URL | かんな #MKt5QxqE | EDIT |

はじめまして。
テンプレートを利用させて頂き、ありがとうございます^^
なかなか気に入ったテンプレートが見つからなかったのですが、
シンプルでクールなかんなさんのテンプレを見つけ、即気に入りました。
いじりすぎて、ごちゃごちゃになってしまった感があるのですが・・・w

著作権表示の件、了解いたしました。
お題小町さんの本テンプレの記事を拝見したところ、
画像差し替えの場合は、著作権表示の変更が必要だったのですね。
失礼いたしました。
Itemの部分を削除させていただきました。
テンプレの原型およびメニューの折りたたみScriptは利用させていただいていますので、
テンプレの著作権表示は残してあります。

これからも素敵なテンプレ、素材の作成でのご活躍をお祈りしています。
[ 2006.03.11(Sat) 16:38] URL | Tigerうっす #V.QdXw8. | EDIT |

Tigerうっすさん初めまして!FC2のカスタマイズ見させてもらい、使わせてもらいました!これでブログが見やすくなったと思います~。ありがとうございましたwヾ(o・ω・o)ノ≡☆
[ 2006.04.16(Sun) 22:22] URL | ai #T0ca3UNU | EDIT |

aiさん、はじめまして~。
カスタマイズなさったのですね。
お役に立てて、よかったです^^
いじり始めると、欲がでてきますよねぇw
カスタマイズ好きなので、これからも色々いじっていこうと思います。
また、見に来てね^^
[ 2006.04.16(Sun) 23:55] URL | Tigerうっす #V.QdXw8. | EDIT |

一度は、やってみたいと思っていた
折りたたみ表示が、一回で失敗せずにカスタマイズ出来てうれしいです。

スタイルシートのいじり方が悪いのか・・・
コメント部分の、フォントが大きくなるのですが
また、修正したいと思います。

この度は、ありがとうございました。
また、カスタマイズの勉強させて頂きたいと思います。

あと、初めてトラックバック使ったのですが、
これで、良かったのでしょうか・・・
それでは、今後とも宜しくお願いいたします。
[ 2006.04.26(Wed) 04:16] URL | るな #mQop/nM. | EDIT |

はじめまして~。
カスタマイズのお役に立ててよかったです^^
トップページのコメント表示は、topentry_comment_bodyクラス属性で指定すればOKですよ。
トラックバックもありがとう~。
これでOKです[ぺこあにめ]
[ 2006.04.26(Wed) 10:11] URL | Tigerうっす #V.QdXw8. | EDIT |

アドバイスありがとうございます♪
無事、希望どうりの表示なりました♪
ますます感動です。(笑)

本当に、いろいろありがとうございました。
これからも、お邪魔させて頂きます♪

それと、LINKもさせて頂けたらと思っています。
何か、支障があるようでしたらおっしゃってください。
それでは、また[おみごとあにめ]。
[ 2006.04.26(Wed) 11:17] URL | るな #mQop/nM. | EDIT |

カスタマイズも無事終了したようですね^^
自分の思ったようなカスタマイズができると、
嬉しいですよね^^
難しい問題が解けたときの様な気分?w
リンクの件、もちろんOKです。
私からもリンクさせて頂きますね~。
今後ともよろしくです[ぺこあにめ]
[ 2006.04.27(Thu) 03:41] URL | Tigerうっす #V.QdXw8. | EDIT |

はじめまして。chocoと申します。
折りたたみ表示にするスクリプト、参考にさせていただきました。
ありがとうございます。
また困った事があったら参考にさせていただきたいと思います。
今後ともよろしくお願いいたします。
[ 2006.05.18(Thu) 14:36] URL | choco #2ykNyDH. | EDIT |

こんにちは(ぺこ)
コメントの折りたたみに付いて参考にさせて頂きました。(わら)
紆余曲折はありましたが(実は参考にしながら一度挫折してる(あせ))、なんとか導入することが出来ました。[わーんあにめ]
ありがとうございました(ぺこ)
[ 2006.10.24(Tue) 10:40] URL | ぴよこ隊隊長 #- | EDIT |

カスタマイズは自分通りに動くと嬉しいですけど、
はまると何がなんだかわからなくなりますよね^^;
でも、お役に立ててよかったです^^
[ 2006.10.26(Thu) 13:38] URL | Tigerうっす #V.QdXw8. | EDIT |

お友達から聞いてきました。
コメントの折りたたみ、できました!
ありがとうございます[わらあにめ]
[ 2006.12.14(Thu) 10:57] URL | ぱぴ #- | EDIT |

さらにカスタマイズ②のほうを使わせて頂きました。
ありがとうございます^^
[ 2007.08.27(Mon) 18:43] URL | 雪月華ひな #Sp/1FH2Y | EDIT |

作りたてのブログを少々いじっております。
今回fc2で「tw_3col_1_plg」テンプレートを使用させていただいております。
追記の開閉の部分でお尋ねします。
オープンして追記を読んだ後 クローズを押した時、オープンの所に戻す方法はありますでしょうか。

続きを読むを折りたたみ表示する に記載されている12/28追記の部分がそうなのかとチャレンジしてみましたが、どうしても出来ません[かなし]
詳しくはブログの方にも載せてありますので、アドバイスいただけませんでしょうか。
宜しくお願いします。[ぺこ]
[ 2008.02.06(Wed) 18:06] URL | ちよ #SFo5/nok | EDIT |

COMMENT POST












パンヤ絵文字入力の際、全角括弧”(にこ)など”で入力してもOKです。
また、括弧内の文字の前に@(全角)を付けると、絵文字が左右反転するよ~(IE限定)




管理者にだけ表示

Trackback


このブログにjavaを埋め込み、少々カスタマイズしてみました。 【1】「続きを読む」の折りたたみ 【2】コメントの自分の発言に背景色をつける 【3】(main)新着記事にnewの文字を入
[ 2006.04.16(Sun) 22:13 ] AI MEMO

コメント&続きを読むという部分のカスタマイズをしました。続きを読むのテストの為に、続きを読むというのを、使って書いてみます♪ページを読み込まないので、表示は早くな
[ 2006.04.26(Wed) 04:09 ] -mixi-DIARY

ちょっと前に、トップページからでもコメントが読めるようにカスタマイズしました。固定リンクに飛ばなくても、その場でコメントを読むことが出来るので便利★参考:こそっとゴルフ・パンヤ-コメントを折りたたみ表
[ 2007.08.24(Fri) 01:39 ] 気まぐれアメリカ育児日記

昨年末に「続きを読むを折りたたみ表示する」記事をアップしましたが、投稿されたコメントもパーマリンクに飛ばずに、トップページで読める...
[ 2008.05.04(Sun) 23:14 ] memo
 ← 第59回パニャふぁん杯参加 | TOP | 5枚目のシール ゲット
アクセスランキング アクセス解析 レンタルCGI