fc2ブログ

コメントの展開・折りたたみ

[custom] コメントの展開・折りたたみ

個別記事に移動せずに“トップページで”コメントリストを展開して読めるようにするカスタマイズです。動作をするように変更するだけの説明なので、見た目のカスタマイズについてはご自分で調べるか質問をしてください。 また、使用するテンプレートによってはHTMLの変更に違いがあるかも知れません。どうしてもわからなければ質問してください。

まず行うべきこととして、コメントリストを有効にすることが挙げられます。管理画面で、環境設定の変更→ブログの設定と進み、そのページの最下部「<%topentry_comment_list>を有効にする」の項目を「有効にする」に変更しておいてください。

ここでは記事ステータス(記事下の日付・コメント・トラバ等)を<ol>によってリスト化しているテンプレートを前提に説明します。他のテンプレートで使いたい場合は<li>を<div>や<p>にして考える必要があるかも知れません。

スクリプトの設置

以下をHTMLの<head>と</head>の間に挿入します。

HTMLとスタイルシートの変更

以下を</ol>の上に挿入しますが、記事ステータスは大抵の場合ひとつひとつの項目が | で仕切られています(前後に半角スペースがない場合も)。そのため、コメントの開閉ボタンを設置するために前の項目に仕切りを入れなければなりません。</ol>の直前の</li>の前に | を入れてください。
開閉ボタンであるComment-openComment-closeの文字は好きに変更してください。

そしてスタイルシートに以下を書き加えます。paddingの指定はご自分にあったサイズに調整し、必要があれば他の指定も書き加えてください。

.com_open {
display: block;
padding: 0 5px;
}

※ このコメントの折りたたみは追記の折りたたみと共に使うことができます。
※ 開閉を行うと閉じるボタン(Comment-close)がズレる場合がありますがそういう仕様です。
※ もちろん私にもわからないことがあるので、なんでもかんでも質問に答えられるわけではないので悪しからず。

<ol>や<ul>がない!

記事ステータスがリスト化されていない場合は、そのままリンクを並べただけのHTMLになっていることが多いはずです。そのコメントやTRACKBACKなどの文字列が並ぶ一群に以下を挿入します。

その下方にある</div>や</table>の下に以下を挿入します。

こちらは挿入する位置によって動作や表示に支障をきたす場合があるので、何度か移動させてみるといいと思います。

おまけ - スタイルの変更

私が公開している共有テンプレート「climber」にコメント折りたたみを導入したときにはそのままだと崩れてしまうので、スタイルを整える方法を記します。動作確認(そのうち消します)

スタイルシートから/* ---------- 記事ステータス ---------- */を探しだしてheight: 30px;を消し、padding: 0;をpadding: 0 0 10px 0;に変更します。そしてbackgroundの指定のno-repeatの後ろに bottomと入れます(半角スペース含む)。

そして上記で書き加えたスタイルシートを以下のように変更します。

.com_open {
display: block;
padding: 5px 20px;
text-align: left;
}

スポンサーサイト



コメント

-

承認待ちコメント
このコメントは管理者の承認待ちです

-

承認待ちコメント
このコメントは管理者の承認待ちです

こはく

難しいので勉強して出直してきます!!

bisco

一応「<ol>や<ul>がない!」という場合の文も書いてありますのでご参照を。
回答はまだ少しお待たせしてしまうかと思われます。すみません。

ゆきこん

はじめまして。まだまだ初心者なのですが、どうしてもコメントの折り込みがしたくて、いろいろ検索して、やっとここにたどり着きました。
<ol>や<ul>の間に入れるという部分がどうしてもわからなくて・・・

本当に申し訳ないのですが、見ていただけますでしょうか・・・?
fc2のcuteblog03を使っています。

このようになっているのですが・・
お忙しいところ、本当に申し訳ありません。

<!-- ▽記事部分▽-->
<!--topentry-->

<div class="entryBodybox">
<div class="entry_title"><a id="<%topentry_no>" name="<%topentry_no>"></a><a href="<%topentry_link>"><%topentry_title></a></div>
<div class="entry_body">

