コメントのスクロールを開閉する
2006年10月19日 (Thu) 14:25
長〜く伸びたコメント欄に overflow:auto; という擬似フレームを指定して、さらにそのスクロールを開閉させるスクリプトを導入。以下を参考にさせて頂きました（お礼をかねてトラックバックを飛ばします。ありがとうございました）
■スクロールバーの表示・非表示の切り替え | Customize in Ninja Blogさん
■スクロールバーの表示・非表示の切り替え | Customize in Ninja Blogさん
本日（06年12月1日）のリニュに際し、テンプレを作り分けるのが面倒になったので全カテゴリをコメントスクロールにしました（＾＾；
ただし、当方でコメント欄が特に長くなるのはカテゴリ「配布テンプレート」に含まれるエントリのみなので、そのカテゴリにだけ適応させるテンプレートを別個に作成しています。なので、ご覧になられているこのページのコメント欄にはスクロール表示のない事をご了解下さい。
一応サンプルとして、こちらのコメント欄などご覧下さい→テンプレート/煤竹（すすたけ）
手順1■HTMLテンプレートにスクリプトを記述 ※<body>から</body>の間に。
手順2■HTMLテンプレートにスクロールさせる箇所を記述。
テンプレートの構成が以下と異なる場合もありますが、Serene Bachの場合、コメントの独自ブロック<!-- BEGIN comment -->から<!-- END comment -->までをこのように囲んで下さい。
手順3■HTMLテンプレートにスクロール開閉用のリンクを記述。
これも、テンプレートの構成が以下と異なる場合がありますが（h2ではなくh3とか）、このようにコメントタイトルの真下で、スクロールフレームの真上にあたる箇所に記述して下さい。
手順4■CSSテンプレートに表示の設定を追加します。
これも、テンプレートの構成によって内容の異なる場合があり、以下のとおりでは意図した表示にならないかもしれません。…が、「〜というテンプレートの場合どうしたらよいか」等のご質問は、当方ではお受け出来ませんのでご了承下さい。
動作はWinXPのIE6.0（Sleipnir2.48）/ Netscape7.1 / Firefox1.5.0.7 で確認しています。また、参考にさせて頂いた記事の中には開閉の複数設置について書かれておりますが、個人的にコメント欄にのみ使用したかったのでこのエントリでは触れておりません。
あっ、手を加える前に必ずHTMLテンプレートのバックアップを忘れずに！ HTMLを書き換えたあとの再構築も忘れずに！ 寝る前の歯磨きも忘れずに！
一応サンプルとして、こちらのコメント欄などご覧下さい→テンプレート/煤竹（すすたけ）
手順1■HTMLテンプレートにスクリプトを記述 ※<body>から</body>の間に。
<script type="text/javascript">赤文字で示した250pxがフレームの高さになります。コメント欄にはこのくらいが適当かと。
<!--
size = 1;
sizeHeight = new Array("100%","250px");
function scrollbox(c) {
boxID = document.getElementById('scrollbarbox'+c)
size = ( size == 1) ? 0 : 1;
boxID.style.height = sizeHeight[size];
}
//-->
</script>
手順2■HTMLテンプレートにスクロールさせる箇所を記述。
テンプレートの構成が以下と異なる場合もありますが、Serene Bachの場合、コメントの独自ブロック<!-- BEGIN comment -->から<!-- END comment -->までをこのように囲んで下さい。
<div id="scrollbarbox1" class="com_scroll" style="height:250px;">赤文字で示した250pxには、上のスクリプトに指定したものと同じ数値を。
<!-- BEGIN comment -->
<dl>
<dd>{comment_description}</dd>
<dt>{comment_name} | {comment_time}</dt>
</dl>
<!-- END comment -->
</div>
手順3■HTMLテンプレートにスクロール開閉用のリンクを記述。
これも、テンプレートの構成が以下と異なる場合がありますが（h2ではなくh3とか）、このようにコメントタイトルの真下で、スクロールフレームの真上にあたる箇所に記述して下さい。
<h2 id="comments">Comment</h2>
<p class="com_scroll_text"><a href="#comments" onclick="scrollbox(1)" title="コメントのスクロール表示・非表示を切り替えます">コメントのスクロール表示・非表示を切り替えます</a></p>
手順4■CSSテンプレートに表示の設定を追加します。
これも、テンプレートの構成によって内容の異なる場合があり、以下のとおりでは意図した表示にならないかもしれません。…が、「〜というテンプレートの場合どうしたらよいか」等のご質問は、当方ではお受け出来ませんのでご了承下さい。
div.com_scroll {表示を確認しながらそれぞれを数字で調整して下さい。overflow:auto;}以外は設定の必要のないテンプレートもあるかもしれません。以上で終わりです。
width:数字px;
margin:上px 右px 下px 左px;
overflow:auto;}
p.com_scroll_text {
margin:上px 右px 下px 左px;}
動作はWinXPのIE6.0（Sleipnir2.48）/ Netscape7.1 / Firefox1.5.0.7 で確認しています。また、参考にさせて頂いた記事の中には開閉の複数設置について書かれておりますが、個人的にコメント欄にのみ使用したかったのでこのエントリでは触れておりません。
あっ、手を加える前に必ずHTMLテンプレートのバックアップを忘れずに！ HTMLを書き換えたあとの再構築も忘れずに！ 寝る前の歯磨きも忘れずに！
Comments
>> コメントのスクロールを表示・非表示に切り替えます
早速、カスタマイズしてみました。
ありがとうございました。
私も早速参考にさせていただきました。
当方では、なかなかコメントはつかないのですが、あはっ。
ありがとうございました。
ずっと気になってたこのカスタマイズ。
参考にさせていただきました!!
ありがとうございました。
皆さま、こんにちわ。しかし…なにかこう「みかん。さん、こんばんは」が合言葉であるかのような錯覚を覚えました（笑）
overflow:auto;だけでは見づらい場合もあり、私もずっと気になっていたスクリプトだったので、改めて、参考元サイトさまへ向けてご一緒に感謝の念波を送って下さいな。あと、寝る前の歯磨きも忘れないで下さいな。
Comment Form