サイドバーにあるリストをスクロールさせる方法

何度か皆さんからご質問いただいたこともあり、自分なりのまとめという意味も含めて、ここに書いておくことにします。分かりにくいところは随時編集して、なるべく分かり易く、という方針でいきたいと思います。ご批評下さい。

▼BlogPeopleなどのリンクリストの場合

下記のCSSコードをコピーするのが最も簡便かと。

<style type="text/css">
<!--
.blogpeople-main {
overflow: auto;
height: 250px;
}
.blogpeople-tbp {
overflow: auto;
height: 250px;
}
.myclip-main {
overflow: auto;
height: 250px;
}
.mybloglist-main {
overflow: auto;
height: 250px;
}
-->
</style>

「250px」の部分は、お好みで変更してください。

設置場所（ペースト先）は、普通headタグ内なんでしょうが、HTML文法に拘らないのならどこでもいいでしょう。
（ココログの場合、マイリストの、テキスト表示設定済みのメモ欄など）

最初と最後のstyleタグやコメント記号を除いて、既存のstyleタグ内や外部CSSファイルに追加してもOKです。

----

これが一般的な方法かと思いますが、Opera 6系では overflow:auto; が overflow:visible; として扱われてしまい、しかも height プロパティだけは効いてしまうので、次のリストと重なってしまうという問題があったりもします。なにかいい方法があるといいのですが...

# 当ブログも含め、ほとんどのサイトで overflow:auto; で行っちゃってるみたいですね

----

また、最後の .mybloglist-main {...} というのはオマケで、そのままじゃスクロールしません。

MyblogListだけは（他と違って対応が遅れているので）、もう少し細工をしてやる必要があります。

具体的には、MyblogList用のjavascriptコードを、下記のような感じで、divで囲んでやる必要があります。

<div class="mybloglist-main">
<!-- ここにMyblogList用のjavascriptコード -->
</div>

なお、「mybloglist-main」ってclass名は適当にでっちあげただけなので、divに付けたclass名とCSSのclassセレクタ（「.」で始まる部分）が一致さえすれば、ここは何でもOKです。

----

蛇足ですが、このdivで囲む方法は、MyblogListだけじゃなくて、どんなコンテンツにも応用可能なので、そのコンテンツ固有の名前を付けてやりさえすれば、そのコンテンツだけに任意のスタイルを適用してやることができます。

例えば、Blogpeopleのトラックバックピープルなんかは複数あることも多いと思いますが、TBP純正のjavascriptコードをdivで覆ってやって、それぞれに別の名前（たとえばclass="tbp-finding-neko"とかclass="tbp-neko"とか？）を任意に与えてやれば、

.tbp-finding-neko {
ovarflow: auto;
height: 200px;
border: double maroon;
}
.tbp-neko {
ovarflow: auto;
height: 250px;
border: double magenta;
}

みたいな感じで追加してやれば、リスト毎にスタイルを変えることもできます。

# この場合、.blogpeople-tbpでのスタイル指定を修正したり消去する必要があるかもしれません。

----

▼Typepad純正のマイリスト（私リスト/リンクリスト？）の場合

ココログなどのTypepad系ブログ純正のリストの場合、

.sidebar ul {
overflow: auto;
height: 250px;
}

としてやるぐらいしかないんでしょうか...こうしてしまうと、全てのリストの高さが250pxになってしまうんですよね(T_T)

IE以外のブラウザなら、heigtの代わりにmax-heightを使ってやるだけで、指定高さ以上になったリストだけにスクロールバーがついてくれるのですが...orz

# javascriptを使えば、それらしきことはできると思いますが、ちょっと面倒なのでやってません。

MTやココログのプロコースなどのように、テンプレートを自分でいじれるのなら、リストごとにidやclassを振ってやることで解決するんですけどね...

ということで、まだいい方法を知りません(T_T)

いい方法がありましたら、是非、御一報ください。