入口 > お問合せ - お返事 > コメントを折り畳みたい件

コメントを折り畳みたい件

◆Sat. 様 

お返事遅くなりましてすみません。テンプレ使ってくださって、また嬉しいお言葉もありがとうございます! 

このブログの説明のように、個別記事でコメントを折り畳むことはできないでしょうか?
もし可能だとしたら、日記ページのつもりカテゴリを個別にとばさなくてもコメントができるのではないかなと思います 

とのことですが、カテゴリページでも個別記事ページでもコメント+投稿欄を畳みたい、ということでよろしいでしょうか?
であれば作業は下記のような感じになると思います。
個別記事ページでだけ畳めれば良いなら、2と3の工程は不要です。



1.テンプレHTMLの</head>の上に

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

</head>

赤字を挿入

2.目次.ページの下の<!--more--><!--/more-->の後に

<!--more--><!--/more-->
<!--allow_comment-->
<script language="JavaScript">
<!--
document.writeln("<a href=\"javascript:void(0);\" onClick=\"showHide('cmnt<%topentry_no>m');\">Comment (<%topentry_comment_num>)</a>");
//-->
</script><!--/allow_comment-->
<div class="sidehide" id="cmnt<%topentry_no>m"><hr>
<div id="topentry_comment_area<%topentry_no>m" 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-->
<p class="sub_header"><%template_post_comment></p>
<div class="form">
<form action="./" method="post" name="comment_form" id="comment_form">
<dl>
<dt>
<input type="hidden" name="mode" value="regist" />
<input type="hidden" name="comment[no]" value="<%pno>" />
<label for="name"><%template_name></label>
</dt>
<dd><input id="name" type="text" name="comment[name]" size="30" value="<%cookie_name>" /></dd>
<dt><label for="subject"><%template_title></label></dt>
<dd><input id="subject" name="comment[title]" type="text" size="30" value="No title" onblur="if(this.value == '') this.value='No title';" onfocus="if(this.value == 'No title') this.value='';" /></dd>
<dt><label for="mail"><%template_address></label></dt>
<dd><input id="mail" type="text" name="comment[mail]" size="30" value="<%cookie_mail>" /></dd>
<dt><label for="url">URL</label></dt>
<dd><input id="url" type="text" name="comment[url]" size="30" value="<%cookie_url>" /></dd>
<dt><label for="comment"><%template_body></label></dt>
<dd class="cm_form"><script type="text/javascript" src="<%template_comment_js>"></script></dd>
<dd><textarea id="comment" cols="50" rows="5" name="comment[body]"></textarea></dd>
<dt><label for="pass"><%template_password></label></dt>
<dd><input id="pass" type="password" name="comment[pass]" size="20" /></dd>
<dt><%template_private></dt>
<dd><input id="himitu" type="checkbox" name="comment[himitu]" /><label for="himitu"><%template_private_check></label></dd>
</dl>
<p class="form_btn"><input type="submit" value="<%template_send>" /></p>
</form>
</div><!--/form-->
</div>

<div style="text-align:right">
<a href="javascript:void(0);" onClick="showHide('cmnt<%topentry_no>m');">close</a>
</div>
</div>

</div><!--div:topentry_body:end-->

青字を挿入

3.曰記ページのつもりの下の<!--more--><!--/more-->の後に

<!--more--><!--/more-->
<!--allow_comment-->
<script language="JavaScript">
<!--
document.writeln("<a href=\"javascript:void(0);\" onClick=\"showHide('cmnt<%topentry_no>n');\">Comment (<%topentry_comment_num>)</a>");
//-->
</script><!--/allow_comment-->
<div class="sidehide" id="cmnt<%topentry_no>n"><hr>
<div id="topentry_comment_area<%topentry_no>n" 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-->
<p class="sub_header"><%template_post_comment></p>
<div class="form">
<form action="./" method="post" name="comment_form" id="comment_form">
<dl>
<dt>
<input type="hidden" name="mode" value="regist" />
<input type="hidden" name="comment[no]" value="<%pno>" />
<label for="name"><%template_name></label>
</dt>
<dd><input id="name" type="text" name="comment[name]" size="30" value="<%cookie_name>" /></dd>
<dt><label for="subject"><%template_title></label></dt>
<dd><input id="subject" name="comment[title]" type="text" size="30" value="No title" onblur="if(this.value == '') this.value='No title';" onfocus="if(this.value == 'No title') this.value='';" /></dd>
<dt><label for="mail"><%template_address></label></dt>
<dd><input id="mail" type="text" name="comment[mail]" size="30" value="<%cookie_mail>" /></dd>
<dt><label for="url">URL</label></dt>
<dd><input id="url" type="text" name="comment[url]" size="30" value="<%cookie_url>" /></dd>
<dt><label for="comment"><%template_body></label></dt>
<dd class="cm_form"><script type="text/javascript" src="<%template_comment_js>"></script></dd>
<dd><textarea id="comment" cols="50" rows="5" name="comment[body]"></textarea></dd>
<dt><label for="pass"><%template_password></label></dt>
<dd><input id="pass" type="password" name="comment[pass]" size="20" /></dd>
<dt><%template_private></dt>
<dd><input id="himitu" type="checkbox" name="comment[himitu]" /><label for="himitu"><%template_private_check></label></dd>
</dl>
<p class="form_btn"><input type="submit" value="<%template_send>" /></p>
</form>
</div><!--/form-->
</div>

<div style="text-align:right">
<a href="javascript:void(0);" onClick="showHide('cmnt<%topentry_no>n');">close</a>
</div>
</div>

</div><!--div:topentry_body:end-->

黄字を挿入

4.作品ページのつもりの下の<!--more-->から始まる行の後に

<!--more--><div class="more"><%topentry_more></div><!--/more-->
<!--allow_comment-->
<script language="JavaScript">
<!--
document.writeln("<a href=\"javascript:void(0);\" onClick=\"showHide('cm');\">Comment (<%topentry_comment_num>)</a>");
//-->
</script><!--/allow_comment-->

</div><!--div:topentry_body:end-->

赤字を挿入

5.「コメント欄を設置する」カスタマイズで作品ページのつもりの下に付け足しているタグの2行目と11行目を

<!--comment_area-->
<div id="cm" class="comment_wrapper sidehide">
<!--comment-->
<h4 id="comment<%comment_no>" class="sub_title"><%comment_title></h4>
<div class="sub_body"><%comment_body></div>
<ul class="sub_footer">
<li><%comment_year>-<%comment_month>-<%comment_day>(<%comment_hour>:<%comment_minute>) </li>
<li><%comment_mail+name> <%comment_url+str> </li>
<li>[<a href="<%comment_edit_link>" title="<%template_edit_comment>"><%template_edit></a>]</li>
</ul>
<!--/comment-->
<div class="content">
<p class="sub_header"><%template_post_comment></p>

青字と黄字のように書き換える(=「id="cm"」を黄字部分から青字部分に移し、青字部分のclassに「 sidehide」と足す)

6.スタイルシートの一番下に

.sidehide{display:none;}
.cm_form img { display:inline; margin:0;padding:0;}

と追加



以上ですが、いかがでしょうか。
ちなみにこれだとjavascriptを切っている状態ではコメントを見ることができませんのでご注意ください。気になるようなら<noscript> 〜 </noscript>で何らかの対応をされたら良いかと思います。
また、コメントエリアを開く文言や「close」リンクの言葉、スタイル指定などもお好みに応じて変更してください。
宜しくお願い致します。
2011-08-23