コメントを折りたたみ表示する
投稿されたコメントもパーマリンクに飛ばずに、
トップページで読めるようにカスタマイズしてみました。
【参考記事】
・ARTIFACT ―人工事実― : Movable Type作業メモ
①</head>タグの上に以下のJavaScriptを記述。
<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>
②コメントを見るためのスイッチを付ける
記事本文最後のトラックバック数やコメント数を表示させるところにコメントを見るためのスイッチを付けます。
<!--allow_comment-->~<!--allow_comment-->の間にコメント数を表示させる(コメント投稿する際のリンク)記述があるので、
そこに以下のJavaScriptを記述。
<!--allow_comment--><a href="<%topentry_link>#com" title="コメント">Comments(<%topentry_comment_num>)</a><!--/allow_comment-->
↓
<!--allow_comment--><a href="<%topentry_link>#com" title="コメント">Comments(<%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-->
③コメントを表示させる記述を追加
rdfを定義している部分の上に、以下を追加。
<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>
<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"~
④スタイルシートに以下を追記。
.sidehide{display:none;}
⑤<%topentry_comment_list>を有効にする。
管理者ページ>環境設定の変更>ブログの設定ページを開き、
一番下「アドバンス設定(上級者用)」の「<%topentry_comment_list>を有効にする」を、
”無効にする”から”有効にする”に変更します。
以上で、「見る▼」をクリックすると、投稿されたコメントが表示されます。
コメントにパンヤ絵文字を表示できるようにしている場合、
このままでは絵文字が表示されません。
パンヤ絵文字を使用できるようにした時に挿入したJavaScriptを少々細工して、
本文の③で説明した部分の中にさらに追記します。
<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>
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能:画像変換
function changeCustmizeEmojiTag() {
// (1)コメント全体のタグの id 属性
var commentAreaIdName = 'topentry_comment_area<%topentry_no>';
// (2)コメント全体のタグ名
var commentAreaTag = 'div';
// (3)各コメントの class 属性
var commentBodyClassName = 'topentry_comment_body';
// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
var objComArea;
var classComArea;
var objComBody = new Array();
if (commentAreaIdName != '') {
objComArea = document.getElementById(commentAreaIdName);
if (!objComArea || !objComArea.innerHTML) return;
classComArea = objComArea.getElementsByTagName(commentAreaTag);
} else {
classComArea = document.getElementsByTagName('*');
}
for (var i = 0; i < classComArea.length; i++) {
if (classComArea[i].className == commentBodyClassName) objComBody[objComBody.length] = classComArea[i];
}
for (var i = 0; i < objComBody.length; i++) {
objComBody[i].innerHTML = getStringCustmizeEmojiTag(list, objComBody[i].innerHTML, att);
}
}
function getStringCustmizeEmojiTag(list, s, att) {
for (var i = 0; i < list.length; i++) {
s = s.split('[' + list[i][0] + ']').join('<img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" />');
}
return s;
}
changeCustmizeEmojiTag();
// -->
</script>
<div style="text-align:right">
<a href="javascript:void(0);" onClick="showHide('cmnt<%topentry_no>');">コメントを閉じる▲</a>
</div>
</div>
<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
コメント全体を囲むタグはID属性を使用しているため、各記事毎にユニークになるように、記事番号を付加するようにしています(紫文字の部分)。
これで、パンヤ絵文字が表示されます。
さらにカスタマイズ、その②
昨年末の記事「続きを読むを折りたたみ表示する」で記述した方法をやめて、
今回追加したJavaScriptを使用して実現する方法に変えてみました。
スタイルシートを利用して表示の有無を実現している分、多少軽くなるかと思います(どうでしょ?w)。
<!--more_link-->~<!--/more_link-->で囲まれた部分を以下のように修正する。
<!--more_link--><div class="entry_text"><a href="<%topentry_link>#more">続きを読む</a></div><!--/more_link-->
↓
<!--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-->
<!--more-->
<a name="more" id="more"><%topentry_more></a>
<!--/more-->
</div>
「続きを読むを折りたたみ表示する」でheadタグ内に記述したJavaScriptは削除してかまいません。
トップページで、コメント投稿もさせたい?
それは、まだ不具合があるので、この次に( ̄∀ ̄*)
※この記事が参考になったら、トラックバックお願いいたします。
COMMENT
共有テンプレを公開しているお題小町の管理人、かんなです。
とても素敵に、見やすくカスタマイズされていらっしゃいますね。
ツリー化や続きを読むの折りたたみなど、あたしが苦手で避けて
しまっているカスタマイズなどお得意なようで羨ましいです^^;
テンプレをご利用頂き、大変嬉しく思っておりますが1つだけ
お願いがあります。スクロールした際、最後に右下に表示される
「 Item+Template by odaikomachi 」 の表記ですが
以前とは画像が変わっておりますので、Itemの部分を変更して
頂けませんでしょうか。 若しくは、配布時のテンプレ時よりも
かなり素敵にカスタマイズされていますので、著作権表記を
全部削除して頂けますか?
どちらでも構いません。 よろしくお願いいたします。
テンプレートを利用させて頂き、ありがとうございます^^
なかなか気に入ったテンプレートが見つからなかったのですが、
シンプルでクールなかんなさんのテンプレを見つけ、即気に入りました。
いじりすぎて、ごちゃごちゃになってしまった感があるのですが・・・w
著作権表示の件、了解いたしました。
お題小町さんの本テンプレの記事を拝見したところ、
画像差し替えの場合は、著作権表示の変更が必要だったのですね。
失礼いたしました。
Itemの部分を削除させていただきました。
テンプレの原型およびメニューの折りたたみScriptは利用させていただいていますので、
テンプレの著作権表示は残してあります。
これからも素敵なテンプレ、素材の作成でのご活躍をお祈りしています。
カスタマイズなさったのですね。
お役に立てて、よかったです^^
いじり始めると、欲がでてきますよねぇw
カスタマイズ好きなので、これからも色々いじっていこうと思います。
また、見に来てね^^
折りたたみ表示が、一回で失敗せずにカスタマイズ出来てうれしいです。
スタイルシートのいじり方が悪いのか・・・
コメント部分の、フォントが大きくなるのですが
また、修正したいと思います。
この度は、ありがとうございました。
また、カスタマイズの勉強させて頂きたいと思います。
あと、初めてトラックバック使ったのですが、
これで、良かったのでしょうか・・・
それでは、今後とも宜しくお願いいたします。
カスタマイズのお役に立ててよかったです^^
トップページのコメント表示は、topentry_comment_bodyクラス属性で指定すればOKですよ。
トラックバックもありがとう~。
これでOKです[ぺこあにめ]
無事、希望どうりの表示なりました♪
ますます感動です。(笑)
本当に、いろいろありがとうございました。
これからも、お邪魔させて頂きます♪
それと、LINKもさせて頂けたらと思っています。
何か、支障があるようでしたらおっしゃってください。
それでは、また[おみごとあにめ]。
自分の思ったようなカスタマイズができると、
嬉しいですよね^^
難しい問題が解けたときの様な気分?w
リンクの件、もちろんOKです。
私からもリンクさせて頂きますね~。
今後ともよろしくです[ぺこあにめ]
折りたたみ表示にするスクリプト、参考にさせていただきました。
ありがとうございます。
また困った事があったら参考にさせていただきたいと思います。
今後ともよろしくお願いいたします。
コメントの折りたたみに付いて参考にさせて頂きました。(わら)
紆余曲折はありましたが(実は参考にしながら一度挫折してる(あせ))、なんとか導入することが出来ました。[わーんあにめ]
ありがとうございました(ぺこ)
はまると何がなんだかわからなくなりますよね^^;
でも、お役に立ててよかったです^^
コメントの折りたたみ、できました!
ありがとうございます[わらあにめ]
ありがとうございます^^
今回fc2で「tw_3col_1_plg」テンプレートを使用させていただいております。
追記の開閉の部分でお尋ねします。
オープンして追記を読んだ後 クローズを押した時、オープンの所に戻す方法はありますでしょうか。
続きを読むを折りたたみ表示する に記載されている12/28追記の部分がそうなのかとチャレンジしてみましたが、どうしても出来ません[かなし]
詳しくはブログの方にも載せてありますので、アドバイスいただけませんでしょうか。
宜しくお願いします。[ぺこ]
COMMENT
共有テンプレを公開しているお題小町の管理人、かんなです。
とても素敵に、見やすくカスタマイズされていらっしゃいますね。
ツリー化や続きを読むの折りたたみなど、あたしが苦手で避けて
しまっているカスタマイズなどお得意なようで羨ましいです^^;
テンプレをご利用頂き、大変嬉しく思っておりますが1つだけ
お願いがあります。スクロールした際、最後に右下に表示される
「 Item+Template by odaikomachi 」 の表記ですが
以前とは画像が変わっておりますので、Itemの部分を変更して
頂けませんでしょうか。 若しくは、配布時のテンプレ時よりも
かなり素敵にカスタマイズされていますので、著作権表記を
全部削除して頂けますか?
どちらでも構いません。 よろしくお願いいたします。
テンプレートを利用させて頂き、ありがとうございます^^
なかなか気に入ったテンプレートが見つからなかったのですが、
シンプルでクールなかんなさんのテンプレを見つけ、即気に入りました。
いじりすぎて、ごちゃごちゃになってしまった感があるのですが・・・w
著作権表示の件、了解いたしました。
お題小町さんの本テンプレの記事を拝見したところ、
画像差し替えの場合は、著作権表示の変更が必要だったのですね。
失礼いたしました。
Itemの部分を削除させていただきました。
テンプレの原型およびメニューの折りたたみScriptは利用させていただいていますので、
テンプレの著作権表示は残してあります。
これからも素敵なテンプレ、素材の作成でのご活躍をお祈りしています。
カスタマイズなさったのですね。
お役に立てて、よかったです^^
いじり始めると、欲がでてきますよねぇw
カスタマイズ好きなので、これからも色々いじっていこうと思います。
また、見に来てね^^
折りたたみ表示が、一回で失敗せずにカスタマイズ出来てうれしいです。
スタイルシートのいじり方が悪いのか・・・
コメント部分の、フォントが大きくなるのですが
また、修正したいと思います。
この度は、ありがとうございました。
また、カスタマイズの勉強させて頂きたいと思います。
あと、初めてトラックバック使ったのですが、
これで、良かったのでしょうか・・・
それでは、今後とも宜しくお願いいたします。
カスタマイズのお役に立ててよかったです^^
トップページのコメント表示は、topentry_comment_bodyクラス属性で指定すればOKですよ。
トラックバックもありがとう~。
これでOKです[ぺこあにめ]
無事、希望どうりの表示なりました♪
ますます感動です。(笑)
本当に、いろいろありがとうございました。
これからも、お邪魔させて頂きます♪
それと、LINKもさせて頂けたらと思っています。
何か、支障があるようでしたらおっしゃってください。
それでは、また[おみごとあにめ]。
自分の思ったようなカスタマイズができると、
嬉しいですよね^^
難しい問題が解けたときの様な気分?w
リンクの件、もちろんOKです。
私からもリンクさせて頂きますね~。
今後ともよろしくです[ぺこあにめ]
折りたたみ表示にするスクリプト、参考にさせていただきました。
ありがとうございます。
また困った事があったら参考にさせていただきたいと思います。
今後ともよろしくお願いいたします。
コメントの折りたたみに付いて参考にさせて頂きました。(わら)
紆余曲折はありましたが(実は参考にしながら一度挫折してる(あせ))、なんとか導入することが出来ました。[わーんあにめ]
ありがとうございました(ぺこ)
はまると何がなんだかわからなくなりますよね^^;
でも、お役に立ててよかったです^^
コメントの折りたたみ、できました!
ありがとうございます[わらあにめ]
ありがとうございます^^
今回fc2で「tw_3col_1_plg」テンプレートを使用させていただいております。
追記の開閉の部分でお尋ねします。
オープンして追記を読んだ後 クローズを押した時、オープンの所に戻す方法はありますでしょうか。
続きを読むを折りたたみ表示する に記載されている12/28追記の部分がそうなのかとチャレンジしてみましたが、どうしても出来ません[かなし]
詳しくはブログの方にも載せてありますので、アドバイスいただけませんでしょうか。
宜しくお願いします。[ぺこ]










Tigerうっす(10/29)
外人二十面相(10/23)
ゲイ・ヨンジュン(09/05)
Tigerうっす(08/31)
未流(08/31)
Tigerうっす(08/23)
未流(08/23)
ゲイ・ヨンジュン(08/23)
Tigerうっす(08/13)
一本どっこ(08/13)
Tigerうっす(08/13)
一本どっこ(08/13)
Tigerうっす(08/10)
Tigerうっす(08/03)
ゲイ・ヨンジュン(08/03)
Tigerうっす(07/20)
nyankichi.(07/17)
ゲイ・ヨンジュン(07/09)
Tigerうっす(07/08)
マツタカ(07/06)