コメント表示部をスクロールさせる

コメントのレスをつける時、そのコメントを見ながらお返事を書きたい。でもコメントがつけばつくほど長くなり、レスをつけている間に何度もページをスクロールして、コメント表示部とコメントフォームを行ったりきたり…。ちょっと面倒臭い。

じゃあ表示されてるコメントたちだけスクロールさせちゃおう。
面倒くさがりの自分用カスタマイズでしたが要望があったのでご紹介。

▼HTML
コメントブロックをcom_areaと名づけたdivで囲みます。
この色の部分が追記しているところです。
<div class="com_area">
<!-- BEGIN comment -->
<dl class="body" id="{comment_id}">
<dd>{comment_description}</dd>
<dt>{comment_name} | {comment_time}</dt>
</dl>
<!-- END comment -->
</div>

▼CSS
com_areaにスクロール設定と、高さの設定をします。
div.com_area {
height:200px;
overflow:auto;
}
高さはここでは200pxにしていますが、お好みで。コメントがない場合もここで指定した高さの分は余白として表示されます。
壁紙とかつけても可愛いかもです。
その場合は↑のCSSのdiv.com_areaの中にこの1行を追加して下さい。
background:url(壁紙のURL);
Related Archive

Comments

コメントエリアをスクロールする / スクロールを解除する

ユヅさん、初めてコメントさせてイタダキマス。いつもカスタマイズ参考にさせていただいてます。
コメント表示部のスクロール、かなり教えてほしかったので嬉しいです。さっそく私もカスタマイズしました~。どうもありがとうございました♪ヽ(=´▽`=)ノ

  • 050609
  • tico

早速使わせて頂きます~
TBもさせて頂きますね。本当に便利です♪
毎回コメントを見ながらのお返事作業には使い易いカスタマイズですよね。
ユヅさん、ありがとうございます。

●ninokoさん
こんばんは。
初コメありがとございます^^
自分のためだけのカスタマイズだったので、いらないかなーとおもったんですが、意外にコメントをいただいたのでエントリにしてみました^^

●ticoさん
こんにちは^^
トラバもどうもです♪
コメントがつくまでは余白が気になるかもしれませんが、便利さにはかえられません(笑)

  • 050611
  • ルカ

早速使わせて頂きました。
いつもコメントを見ながらお返事を書くのに
四苦八苦してたので、非常に助かりました!
ありがとうございます(*´ω`*)

●ルカさん
こんにちは。
コメントありがとうございます。
PTメンバーがいませんのSSが面白かったですw
うはwwwおkwww!!!

  • 050614
  • ササキ

うはwwwおkwww
って、なんですか?日本語ですか??

  • 050614
  • みえ

あー!なーるほどw」w」w」ですね。
コメントが複数あると お返事書く時に苦労してました。
ココにもスクロールバーつけたら、って思ってもみなかったです。

ご挨拶を飛ばしてしまい 失礼しました。汗
参考になるエントリーをありがとうございますm(__)m

●ササキさん
ルカさんへの愛のメッセージです^^^

●みえさん
こんにちは^^
2つとかなら支障はないんですけど縦に長くなってくるとちょっと手間がかかったりしますよね~。
参考になれば光栄です。

