個別記事に移動せずに“トップページで”コメントリストを展開して読めるようにするカスタマイズです。動作をするように変更するだけの説明なので、見た目のカスタマイズについてはご自分で調べるか質問をしてください。 また、使用するテンプレートによってはHTMLの変更に違いがあるかも知れません。どうしてもわからなければ質問してください。
まず行うべきこととして、コメントリストを有効にすることが挙げられます。管理画面で、環境設定の変更→ブログの設定と進み、そのページの最下部「<%topentry_comment_list>を有効にする」の項目を「有効にする」に変更しておいてください。
ここでは記事ステータス(記事下の日付・コメント・トラバ等)を<ol>によってリスト化しているテンプレートを前提に説明します。他のテンプレートで使いたい場合は<li>を<div>や<p>にして考える必要があるかも知れません。
以下をHTMLの<head>と</head>の間に挿入します。
以下を</ol>の上に挿入しますが、記事ステータスは大抵の場合ひとつひとつの項目が |
で仕切られています(前後に半角スペースがない場合も)。そのため、コメントの開閉ボタンを設置するために前の項目に仕切りを入れなければなりません。</ol>の直前の</li>の前に |
を入れてください。
開閉ボタンであるComment-openとComment-closeの文字は好きに変更してください。
そしてスタイルシートに以下を書き加えます。paddingの指定はご自分にあったサイズに調整し、必要があれば他の指定も書き加えてください。
.com_open {
display: block;
padding: 0 5px;
}
※ このコメントの折りたたみは追記の折りたたみと共に使うことができます。
※ 開閉を行うと閉じるボタン(Comment-close)がズレる場合がありますがそういう仕様です。
※ もちろん私にもわからないことがあるので、なんでもかんでも質問に答えられるわけではないので悪しからず。
記事ステータスがリスト化されていない場合は、そのままリンクを並べただけの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;
}
コメント
-
2013/04/08 編集
-
2009/03/04 編集
こはく
2008/11/15 URL 編集
bisco
回答はまだ少しお待たせしてしまうかと思われます。すみません。
2007/11/21 URL 編集
ゆきこん
<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>
2007/11/07 URL 編集
K
何度も申し訳ないので諦めます。ありがとうございました。
2007/01/24 URL 編集
bisco
<!--/more-->は消さないで下さい。
それからスタイルシートの変更は本文にある通りですので、このテンプレートでは必要ありません。
2007/01/24 URL 編集
K
一応 <!-- ▼ メイン&記事 ▼ --> の部分を貼り付けますので、できればご確認いただけないでしょうか。
スタイルシートには最下部に
.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-->
2007/01/23 URL 編集
bisco
記事ステータス(記事下の日付・コメント・トラバ等)
については理解いただけているのだと思いますが、それがどこにあるのか誤解されているようです。
このテンプレートでは記事ステータスは<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>の上に入れることをお奨めします。それ以外の問題についてはまだ気にするほどではないかと思われます。
2007/01/23 URL 編集
K
きのうから頑張ってるのですが、うまくいきません。
[bud]というテンプレート使用しているのですが、</ol>がないので</ul>の前に入れているのですが、全く変化がありません。
プラグイン対応なので、最近のコメントのところに入れてもみたのですが、全くツリーになりません。どこにいれたらよいのでしょうか。
それと、<head>と</head>の間に挿入する時は
どちらの直後、直前に入れた方がよいとか、違いがありますか?
まだ初心者なので、やっぱり難しいでしょうか?
2007/01/22 URL 編集
bisco
またどうぞ。
2006/09/20 URL 編集
toko
2006/09/20 URL 編集
bisco
もりもママ。さんのコメントの通りかと思われます(記事の冒頭部にも書き加えておきました)。
>もりもママ。さん
手助けありがとうございました。
さて、コメント寄稿者のURLリンクは、該当する変数がないので難しそうです。
(http://blog.fc2.com/template.html)
コメントのタイトルにURLを入れてもらって、
<a href="<%topentry_comment_list_title>"><%topentry_comment_list_name></a>
とする方法でならできなくもありませんが、今まで寄せられたコメントのことを考えると・・・
コメント編集についても、現状ではコメントの番号を得ることができないので、編集エリアへのリンクが作れません・・・。
確かに折りたたむ・たたまないにかかわらず、そういったことが実現されれば使いやすいですね。
2006/09/18 URL 編集
もりもママ。
Comment展開のスクリプトでコメントしてくれた人のURLリンクや、コメント編集といったことはできないのでしょうか。
そのような変数はまだ公開されていないのでしょうか。
それができれば重たいコメント投稿画面を出すことなく投稿、編集できるのですが・・・。
お時間のおありになるときで構いませんのでよろしくご回答お願いします。
2006/09/18 URL 編集
もりもママ。
大変詳しい解説でいつも参考にさせて頂いています。
↓のtokoさんのコメントが表示されないのは環境設定で「Comment list」が有効になっていないからではないでしょうか。
横レス大変申しわけありません。
2006/09/18 URL 編集
toko
closeは表示されますが、コメントが表示されません。こんな感じになります。よろしくお願いいたします。
2006/09/17 URL 編集
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"を入れると見た目も整います)。
2006/09/16 URL 編集
toko
2006/09/16 URL 編集
bisco
2006/09/15 URL 編集
-
2006/09/15 編集
bisco
2006/08/05 URL 編集
茄茶
いろいろとありがとうございました。
2006/08/03 URL 編集
bisco
動作確認
http://bisco.blog2.fc2.com/?style2=bluesky3&index
閉じたときは下の記事ではなく、記事ステータス(コメント・カテゴリなどがある列)を基準に戻しています。記事の頭に戻りたい場合は
<a href="#CL<%topentry_no>" …中略… title="コメントを閉じる">Comment-close</a>
の
#CL<%topentry_no>
を
#<%topentry_no>
にしてみてください。
2006/08/02 URL 編集
茄茶
コメントに書かれた通りにやってみたのですが、
Comment-openとComment-closeの文字が切り替わるだけでコメントが出てきませんでした。
閉じるときは下の記事に移動します。
すみません、もう一度教えてくれませんか・゚・(ノД`)・゚・
2006/08/02 URL 編集
ナミ
こちらの記事を参考にさせて頂きました★
ありがとうございました!m(_ _)m
2006/08/01 URL 編集
bisco
</div>
<!--
<rdf:RDF
の上の</ol>の上にHTMLソースを、CSSに以下を入れてください。
.com_open {
display: block;
padding: 0 5px;
text-align: left;
}
2006/07/14 URL 編集
bisco
2006/07/13 URL 編集
茄茶
コメントの折りたたみを設置しようとしてるのですが、どうしてもエラー発生してしまいます。
すみませんが、教えていただけないでしょうか。
文章下手くそですみませんorz
2006/07/12 URL 編集
KOTO
時間のあるときにまた挑戦してみます(・・´*)
2006/06/29 URL 編集
bisco
ご使用のテンプレートの場合、<div class="entry_state">以下の文字列の任意の位置(<!--/allow_comment-->の左が無難かと)に1つ目のソースを(好みで<!--not_permanent_area-->と<span…の間に|や/や半角スペースなどの仕切りを入れて)、
</td></tr></table><br>の下に2つ目のソースを挿入してみてください。
2006/06/24 URL 編集
KOTO
コメントの折りたたみに挑戦してみようと思ってやってみたのですが</ol>がなくどれを挿し変えたらいいのかわからず立ち往生してしまってます><
もしよければご指導よろしくお願いします><
駄文ですみません
2006/06/23 URL 編集
ヤンク
ソースまで提示してくださってほんとに感謝しています!
biscoさんのページを見て自分でももっといじれるように勉強してみますね。
ほんとうにありがとうございました♪
2006/06/17 URL 編集
bisco
と
<!––▼▼ここからコメントエリア全体始▼▼––>
の間を
<div class="entry_state">
<a href="<%topentry_category_link>" title="【カテゴリー//<%topentry_category>"><%topentry_category></a>
//
<!--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-->
// <!--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-->
// <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>
に変更してみてください。変更前にプレビューして動作するか確かめると安全です。
2006/06/14 URL 編集
ヤンク
こちらで追記の折りたたみ方法を使わせていただきました。
このたびコメントの折りたたみにも挑戦してみようと思ったのですが、
</ol>がなくどこをいじってよいのやら…。
コメントの折りたたみは私のページでも使えますでしょうか?
2006/06/12 URL 編集
bisco
2005/10/27 URL 編集
sofia
もし良ければご指導お願いしたいのですが・・・
よろしくお願い致します
2005/10/27 URL 編集
花音
教えて下さって、ありがとうございました。
自分でテンプレートを作るときの参考にさせていただきます♪
2005/08/21 URL 編集
bisco
2005/08/20 URL 編集
花音
ご返答ありがとうございました!!
ふと疑問に思ったのですが、#E<%topentry_no>とか#CL<%topentry_no>とかの<%topentry_no>の前につく#E #CL などはどういう意味があるのですか?
2005/08/20 URL 編集
bisco
の href="#CL<%topentry_no>" を href="#E<%topentry_no>" に変更して <div class="topentry_title"> の中の <h2> を <h2 id="E<%topentry_no>"> としてみてください。
2005/08/20 URL 編集
花音
<!--comment_list-->
この間をテーブルタグで囲ったら、ちゃんと全文表示されるようになりました。
<!--/comment_list-->
違う質問なんですが、コメントを閉じる時にその記事のタイトル部分に戻るにはどうすればいいですか?
今はC-Listの部分に戻るようになっています。
質問ばかりで申し訳ありませんが、よろしくお願いします。
2005/08/19 URL 編集
花音
なんとか折りたためるようになったのですが、コメントリストを開くとコメントが途中で途切れてしまうところがあります。
どこを直せばちゃんと表示されるようになるのでしょうか?
※C-Listがコメントリストになってます。
2005/08/19 URL 編集