入口 > お問合せ - お返事 > 個別記事ページで追記もコメントも折り畳みたい件

個別記事ページで追記もコメントも折り畳みたい件

【旧版専用】
2012年6月中旬までの旧バージョンテンプレ(ver.2~ver.2-3-3)に準拠した記事です。現行バージョンには適用できない場合があります。


◆テトラ様 

こんにちは! 丁寧なご質問をありがとうございます。

>「コメントを折りたたむ」のと「追記を折りたたむ」ことは同時に設置(?)することは可能でしょうか?
ちなみに、私は「複数カテゴリでタイトルを一覧表示させたい件」で日記を一覧表示させてます。 

とのことで、個別記事ページでコメントと追記両方を折りたたむということですね。
「ブログ拍手等のボタンが追記を表示させないと出てきてくれない」という問題が伴うのですが、可能ではあります。以下の作業をお試しください。



1.テンプレHTMLの最初の方、</head>のすぐ上あたりに

<!--permanent_area-->
<script type="text/javascript">
<!--
function pakapaka(paka1, paka2){
pakarare = ('rare' + (paka1));
pakaru = ('ru' + (paka1));
if( document.getElementById ) {
if( document.getElementById(pakarare).style.display ) {
if( paka2 != 0 ) {
document.getElementById(pakarare).style.display = "block";
document.getElementById(pakaru).style.display = "none";
} else { document.getElementById(pakarare).style.display = "none";
document.getElementById(pakaru).style.display = "block"; }
} else { location.href = paka2;
return true; }
} else { location.href = paka2;
return true; }
}
//-->
</script>
<!--/permanent_area-->

と挿入

2.「■作品ページのつもり■」の少し下、

<!--more--><div class="more"><%topentry_more></div><!--/more-->
</div><!--div:topentry_body:end-->

青字部分を

<!--more-->
<div id="ru<%topentry_no>more">
<div class="readmore"><a href="#rare<%topentry_no>more" title="続きを読む" onclick="pakapaka('<%topentry_no>more','<%topentry_link>');return false;"><script type="text/javascript">
<!--
document.write("read more↓");
// -->
</script></a></div>
</div>
<noscript><div class="more"><%topentry_more></div></noscript>
<div class="more" id="rare<%topentry_no>more" style="display: none;">
<%topentry_more>
<div class="readclose">
<a href="" title="続きを閉じる" onclick="pakapaka('<%topentry_no>more',0);return false;">close more↑</a></div>
</div>
<!--/more-->

<!--comment_area-->
<div id="comment_wrapper_sin">
<div id="ru<%topentry_no>com">
<div class="readmore"><a href="#rare<%topentry_no>com" title="コメントを見る" onclick="pakapaka('<%topentry_no>com','<%topentry_link>');return false;"><script type="text/javascript">
<!--
document.write("comment(<%topentry_comment_num>)↓");
// -->
</script></a>
</div>
</div>
<script type="text/javascript">
<!--
document.write("<div id=\"rare<%topentry_no>com\" style=\"display: none;\">");
// -->
</script>
<div class="comment_wrapper">
<!--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 id="cm" class="content">
<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><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-->
<!--/content-->
</div>
<!--div:comment_wrapper:end-->
<div class="readclose"><a href="" title="コメントを閉じる" onclick="pakapaka('<%topentry_no>com',0);return false;">
<script type="text/javascript">
<!--
document.write("close comment↑");
// -->
</script></a></div>
<script type="text/javascript">
<!--
document.write("</div>");
// -->
</script>
<div class="pagetop"><a href="#container" title="<%template_go_top>">▲</a></div>
</div>
<!--/comment_area-->
</div><!--div:comment_wrapper_sin-->

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

上記赤字部分と差し替え

3.していなければ、「コメント欄を設置したい件」の<!--edit_area--> 〜 <!--edit_area-->をコピペする作業もしておく

4.仕上げに、例えば以下のような感じでスタイル指定(テンプレスタイルシート末尾に挿入してください)

.readclose { padding-bottom: 1em; border-bottom: solid 1px #ccc; margin-bottom: 1em; }
#comment_wrapper_sin { margin-top: 0.5em; padding-top: 0.5em; }
.comment_wrapper { width: 100%; margin: 0 auto; border-top: solid 1px #ccc; padding-top: 1em; }
.sub_title { line-height: 200%; }
.sub_footer { padding: 5px 0 30px 0; font-size: 80%; }
.sub_footer li { display:inline; }
#cm .sub_header { margin: 0; padding: 0; font-weight: bold; }
#cm .form { margin: 10px; }
#cm img { margin:0; display: inline; } /* 必須 */
textarea{ border: solid 1px #ccc; background-color: #fff; }
.pagetop a { text-decoration: none; }




以上です。
2の「続きを閉じる」「コメントを見る」「read more↓」等の文言は適宜アレンジしてください。
4のスタイルもお好きにしてくださって大丈夫ですが、「/* 必須 */」の一行だけは入れないと、コメント入力時の装飾ボタンがおかしな配置になりますのでご注意ください。

また上述の通り、このカスタマイズを行うとブログ拍手やツイート、いいね! のボタンは追記を表示させないと出てきません(追記なしの場合は初めから表示されます)。多分何かのタグと連動していると思うんですが、回避方法は見つけられませんでした。すみません。
ただ、「ブログ拍手」ではなく「FC2拍手」なら大丈夫なようです。貼り付け位置は2で出ている「<!--more-->」のすぐ上がおすすめです。その場合、拍手タグを「<div class="fc2_footer"> 〜 </div>」でくくらないとこれまた拍手ボタンがおかしな配置になりますのでご注意ください。

宜しくお願い致します。

'11.09.05 16:42 バックスラッシュ(\)が「¥」にならないようフォント指定を追加
2011-09-05