おちです。
コメント欄って割とスペース取るから管理人としては結構悩みどころですよね。SPAM書き込みのことを考えると外すのが一番簡単だけど、それも何だか不親切ですし。…ということで玉虫色的対処としてボタン一つで開閉するようにしてみました。
一応WordPress向けに書いてありますが、jQuery使えるブログ (^^; なら他のCMSでも応用できると思うので参考になさって下さい。
コメント欄のHTML構造をよく見る
事の発端が「サイトをコンパクトにしたい」なので、HTMLには何も足しません。既存のHTML構造をよく見て使えそうなパーツを探します。
そこでWordPressのコメント欄から要素を極限まで削ってみたところ、フォーム本体とヘッダが残りました。
【HTML】
<h3 id="reply-title" class="comment-reply-title">コメントを残す</h3>
<!-- ↑↑ ここからコメント始まる ↑↑ -->
<form action="http://www.02320.net/wp-comments-post.php" method="post" id="commentform" class="comment-form">
<!-- この中にコメント欄の要素が全部入る -->
</form>
そうと判れば中身を消すだけです。
クリッカブルに開閉するパネルを作る
やりたいことを整理しましょう。
jQuery（Javascript）
H3#reply-title を押したときに、form#commentform 全体が出たり消えたりするトグルスイッチをつけたいので、コメント呼び出し前に以下のコードを書き込みます。
【comments.php】
$(function(){
$("#commentform").css("display", "none");
$("#reply-title").click(function(){
$("#commentform").toggle();
});
});
コメント欄の呼び出しとは、テーマファイル comments.php 内にある comment_form() ですね。
<?php comment_form(); ?>
これで「コメントを残す」がフォームが開閉するスイッチに変わります。以下のコード参考にさせて頂きました。ありがとうございます。
参考：jQuery：jQueryを使用して<div>要素の表示・非表示 – raining
「コメントを残す」をボタンっぽくする
ただ、「コメントを残す」だとボタンっぽく見えません。UI的に「それっぽくする」のはとても大事なので今度はこっちを書き換えます。
comments.php の comment_form() を書き換える
comment_form() が出力する見出し文を「コメントを残す」→「この記事にコメントする」に変更しましょう。
【comments.php】
<?php
$args = array( 'title_reply' => 'この記事にコメントする' );
comment_form($args);
?>
CSSで整える
最後に見た目を整えます。やっつけですけど参考までにどうぞ。
【CSS】
#reply-title{
display: block;
padding: 3px;
text-align: center;
border: 1px solid #CCC;
border-radius:2px;
background: #EEE;
}
コメント欄をコンパクトにしたい まとめ
…というわけでコメント欄を残しつつスッキリさせることが出来ました。ただ、見えなくしたとは言えオンロードで読み込んでいるため、jQueryとCSSの分が増えてるのがちょっと悩み。データ量としてはアイコン1枚分にも満たないけどレンダリングに無駄が出ちゃうんですよね。今後の課題です～。
コメントをどうぞ(´ω｀*)