【Blogger】コメント欄が長くなる問題を解決！件数制限の代わりに高さ固定＆スクロール化するカスタマイズ

 Bloggerでブログを運営していて、こんな悩みにぶつかったことはありませんか？

「コメントがたくさんつくのは嬉しいけれど、1ページに全件表示されるからページが縦に長くなりすぎる…！」

他のブログなどであれば「1ページに10件だけ表示」といった件数制限が簡単に設定できますが、残念ながらBloggerにはコメントの表示件数を制限する標準機能がありません。

コメントが増えれば増えるほど、記事の下部（関連記事やフッター）にたどり着くまでのスクロールが大変になってしまいますよね。

そこで今回は、CSSをたった数行追加するだけで、コメント欄を一定の高さに固定し、枠内でスクロールさせるカスタマイズ方法をご紹介します！

今回やりたいこと

コメントエリア全体の「最大の高さ」を設定します。

コメントが少ない時はそのまま表示され、設定した高さを超えるほど増えた場合は、自動的に枠内でスクロールバーが表示されるようになります。

これで、コメントが何十件つこうが記事全体の長さは変わりません！

設定手順（CSSを追加するだけ）

作業はとても簡単です。バックアップを取ってから試してみてくださいね。

Bloggerの管理画面からテーマを開く。

カスタマイズ→詳細設定→プルタブからCSSを追加を選び、以下のコードを貼り付ける。

/* コメントブロックの枠と高さを強制適用 */

#comments-block, 

#comments .comments-content, 

.comments .comments-content {

  max-height: 400px !important; /* 好きな高さに調整してください */

  overflow-y: auto !important;

  border: 1px solid #ddd !important;

  padding: 10px !important;

}

右下の保存を押す。

高さを変更したい場合

コード内の max-height: 400px !important; の「400px」の部分を、「300px」や「500px」などお好みの数値に変更してください。

おわりに

Bloggerの仕様上「件数で区切る」ことはできませんが、このスクロール化を行っておけば、デザインを崩さずに読者にとっても読みやすい環境を作ることができます。

特に「QooQ」などのシンプルで美しいテーマを使っている方には、全体のシルエットを綺麗に保てるのでおすすめのカスタマイズです。

コメント欄の長さに頭を抱えていた方は、ぜひ試してみてくださいね！