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

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

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

▼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
このエントリーへのリンクを作成
050609
コメント表示部をスクロールさせる | LOVED*TIME
久々にsbのカスタマイズです。コメント表示部分をスクロールさせて、お返事コメントを書きやすくさせていただきました。ユヅさんにはいつもお世話に成って感謝です
050609
sbカスタマイズ | Everymama*Blog
コメント表示部をスクロール表示できるようにカスタマイズ。blog*citronさんで教えてもらいましたヽ(=´▽`=)ノおかげで、コメントを見ながらレスが可能に♪非常に快適~(´▽`)はぁぁ・・♪(うっとり)sbに限ります...
050610
コメント表示部をスクロールさせる | ひとりごと
久し振りに、sbカスタマイズです。ってか、そろそろ全面リニュしたいんだけど、なかなか出来ません(^^;;で、今回のカスタマイズは超簡単♪blog*citronさんのコメント表示部をスクロールさせるコメント部分が長くなる...
050611
コメント表示部をスクロールさせる | *METEORA*
コメントを見ながらのお返事書きに、いつも四苦八苦。順番に見てるつもりが、飛ばしてたりするんですよねorzいつも、何度も何度もスクロールして確認してました。そんな私にとって、超便利なカスタマイズをblog*citr...
050612
カスタマイズ | Sometimes☆
今日もカスタマイズしてみました。参考にさせていただいたのは、blog*citron | 個別エントリへのコピー用リンクタグとblog*citron | コメント表示部をスクロールさせるです。
050616
コメント表示部をスクロール | Minimani Life
コメント部分をスクロール表示できるようにカスタマイズ。参考サイトblog*citronさん/コメント表示部をスクロールさせるユヅさん、いつもお世話になりありがとうございます^^
050619
コメント表示部分 | Blue-blue
コメント部分にスクロールバーをつけてみました。設定の説明は、blog*citronさんを参考にさせて頂きました。ここではそんなに大量にコメントがつくことは滅多にないのですが(笑)、スクロールバーがあると返信するの...
050619
スクロール | [cc*]CECiLE*
コメントと、トラバのところをスクロールを入れてみました。例により、blog*citron様にお世話になりました。*コメント表示部をスクロールさせる
050622
コメント表示部をスクロールさせる | Any*Blog
コメント表示部をスクロールできるようにしました。blog*citronさんにはいつも大変お世話になっています☆感謝!
050623
コメント表示部をスクロール | c o p o : b
お友達のところで見かけてたこのカスタマイズ。どこで紹介してくれてるの?!と思ったらw」w」w」やっぱりユヅさんでしたか☆さすがですっ。ありがとうございますっ!コメントのスレッドが長くなっちゃったときにも...
050625
コメント表示部をスクロールさせる。 | ufufu*blog
またまた、sbいじりしちゃいました。blogにコメントを頂いた際、スクロールがなが~~~~~~くなってしまうトコロにストレスを感じてしまい・・・
050701
コメント表示部をスクロールさせる | Hayuru*days
コメントたくさん頂いて、とーってもうれちーでございまする( ̄∀ ̄*)で、そんなときの強い味方っっっ!(?)コメント表示部をスクロールさせるワザをハッケーン!!!blog*citronサマ。ありがとうございます。尊敬...
050704
コメント表示部をスクロール!&背景 | ruriruka*blog
またまたblog*citronさんにお世話になりました。今日はコメント表示部をスクロールさせてみようかと思ってやってみました。まあ、スクロールさせる程のコメントは無いのですが(笑)素敵な方法だな!と思ったので。コ...
050721
夏っぽく? | ココロモヨウ。
カスタマイズにあたって参考にさせていただきました
050804
ちょっと、カスタマイズしてみました。 | 素直な私でいたい☆
たぶん、お気づきの方がいらっしゃると思うけれども・・・昨日から、少しブログをいじってみました。ブログ全体のスクロールの部分を変えてみたり、文字をスクロールさせました。そしてblog citronのユヅさんのブログ...
050823
カスタマイズ | *ふぇれちょ*
だいぶ形になってきましたでしょうか?ということで…:カスタマイズの方法やスクリプトを貸して頂いたサイト様のご紹介照れ:いっぺんにやらずにちょこちょこやらなきゃだね汗汗:どっぷり疲れちゃいましたむきゅ:
050901
テンプレ模様替え♪&カスタマイズ | ☆☆MemoLo~gu♪♪
カスタマイズして、何日も経ってないってのに、ピンク[:next:]ブルーに模様替えしました∵ゞ(≧ε≦o)ぶっ前はぐちゃぐちゃだった、細かいサイズをある程度きちんと変更したので、わりと、真ん中表示になりました( ´...
050916
カスタマイズ | SEVEN COLORS DROPS
前回、ブログのリニューアルの時に色々お世話になりました。遅くなりましたが、忘れないうちにエントリー。∴ みかんの箱日記 | シングルカラムにしよう!(その1)∴ [b*c]blog*citron | コメント表示部をスクロ...
050918
コメント表示部分をスクロールさせる | ぼのブログ
こちらを参考にさせていただいたおかげで、レスを快適につけることができそうです。%nありがとうございました。
050919
3連休だから Prt.2 | good boy !!
時間のあるうちにやれる事はやってしまえって事で、せこせこカスタマイズに励む。つっても簡単なのでものの3分で事は済んでしまったけど。その1:BBSのスキン変更レスの方にも画像が添付できるものに変えました。...
050924
コメント部分にスクロールバー | 朝が来て 夜が巡って
ありがたい事に、コメントをたくさん頂く事があります。いつも嬉しく読ませていただいているのですが、コメントが多ければ多いほど、縦長に表示されてしまうんですよね;パッと見でコメントが読めるので見やすいの...
051030
Serene Bach カスタムメモ | ★ぷちチョキンバコBLOG★アフィリエイトで高収入
私が導入した Serene Bach のカスタムをご紹介します。(自分が忘れないためのメモです。)Serene Bach カスタムメモページナビゲーション展開プラグインうにゅうにゅ Read Moreプラグインツリー化プラグイン Ver.0....
051118
モブログ導入♪& | Memo
blog*citron | モブログ導入とカスタマイズneige essai | SereneBachでモブログ上記エントリを見ながらモブログ導入しました。blog*citron様のはsb用で強制公開が出来ませんでした。なのでneige essai様でSereneBach...
051217
Serene Bach カスタマイズ | かわいいー物だいすきな会。
毎回、バージョンアップするたびにモブログの設定を忘れて、テンプレート変えてはどれをどーしたらいいのかまたまたど忘れ。なんで、自分用にメモを…【neige essai】SBでmoblogを自動公開SereneBachの「init.cgi」の...
051227
カスタマイズ | When someone's wish is fullfilled...
SereneBachをカスタマイズしました。色々なサイトさんを参考に処理開始。なかなか良い物ばかりだとは思いますので是非機会が有れば見てみて下さいね。
060428
コメント部分をスクロールさせる | feel,recollection...blog
コメント部分にスクロールをつけました。レスを書く時は書いて下さったコメントを見ながらお返事を書いてるんだけど、ページを上げ下げするのが面倒(笑なので、コメント部分にスクロールをつける事で楽に!!利用...
060501
コメント欄をスクロール表示 | どらの戯言【本館】
コメントを見ながらお返事をしたい時、このカスタマイズは非常に良いですね♪お友達のサイトでも採用されていたので、探していたらありました。「blog*citron」様の「コメント表示部をスクロールさせる」このサイ...
060919
移転と共にカスタマイズのまとめ | Gimlet
移転と一緒にカスタマイズも沢山した部分があるので今現在のものを書き出したいと思います。JUGEMとFC2ブログの方でも幾つか取り入れさせていただいていたので重複してるものもありますが・・・と思ったんですけど...
061214
コメント表示部分をスクロール! | LYRICAL MURDERER
ただでさえお喋り大好き★(テヘ)でコメントが無駄に長いあちきには、レス書いて、戻って、レス書いて…の作業が面倒でしゃーなかったんですが、漸く重い腰を上げてカスタマイズ!とはいっても自分でなんとか出来る...