<%topentry_body>
<br clear="all"><BR><!--more_link--><a href="<%topentry_link>#more">“<%topentry_title>”の続き & 感想を読む>></a> <!--/more_link-->
<!--more--><hr size="1"><a name="more" id="more"></a><%topentry_more><!--/more-->
</div>
<div class="entry_state">
<a href="<%topentry_category_link>"><%topentry_category></a>
|
【<%topentry_year>-<%topentry_month>-<%topentry_day>(<%topentry_youbi>) <%topentry_hour>:<%topentry_minute>:<%topentry_second>】
|
<!--allow_tb--><a href="<%topentry_link>#trackback">Trackback:(<%topentry_tb_num>)</a><!--/allow_tb-->
<!--deny_tb--> Trackback(-)<!--/deny_tb-->
|
<!--allow_comment--> <a href="<%topentry_link>#comment">Comments:(<%topentry_comment_num>)</a> <!--/allow_comment-->
<!--deny_comment-->Comments(-)<!--/deny_comment-->
</div>
</div>


K

何度も申し訳ありません。ご回答ありがとうございました。再度「<!--/more-->の後ろから」入れてみたのですが、画面は白くなりませんでしたが、ツリーにはなりませんでした。
何度も申し訳ないので諦めます。ありがとうございました。

bisco

「<!--/more-->の後ろから」です。
<!--/more-->は消さないで下さい。

それからスタイルシートの変更は本文にある通りですので、このテンプレートでは必要ありません。

K

biscoさん、丁寧な解説ありがとうございました。 言われた通りにやってみたのですが、プレビューで見ると真っ白になってしまいます。
一応 <!-- ▼ メイン&記事 ▼ --> の部分を貼り付けますので、できればご確認いただけないでしょうか。
スタイルシートには最下部に
.com_open {
display: block;
padding: 0 5px;
}
を貼り付けました。どこが問題なのでしょうか。お忙しいところ申し訳ございませんが、宜しくお願いします。


<!-- ▼ メイン&記事 ▼ -->
<div id="main"><!--topentry--><div class="btop"></div><div class="bmiddle"><h2><img src="http://blog6.fc2.com/o/opusi/file/02_ar.gif" width="14" height="14" alt="" /> <a id="a<%topentry_no>" name="a<%topentry_no>"><%topentry_title></a></h2><div class="msg"><%topentry_body></div><!--more_link--><p class="more"><a href="<%topentry_link>#more"><img src="http://blog6.fc2.com/o/opusi/file/02_h2.gif" width="19" height="14" alt="" />More ...</a></p><!--/more_link--><!--more--><p class="bottom"><%topentry_year>.<%topentry_month>.<%topentry_day> <%topentry_hour>:<%topentry_minute> | <a href="<%topentry_category_link>"><%topentry_category></a> |
<!--allow_tb--><a href="<%topentry_link>#trackback" title="「<%topentry_title>」へのトラックバック">トラックバック(<%topentry_tb_num>)</a><!--/allow_tb--><!--deny_tb-->トラックバック(-)<!--/deny_tb--> | <!--allow_comment--><a href="<%topentry_link>#comment_head" title="「<%topentry_title>」へのコメント">コメント(<%topentry_comment_num>)</a><!--/allow_comment--><!--deny_comment-->コメント(-)<!--/deny_comment--> | <!--not_permanent_area-->
<span id="varP2<%topentry_no>"><a href="<%topentry_link>#comment" onclick="showMoreComments(<%topentry_no>,'<%topentry_link>#<%topentry_no>');return false;" name="CL<%topentry_no>">コメントを開く</a></span>
<!--/not_permanent_area--><!--not_permanent_area-->
<div id="varXYZ2<%topentry_no>" style="display: none" class="bmiddle"><div class="msg">
<p><a href="#CL<%topentry_no>" onclick="showMoreComments(<%topentry_no>,0);return true;" title="コメントを閉じる">コメントを閉じる</a></p>
<!--comment_list-->
<p class="com_open"><strong><%topentry_comment_list_name></strong><br>『<%topentry_comment_list_brbody>』</p>
<!--/comment_list-->
</div></div>
<!--/not_permanent_area--></p>
<div class="last"></div></div>

<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="<%topentry_link>"
trackback:ping="<%url>tb.php/<%topentry_no>"
dc:title="<%topentry_title>"
dc:identifier="<%topentry_link>"
dc:subject="<%topentry_category>"
dc:description="<%topentry_discription>"
dc:creator="<%author_name>"
dc:date="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00" />
</rdf:RDF>
-->

