機能充実、完全無料のSeesaaブログは、↑ここからすぐに作成できます。
2005年11月18日

サイドのコンテンツにスクロールバーをつける

サイドと限定する必要もないのですが。

表示が縦長になりすぎるのが嫌な部分にスクロールバーを設置するカスタマイズです。
コメント欄や過去ログ欄など、縦に伸びてしまいやすい個所に使うと効果的です。

基本的にどこにでもつけられると思いますが、
今回僕自身がコメント欄に設置するのでコメント欄を例にして説明します。

管理画面の
デザイン→コンテンツ→最近のコメント→コンテンツHTML編集
を開きます。

このHTMLの最上部の
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% if:content_recent_comment.type == 0 -%>
この部分に
<div class="sidetitle"><% content.title %></div>
<div class="side">
<div class="sidescr">
<% content.header -%>
<% if:content_recent_comment.type == 0 -%>
この赤文字部分を追加。

そしてHTML最下部の
<% /loop -%>
<% /if -%>
<% content.footer -%>
</div>
この部分に
<% /loop -%>
<% /if -%>
<% content.footer -%>
</div>
</div>
この赤文字部分を追加。

ここで最上部に追加している、sidescrの所はお好きな名前に変えて構いません。
HTMLはこれだけ。

次にスタイルシートを編集します。
デザイン→スタイルシート
を開き、使用中のスタイルシートを選択します。

表示されたスタイルシートに、
.sidescr{
overflow: auto; height: 200px;
}
を追加します。

ここでsidescrの所は上記のHTMLでつけた名前と同じにして下さい。
これでスクロールバーが表示されるようになるはずです。

もう少し縦長にしたいとか短くしたい、という場合は
スタイルシートに追加した部分、height: 200px;の200を増減させてやれば調節できます。


この記事へのコメント
スクロールバーが表示
連絡が遅れましたが、昨日設置いたしました。
うまくいきまし♪
アリガトウございました
とても解りやすく、初心者にとって良い教科書です。
色々勉強させてください
では^^/~

Posted by 黒ネコ at 2006年01月22日 04:31
コメントありがとうございます。

お役に立てて嬉しいです。
また何かあればよろしくお願いします。
Posted by ボボコフ at 2006年01月22日 10:12
こちらを参考にスクロールバーを設置してみました。
長い過去ログ等が短くなってすっきりしました!

ありがとうございました。
これからも色々と参考にさせていただきます!
Posted by 瑠奈 at 2006年01月25日 17:19
コメントありがとうございます。
また何かあれば気軽にどうぞ。
Posted by ボボコフ at 2006年01月25日 18:54
待ってました!
最近忙しくてなかなかブログカスタマイズできてないのが現状ですが、
がんばってやってみますーーー。
Posted by みや at 2006年02月06日 18:03
時間に余裕がある時にやってみて下さい。
Posted by ボボコフ at 2006年02月06日 18:09
ググって辿り着きました。
ブログのカスタマイズをやってみたかったので、こんな素敵なブログにめぐり合えて感激です。
手始めに、スクロール付けてみました。
成功です! ありがとうございました!
これからもお勉強させていただきますので、よろしくお願いします。
Posted by もも at 2006年02月15日 06:42
コメントありがとうございます。
そういっていただけると嬉しいです。
またいつでもどうぞ。
Posted by ボボコフ at 2006年02月15日 10:05
今年9月からブログ始めました。初心者です。seesaaブログですが、記事か自由形式に、スクロールバーを設置したいのですがどうしたもんでしょう。できればわかりやすく教えて下さい。
Posted by myu at 2008年12月13日 20:48
どうもです。

現在詳しく記事にする時間的余裕がないのですが、
基本的にこれと同様のやり方で出来ると思います。

具体的には、div class="text" の中に入れる感じだと思います。

・・お役に立てなかったら申し訳ないです。
Posted by ボボコフ at 2008年12月16日 15:42
ありがとうございました。
できました!!

他の記事も見てみたのですが
ここが一番わかりやすかったです。
Posted by Mr.ポポ at 2009年03月21日 03:11
検索で、いくつか見てまわったのだけど、
わかりやすくて、簡単に設置できたので
使わせて頂きました。
ありがとうございました。(∩.∩)
Posted by roni at 2009年09月06日 09:23
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバック

テンプレート変更
Excerpt: 桜の季節も終わったので、テンプレートも衣替えしました。&amp;#63734; Seesaaのテンプレート「こいのぼり」を元に、画像を変えただけなんですけど、全くの別物のようでしょう。イラスト素材はS..
Weblog: 思いたったら吉日
Tracked: 2006-05-02 21:35

スクロールバーを付ける
Excerpt: サイドコンテンツに、スクロールバーを設置しました。 スクロールバーを設置することで、コンパクトになりました。 コメント欄は、表示件数の設定を変えることで短くすることもできます。 その方法は、「コメン..
Weblog: カスタマイズ実験室
Tracked: 2007-02-02 08:02
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。