ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > カスタマイズをしよう! > title - 続きを読むとコメントを折りたたみにしたい!

続きを読むとコメントを折りたたみにしたい!

続きを読むだけを折りたたみにすると、追記だけが開かれて表示されてコメントは読み込みをしないと見れないのでちょっと不便です。
そこで続きを読むとコメントの両方を折りたたみにして、クリックするだけで読めるようにします。

続きを読むとコメントを折りたたむ方法

【参考記事】 「こそっとゴルフ・パンヤ」様:コメントを折りたたみ表示する
        「ARTIFACT ―人工事実―」様:Movable Type作業メモ   

最初に管理画面のテンプレートの設定からHTMLの編集を開きます。そして上の方にある というタグを探します。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。

このブログでは・・・

<!--nextentry--><link rel="prev" href="<%nextentry_url>" title="<%nextentry_title>" /><!--/nextentry-->
</script>
</head>
<body>

この様になっていました。見つかったらこの</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>



このブログを例にすると、

<!--nextentry--><link rel="prev" href="<%nextentry_url>" title="<%nextentry_title>" /><!--/nextentry-->
</script>
<script language="javascript" type="text/javascript">
<!--
~~~~~~
//-->
</script>

</head>
<body>

この様に張りつけます。

次にそのままHTMLの編集の画面で今度は<!--more_link--><!--/more_link-->で囲われている所を探します。<!--topentry-->の少し下にあると思います。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。

このブログでは・・・

<!--more_link-->
<p class="more"><a href="<%topentry_link>#m<%topentry_no>" title="続きを読む">...続きを読む</a></p>
<!--/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-->
<script language="JavaScript">
<!--

~~~~~~~
topentry_no>');">Close↑</a></p>
</div>

<!--/more_link-->

この様に書き換えます。

またまた、そのままHTMLの編集の画面で今度は<!--allow_comment--><!--allow_comment-->で囲われている所を探します。上で書き換えた<!--/more_link-->の少し下にあると思います。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。

このブログでは・・・

<!--allow_comment--><a href="<%topentry_link>#cm" title="「<%topentry_title>」のコメント">Comment (<%topentry_comment_num>)</a><!--/allow_comment-->

この様になっていました。今度は書き換えるのではなくて<!--/allow_comment-->のすぐ前に下記のタグを挿入します。

<!--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--><a href="<%topentry_link>#cm" title="「<%topentry_title>」のコメント">Comment (<%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-->

この様に挿入します。

HTMlの編集ではこれが最後!もう1つだけ書き加えます。今、挿入した所の少し下に
<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"~~~

この様なrdfと書かれたタグがあると思います。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。ここのすぐ前に下記のタグを書き加えます。

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



このブログを例にすると、

<div class="sidehide" id="cmnt<%topentry_no>"><hr>
<div id="topentry_comment_area<%topentry_no>" style="text-align:left">
~~~~~~~
</div>
</div>

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

この様に挿入します。

これでHTMLの編集は終わりです。次にスタイルシートの編集の方を見ます。一番下までスクロールを動かして、最後に書かれているタグから1行あけて、

.sidehide{display:none;}

と記入します。

これで変種作業は終わりです。最後に更新を忘れずに押して、保存をして下さい。

次に管理画面の環境設定の変更からブログの設定を開きます。
そして一番下まで画面を移動させてアドバンス設定(上級者用)を見ます。

その中の<%topentry_comment_list>を有効にするの所が「無効にする」になっていると思うので「有効にする」に変更して保存します。

これで全ての作業は終了です。自分のブログを確認してみて下さい。

修正と言葉や文字の大きさを変える方法

● 見る▼を押して、コメントを開いた時の文字が大きすぎたり、小さすぎたりした時はプラグインの設定からスタイルシートの編集を開いて一番下までスクロールを動かして、最後に書かれているタグから1行あけて、

.topentry_comment_body{ font-size: 13px; }

と記入して下さい。
(数字を変えれば文字の大きさも変わります)

● コメントを閉じる▲の文字が大きすぎたり、小さすぎたりした時はHTMLの編集で最後に張ったタグの最後の方にある、

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

の部分を探して下さい。
見つかったら、赤字の所を<div style="text-align:right; font-size: 12px;">と書き換えて下さい。(数字を変えれば文字の大きさも変わります)

● Close↑を押した時に、その記事のタイトルが一番上に来るようにならずに、変な場所に戻ってしまう人はテンプレートの設定からHTMLの編集を開きます。そして<%topentry_title>を探します。<!--topentry-->のすぐ下にあると思います。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。

見つかったら<%topentry_title>を囲っているタグにid="entry<%topentry_no>"を書き加えます。
このブログを例にすると、

<h2><a href="<%topentry_link>" title="<%topentry_year><%topentry_month><%topentry_day>-<%topentry_title>" accesskey="T"><%topentry_title></a></h2>

<%topentry_title>が見つかり、囲っているタグが<h2>のタグだとわかりました。
なのでこのタグに先ほど紹介したタグを書き加えます。


<h2 id="entry<%topentry_no>"><a href="<%topentry_link>" title="<%topentry_year><%topentry_month><%topentry_day>-<%topentry_title>" accesskey="T"><%topentry_title></a></h2>

この様になります。

そしてHTMLの編集で2番目に張りつけたタグの、

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

この部分を探します。
見つかったら、赤字の所を#entry<%topentry_no>と書き換えて下さい。


<p><%topentry_more></p>
<p><a href="#entry<%topentry_no>" onClick="showHide('more<%topentry_no>');">Close↑</a></p>

この様に書き換えます。
ここまでできたら更新をおして保存して下さい。これでタイトルの位置に戻ると思います。

できたので「こそっとゴルフ・パンヤ」のTigerうっすさんにお礼を言に行く。

またこの方法でどうしても上手くいかない人は、「アジアンビートカンケリキッズ」さんにもコメントの展開・折りたたみの記事があるのでそちらを見てみて下さい。


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
質問です。
初心者の私でもがんばってできました。ありがとうございます。

しかし、どうしても、追記のなかの文章がスペースいっぱいになってしまいます。
余白が全くなく、本文と段違いで表示されてしまいます。
また、文字色も本文の色と別で、真っ黒になってしまいます。

解決方法がわかるようでしたら、お手数ですがよろしくお願いいたします。
maoさんへ。
こんいちは。
質問の件ですが、ちょっとこの文章だけの説明だと情報が少なすぎてどうしてもわからないです。ブログURLを教えていただけると、ひょっとしたらわかるかも知れません。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
鍵コメさんへ。
鍵コメ返しに伺いますね!
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
本当にありがとうございました!!
いろいろお世話になりました。
おかげさまで、ばっちりです!!
これで毎日更新していこうと思いますので、時間があったら遊びにきてくださいね!
本当に、ありがおうございました。
良かった!
無事にできて何よりです。折りたたみはちょっと難しいですからね。
たまにブログにもお邪魔しますね!
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/175-38909af3   

Template Designed by DW99