<!--/topentry-->

bisco

どこの</ul>の前に入れたのかがわかりかねますが、恐らく
記事ステータス(記事下の日付・コメント・トラバ等)
については理解いただけているのだと思いますが、それがどこにあるのか誤解されているようです。
このテンプレートでは記事ステータスは<ul>でも<ol>でもなく、<p>によって囲まれているので
<ol>や<ul>がない!
を参考にしていただきたかったのです。
ですが、このカスタマイズは難しいと思われるので、改変例を下に記しておきます。

HTMLの
<!-- ▼ メイン&記事 ▼ -->
の下にある<!--/more-->の後ろから<div class="last"></div>の前までを


<p class="bottom"><%topentry_year>.<%topentry_month>.<%topentry_day> <%topentry_hour>:<%topentry_minute> | <a href="<%topentry_category_link>"><%topentry_category></a> |
<!--allow_tb--><a href="<%topentry_link>#trackback" title="「<%topentry_title>」へのトラックバック">トラックバック(<%topentry_tb_num>)</a><!--/allow_tb--><!--deny_tb-->トラックバック(-)<!--/deny_tb--> | <!--allow_comment--><a href="<%topentry_link>#comment_head" title="「<%topentry_title>」へのコメント">コメント(<%topentry_comment_num>)</a><!--/allow_comment--><!--deny_comment-->コメント(-)<!--/deny_comment--> | <!--not_permanent_area-->
<span id="varP2<%topentry_no>"><a href="<%topentry_link>#comment" onclick="showMoreComments(<%topentry_no>,'<%topentry_link>#<%topentry_no>');return false;" name="CL<%topentry_no>">コメントを開く</a></span>
<!--/not_permanent_area--><!--not_permanent_area-->
<div id="varXYZ2<%topentry_no>" style="display: none" class="bmiddle"><div class="msg">
<p><a href="#CL<%topentry_no>" onclick="showMoreComments(<%topentry_no>,0);return true;" title="コメントを閉じる">コメントを閉じる</a></p>
<!--comment_list-->
<p class="com_open"><strong><%topentry_comment_list_name></strong><br>『<%topentry_comment_list_brbody>』</p>
<!--/comment_list-->
</div></div>
<!--/not_permanent_area--></p>


に変更してください。
ちなみに最近のコメントとは全く関係ありません。
また<head>についてですが、初めのうちはどこに入れたのかがわかるように、</head>の上に入れることをお奨めします。それ以外の問題についてはまだ気にするほどではないかと思われます。

K

はじめまして。
きのうから頑張ってるのですが、うまくいきません。
[bud]というテンプレート使用しているのですが、</ol>がないので</ul>の前に入れているのですが、全く変化がありません。
プラグイン対応なので、最近のコメントのところに入れてもみたのですが、全くツリーになりません。どこにいれたらよいのでしょうか。
それと、<head>と</head>の間に挿入する時は
どちらの直後、直前に入れた方がよいとか、違いがありますか?
まだ初心者なので、やっぱり難しいでしょうか?

bisco

お力になれずすみません。
またどうぞ。

toko

初心者の私には今回は難しそうなので、また次回挑戦したいと思います。丁寧に回答いただきありがとうございました。また、よろしくお願いいたします。

bisco

>tokoさん
もりもママ。さんのコメントの通りかと思われます(記事の冒頭部にも書き加えておきました)。