ユヅさん、こんにちわ。
パソ欲消滅してました(爆)そしたらネット界においては浦島太郎さん状態で(大げさですが・笑

お友達のところでこのカスタマイズを見つけて、早速とりいれてみました♪
いつもいつもお世話さまですっm(_ _"m)ペコリ

TBもさせていただきました。

  • 050624
  • カジ

ユヅさん、こんにちは。
可愛い、蜂蜜ドロップのテンプレお借りしてるのですが、
蜂蜜ドロップの場合、CSSの設定は何処にすれば良いのでしょう?
初歩的な質問で大変お恥ずかしいのですが、初心者につき、
教えていただけると大変助かります。
どうぞ宜しくお願いします。

●あぽこさん
こんにちは。
コメント&TBどうもです^^
ネットの情報スピードは速いので、しばらく繋いでいないとすぐ「えっ、なにそれ」なことがあったりしますねー(笑)

●カジさん
こんにちは。
蜂蜜・雨色ともに、「個別エントリー用HTMLテンプレート」の方で、説明しているHTMLの編集を行ってください。
CSSの変種ウランはテンプレート1つにつき1つだけなので、そのままコピペしてもらえればOKです。

  • 050625
  • カジ

ユヅさん、こんばんは。
無事に設定できました!スゴク嬉しいです。
本当に、ありがとうございました。

またまた、エントリーお借りいたしました♪

コメント枠内の背景も可愛くなって嬉しい~!

ユヅさん、ありがとうございました♪TBもさせていただきました。

●カジさん
上手くいきましたか^^
よかったですー!

●ひろみ☆さん
こんにちは^^
背景画像をつけると、空いたスペースも空白感を感じさせなくていいですね♪
TBも受け取りましたヾ(・ω・)wヌwワ

ユヅさん、こんばんわ^^

ユヅさんが教えてくださるカスタマイズは、とても便利なものばかりで、本当に有難いです。
こちらも早速、使わせて頂きたいと思います。
本当にありがとうございました。

TBさせて頂きました(*-人-)

ユヅさん、こんにちは!
もう一つのブログのテンプレートでもお世話になっているポムポムと申します。

今回はカスタマイズでもたくさんお世話になりました。
こちらの記事と、「エントリのリンクタグ」「INFOをつける」「プルダウン式ListMe!」のカスタマイズを参照させていただきました。
本当にありがとうございました。

もう一つのブログではリンクさせていただいているのですが、この度PhotologのほうでもBlogPeopleに登録させていただきました。
今後ともどうぞ宜しくお願いいたします。
どうもありがとうございました。
o(*´д`*)o

こんにちは
コメント表示部のスクロール参照させていただきました。
また新しいの楽しみにしてまーす♪

こんにちは、ritoといいます。
以前から素材の方は何度か使わせて頂いております。
コメント表示部のスクロール、参考にさせて頂きました!
その他にもテンプレート、INFOをつけるなどたくさんお世話になっております。
MyblogListにも登録、それからこちらの記事にトラックバックさせて頂きました。

どうもありがとうございました!

●はゆるさん
こんにちは。
ほとんど自分がやってきたことのアレンジばっかりだったりしますが^^;
何かのお役に立ってればヨシです(*´ー`*)

●ポムポムさん
こんにちは。
カスタマイズご利用報告あーんど、ブログピープルへの登録ありがとうございました^^
Photologも始められたんですね。
素敵な写真いっぱいとってくださいね♪

●じゅんさん
こんにちは。
コメントスクロールはインパクトはありませんが、地味に便利ではないかと思われますw

●ritoさん
こんにちは。
素材サイトの方にもずっといらしてくださってるんですね、有難うございますー^^
水玉の壁紙は私もお気に入りの1つです。よくある模様なのですが、そういうものこそ主張しすぎない可愛さを出すのに便利かなーと^^

初めまして、こんにちは♪

コメント部分のスクロール・・・
とっても参考になり、使わせていただきました。
ありがとうございます。m(__)m

まぁ、めったにないことだけど、
コメントがたくさんあった時には、
便利なので、とても助かります(^_-)ネッ

●さとみさん
はじめまして、こんにちはです。
参考になれば光栄です^^

文字が大きいところや、レスにレスがついてチャットみたいになっている時など重宝するかと思われます(笑)

はじめまして、こんにちわ♪

こちらの記事を参考にさせていただき、無事に取り付けられました

ありがとうございました。

とってもステキで、片付いてるブログです(*´・ω-)b wニwュ

うらやましぃ~

●miguさん
はじめまして、こんにちは。
取り付けお疲れ様です^^
サイドバーがごちゃごちゃしているのは苦手なので、不要なものはどんどん削除しています(笑)

はじめまして。

ユヅさんのテンプレートどれも素敵でw」w」w」。特にハリネズミのが気に入って、おもいきってsbを設置いたしました。
ありがとうございます。

そして、このコメントをスクロールをしようw」w」と思ったのですが。ずっと頑張ってみましたが、結局HTMLとCSSというのがどれのことなのかわからずw」w」w」。
尋ねるのも申し訳ないような初歩的な問題ですが、お教え願えたらw」w」w」と思います。よろしくお願いいたします。

  • 050921
  • いちこ

たびたびすいません。
管理ページにテンプレート編集ページがあるのを見落としていました。

解決しました。本当に申し訳ありませんでした。

  • 051004
  • ベアー

はじめまして。こんにちは。
質問があるんですが。
コメントブロックをHTMLに組み込むと書いてありますが、
私のブログはエキサイトブログなんですが、
どこに組み込んだら良いのかわからず、お手あげ状態です。
是非是非アドバイス、お願いします(*TдT*)

●ベアーさん
えーと・・・エキサイトブログは使ってないので、エキサイトでのテンプレートの編集は存じ上げません(苦笑)
そもそもエキサイトはテンプレートを自分で編集可能でしたっけ?
全体のテンプレ編集が可能ならば、コメント表示部分をHTMLで探してcom_areaと名づけたdivで囲んで~という感じになります。
エキサイトブログユーザー以外の人には見えない部分なのでそこは自分で調べていただくしか…

  • 051004
  • ベアー

お返事ありがとうございます。
エキサイトは編集が可能なんです。
もう少し頑張ってみます。
ありがとうございました!

ユヅさん!お久しぶりです。
またまた参考にさせて頂きました。ありがとうございます。

訳あってHN変更になっております。今後とも宜しくお願いします。

●ぼぅ母さん
こんにちは。
コメント有難うございます。
HN変更されたのですね^^
こちらこそよろしくお願いします。

こんにちは
以前からずっとこれが気になっていたので試してみました。
コメントが多くなると大変だったから、こういう風にするとやっぱり便利ですね。

最初全然上手くいかなくて、どうしてだと思ってたら

><div class="com_area">
><!-- BEGIN comment -->

どうやらこの順番が逆だった空のようです、ちょっとしたことなのに…違うんですね~

ではでは。

●Juraさん
こんにちは。
順番にはご注意下さい(笑)
BEGIN~ENDの部分は投稿されたコメントを繰り返す部分なので、その内側にしてしまうとコメント1つ1つに高さとスクロールを設定してしまうことに。

ぱっと一覧で見れないとか過去ログがわりに探したいとかの場合は不便かもしれませんが、レスはつけやすいので管理人のためのカスタマイズとなっております(笑)

たびたびお邪魔します~
スクロールさせるべくやってみたんですが、どうも反映されないようでw」w」w」。
ワタシがなんか余計なタグでも書いちゃったのかなぁw」w」w」(^^;;
お時間ある時でいいのでアドバイスくださいませ。よろしくお願いしますm(_ _"m)ペコリ

ごめんなさい~
今確認したら出来てました^^;
なんでこうなったのかは不明ですけどw」w」w」お騒がせしてすみません<(_ _)>

( ^-^)ノ(* ^-^)ノこんばんわぁ♪
コメント欄にスクロール 参照させていただきました
とても 見やすくなりました
ありがとうございます

はじめまして♪
コメント欄にスクロールバー 使わせていただきました
とても見やすくなってうれしいです
これからもお世話になると思いますが
どうぞよろしくお願いします

ユヅさん
いつも素材のほうで お世話になってます。
今日は コメントにスクロールバー
使わせてもらいました。
ありがとうございました。

●ゆりりさん、mayutanさん、Ranさん
こんにちは。
コメント有難うございました。
レスがつけやすくなるといいですね^^

コメントにスクロールがあるとレスをするときにいちいち上に上がって確認するの手間がはぶけました♪
ありがとうございました。

コメントのスクロールのカスタマ
使わせて頂きました。
今まではレス付けるのに上下いったり
して大変だったんですが
これで楽になりました
ありがとうございました。

これ、お友達のサイトでも採用していて、便利だなぁとおもったらやっぱりここでしたか(;^ω^)

早速採用させていただきました。
TBもさせてください!

はじめして。
色々とカスタマイズを参考にさせていただきました♪
沢山ありすぎたため、こちらの記事へトラバさせていただきましたのでよろしくお願いします。
あのがとうございましたm(_゛_)m

はじめまして、コメント、トラバ失礼します。チヨ子と申します!
コメント表示欄スクロールのチップスを参考にさせて頂きました。
長文レスが多いので、大変助かりました!ありがとうございます!

そして、遅ればせながら…テンプレもお借りしています。どれも素敵なデザインで、惚れ惚れしてしまいます!
画像をごりっそり入れ替えてしまったあとで申し訳ないのですが…報告させていただきます!

ではでは、失礼致します。

Comment Form

[icon]


Trackback

Trackback URI
このエントリーへのリンクを作成