« 北朝鮮が地下核実験を実施したと発表 | トップページ | 「URL訪問者分析占い」をやってみました。 »

2006年10月11日 (水)

スタイルシートCSSをいじくって、サイドバーにスクロールバーを設置する。

target="_blank">ひろーるさんのブログをみて、サイドバーの「月別アーガイブ」と「おともだちりんく」
にスクロールバーがついているのがとってもうらやましく感じました。


ドリコムRSSに登録しているブログを全部表示するととてもながくなってしまったり、韓国関係リンクが、
とっても長くなったりしてしまっていたので、


私もスクロールバーを導入してみました。


○ドリコムRSSの場合


当初のコード


style="MARGIN-RIGHT: 0px">

<script "#FF0000">language="javascript" "#0000FF">src="http://list.blog.rss.drecom.jp/maro/"
charset="UTF-8"></script>



を、赤と青色の部分を


style="MARGIN-RIGHT: 0px">

<div class="blogroll">

<script "#FF0000">language="javascript"></script>

<script "#0000FF">src="http://list.blog.rss.drecom.jp/maro/"></script>

</div>



こんなふうに変えます。


多分、BlogPeopleなどのほかのサービスでも応用できると思います。


そしてスタイルCSSに、


style="MARGIN-RIGHT: 0px">

.blogroll{

  marigin:0;

  padding:0;

  overflow:auto;

  height:300px;

}



を追加します。コレで完成です。


次にリンクリストの場合です。


○「韓国関係リンク」にサイドバーをつけたい場合


基本情報の、リストの名前「韓国関係リンク」の後ろに<div
class="overflow">をつけて名前を


style="MARGIN-RIGHT: 0px">

「韓国関係リンク<div class="overflow">」



にする。


サイドバーのその下のリンクリスト、私の場合は「QRコード」ですがコチラの名前も


style="MARGIN-RIGHT: 0px">

「</div>QRコード」



にします。この間にサイドバーを設置しますよって言う設定です。


そして最後にスタイルシートCSSに


style="MARGIN-RIGHT: 0px">

.overflow{

padding: 5px;

overflow: auto; height: 400px;

}



を追加します。すると現在のようにスクロールバーが設置されます。


思ったよりもいい出来でかなり納得です(*`▽´*)


参考にさせていただいたページ


ドリコムRSSにスクロールバーをつける→ href="http://blog.livedoor.jp/kyorecoba/archives/151488.html"
target="_blank">続々・"Blog Roll"にスクロールバー


リンクリストにスクロールバー→ "http://non.cocolog-nifty.com/cat/2004/03/post_34.html"
target="_blank">サイドバーのスクロール


==========================

韓国語の勉強時間 合計【 316.5 】時間

+0.5 NHKラジオ聞きました

今日のモチベーション【 70 】%

+0 仕事ではしごをはずされました。納得が出来ないです!


|

« 北朝鮮が地下核実験を実施したと発表 | トップページ | 「URL訪問者分析占い」をやってみました。 »

ブログ@カスタマイズ」カテゴリの記事

コメント

こんにちは!
サイドバーにスクロールバーを設置するとスマートになりますよね。
で...今気付いたのですが、私が使ってるブラウザ「Firefox」では反映されてませんでした。でも「Internet Explorer」で表示すると、ちゃんとスクロールバーになってます。^^
ブラウザによって反映され方が違うんですねぇ。。^^;;

投稿: makoto | 2006年10月11日 (水) 12:46

にょにょにょーーー

>私が使ってるブラウザ「Firefox」では反映されてませんでした

そうですか~_| ̄|○
またググッて対策を見つけたいと思います。
ご指摘ありがとうございます

投稿: まろ | 2006年10月11日 (水) 21:45

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: スタイルシートCSSをいじくって、サイドバーにスクロールバーを設置する。:

« 北朝鮮が地下核実験を実施したと発表 | トップページ | 「URL訪問者分析占い」をやってみました。 »