>もりもママ。さん
手助けありがとうございました。
さて、コメント寄稿者のURLリンクは、該当する変数がないので難しそうです。
(http://blog.fc2.com/template.html)
コメントのタイトルにURLを入れてもらって、
<a href="<%topentry_comment_list_title>"><%topentry_comment_list_name></a>
とする方法でならできなくもありませんが、今まで寄せられたコメントのことを考えると・・・

コメント編集についても、現状ではコメントの番号を得ることができないので、編集エリアへのリンクが作れません・・・。
確かに折りたたむ・たたまないにかかわらず、そういったことが実現されれば使いやすいですね。

もりもママ。

再び失礼致します。
Comment展開のスクリプトでコメントしてくれた人のURLリンクや、コメント編集といったことはできないのでしょうか。
そのような変数はまだ公開されていないのでしょうか。
それができれば重たいコメント投稿画面を出すことなく投稿、編集できるのですが・・・。
お時間のおありになるときで構いませんのでよろしくご回答お願いします。

もりもママ。

biscoさんこんにちは!
大変詳しい解説でいつも参考にさせて頂いています。
↓のtokoさんのコメントが表示されないのは環境設定で「Comment list」が有効になっていないからではないでしょうか。
横レス大変申しわけありません。

toko

何度もすみません。
closeは表示されますが、コメントが表示されません。こんな感じになります。よろしくお願いいたします。

bisco

スクリプトを設置した後、
<ol>や<ul>がない!
を参考にして、<div class="entry_state">の下方、
<!--deny_comment--><!--/deny_comment-->
の下あたりに1つ目のHTMLを(ちなみに、
<span id="varP2<%topentry_no>">
の前に全角スペースを入れると見た目も整います)、
そしてその少し下の</div>の下に2つ目のHTMLを入れてください(その際、
<div id="varXYZ2<%topentry_no>" style="display: none">
に class="entry_text"を入れると見た目も整います)。

toko

URLを付けました。よろしくお願いいたします。

bisco

使用テンプレート名(+できればブログURL)を教えてください。

-

承認待ちコメント
このコメントは管理者の承認待ちです

bisco

お力になれずすみません…<(_ _)>

茄茶

どうしても解決しないので、諦めることにしました(´・ω・)
いろいろとありがとうございました。

bisco

できるはずなのですが・・・。
動作確認
http://bisco.blog2.fc2.com/?style2=bluesky3&index

閉じたときは下の記事ではなく、記事ステータス(コメント・カテゴリなどがある列)を基準に戻しています。記事の頭に戻りたい場合は
<a href="#CL<%topentry_no>" …中略… title="コメントを閉じる">Comment-close</a>

#CL<%topentry_no>

#<%topentry_no>
にしてみてください。

茄茶

ありがとうございました。
コメントに書かれた通りにやってみたのですが、
Comment-openとComment-closeの文字が切り替わるだけでコメントが出てきませんでした。
閉じるときは下の記事に移動します。

すみません、もう一度教えてくれませんか・゚・(ノД`)・゚・

ナミ

はじめまして、ナミと申します。
こちらの記事を参考にさせて頂きました★
ありがとうございました!m(_ _)m

bisco

試してみました。スクリプトをコピー入れ直し、

</div>
<!--
<rdf:RDF

の上の</ol>の上にHTMLソースを、CSSに以下を入れてください。

.com_open {
display: block;
padding: 0 5px;
text-align: left;
}

bisco

具体的にどんなエラーが発生するのかわからないので、もうひとつ同じテンプレートをDLして、エラーが出る状態を見せていただけると助かります(時間があるときにこちらでも試してみます)。

茄茶

はじめまして。
コメントの折りたたみを設置しようとしてるのですが、どうしてもエラー発生してしまいます。
すみませんが、教えていただけないでしょうか。
文章下手くそですみませんorz

KOTO

返答ありがとうございますΣ(>ω<)

時間のあるときにまた挑戦してみます(・・´*)

bisco

記事内に解説を書いてみました。
ご使用のテンプレートの場合、<div class="entry_state">以下の文字列の任意の位置(<!--/allow_comment-->の左が無難かと)に1つ目のソースを(好みで<!--not_permanent_area-->と<span…の間に|や/や半角スペースなどの仕切りを入れて)、
</td></tr></table><br>の下に2つ目のソースを挿入してみてください。

KOTO

こんにちわ。
コメントの折りたたみに挑戦してみようと思ってやってみたのですが</ol>がなくどれを挿し変えたらいいのかわからず立ち往生してしまってます><
もしよければご指導よろしくお願いします><
駄文ですみません

ヤンク

ご返答ありがとうございます。
ソースまで提示してくださってほんとに感謝しています!
biscoさんのページを見て自分でももっといじれるように勉強してみますね。
ほんとうにありがとうございました♪

bisco

<!––/▲ここまでコミュニティー終▲––>

<!––▼▼ここからコメントエリア全体始▼▼––>
の間を

<div class="entry_state">
<a href="<%topentry_category_link>" title="【カテゴリー//<%topentry_category>"><%topentry_category></a>
&nbsp;//&nbsp;
<!--allow_comment-->
<a href="<%topentry_link>#comment_top" title="【<%topentry_title>*】のコメント<%topentry_comment_num>件 ">COMMENT[<%topentry_comment_num>]</a>
<!--not_permanent_area-->
<span id="varP2<%topentry_no>"><a href="<%topentry_link>#comment" onclick="showMoreComments(<%topentry_no>,'<%topentry_link>#<%topentry_no>');return false;" name="CL<%topentry_no>" title="コメントをここで読む">OPEN</a></span>
<!--/not_permanent_area--><!--/allow_comment-->
<!--deny_comment-->COMMENT[-]<!--/deny_comment-->
&nbsp;//&nbsp;<!--allow_tb--><a href="<%topentry_link>#trackback_top" title="【<%topentry_title>*】のトラックバック<%topentry_tb_num>件"> TRACKBACK[<%topentry_tb_num>]</a><!--/allow_tb-->
<!--deny_tb-->TRACKBACK[-]<!--/deny_tb-->
&nbsp;//&nbsp;<a href="#main" title="【この頁の最上部へ】">Top</a>
</div>

<!--not_permanent_area-->
<div id="varXYZ2<%topentry_no>" style="display: none">
<p><a href="#CL<%topentry_no>" onclick="showMoreComments(<%topentry_no>,0);return true;" title="コメントを閉じる">CLOSE</a></p>
<!--comment_list-->
<p class="com_open"><strong><%topentry_comment_list_name></strong><br>『<%topentry_comment_list_brbody>』</p>
<!--/comment_list-->
</div>
<!--/not_permanent_area-->
</div>

に変更してみてください。変更前にプレビューして動作するか確かめると安全です。

ヤンク

はじめまして。
こちらで追記の折りたたみ方法を使わせていただきました。
このたびコメントの折りたたみにも挑戦してみようと思ったのですが、
</ol>がなくどこをいじってよいのやら…。
コメントの折りたたみは私のページでも使えますでしょうか?

bisco

olがulになっているだけなので気にしなくても平気です。olでもulでもliはliなのです。

sofia

先程、記事の展開、折りたたみを使わせて頂き、次にコメントへと挑戦中なのですが、</ol>が記述されていないテンプレみたいで、HTMLとスタイルシートの変更の箇所がわかりません(*・_・*)ゞ
もし良ければご指導お願いしたいのですが・・・
よろしくお願い致します

花音

そういう意味があったんですね!
教えて下さって、ありがとうございました。
自分でテンプレートを作るときの参考にさせていただきます♪

bisco

ドコへのリンクなのか(Eならエントリー、CLならコメントリストなど)が一目見てわかることなどが理由です。無かったり他の文字だったりしても動作には支障ないですよ。あ、#の方はページ内を読み込みなしで移動するためのものです。

花音

出来ました♪
ご返答ありがとうございました!!

ふと疑問に思ったのですが、#E<%topentry_no>とか#CL<%topentry_no>とかの<%topentry_no>の前につく#E #CL などはどういう意味があるのですか?

bisco

<a href="#CL<%topentry_no>" onclick="showMoreComments(<%topentry_no>,0);return true;" title="コメントを閉じる">Comment-close</a>
の href="#CL<%topentry_no>" を href="#E<%topentry_no>" に変更して <div class="topentry_title"> の中の <h2> を <h2 id="E<%topentry_no>"> としてみてください。

花音

すみません; コメントが途切れてしまうという件は自己解決できました。
<!--comment_list-->
この間をテーブルタグで囲ったら、ちゃんと全文表示されるようになりました。
<!--/comment_list-->

違う質問なんですが、コメントを閉じる時にその記事のタイトル部分に戻るにはどうすればいいですか?
今はC-Listの部分に戻るようになっています。
質問ばかりで申し訳ありませんが、よろしくお願いします。

花音

はじめまして。コメントの折りたたみをしたくて、昨日から頑張っているのですが、どうしてもわからないトコロがあるので質問させてください。
なんとか折りたためるようになったのですが、コメントリストを開くとコメントが途中で途切れてしまうところがあります。
どこを直せばちゃんと表示されるようになるのでしょうか?
※C-Listがコメントリストになってます。
非公開コメント

bisco

回れ左

Search

Comment

Trackback

Mail form


返信

ブロとも申請フォーム