【CSS】スクロールバーを追加

過去の記事が増えてきて、非常に見づらくなってきましたのでスクロールバーを追加しましたよ。

なぜ、今更って？

それは、スタイルシートを良く知らなかったからです(爆)

いや、正確にはLeftyさんのコチラの記事やじゃすみんさんのコチラの記事のやり方は知っていて、一度はチャレンジしていたんですが、全てが一律の高さになってしまうので、カレンダーやgooメニューなど高さが無い物が間延びしてしまって満足できなかったのです。

もちろん、解決策としては私の場合クリア系テンプレートの左メニュー版を使っているので、これを左右メニュー版にしてgooメニューを消してしまえばよいのでしょうが、gooブログの規約的にグレーゾーンなのでやりたくなかったのです。（アドバンスでは規約違反でフリーでは触れられていなかったはず）

で、この前FireFoxのsageのCSSを弄ったときに衝撃のスタイルシートを見つけてしまったのですよ！

それはコレ

max-height

何をするものかというと、最大高さを決定する物なんですね。
つまり、それ以下の高さの物は変更されないわけなんです。

こ、コレだ！コレをmenuBGにほおりこめばOKだ！ということで早速やってみました。

BLUE_SKY_BLOGのCSS

/* メニューのリスト背景 */
.menuBg { background-color:#F4F7FF;
padding: 0px 0px 30px 0px;
text-align: left;
border:1px solid #57ACD5;
overflow : auto ;
max-height : 240px ; }

赤字のところが追加した部分ですよ。

見事、カレンダーや、gooメニュー「ブログの作成・編集」欄が間延びせずにそれ以下のメニューだけにスクロールバーがつきました！

うん、これこれ、コレがやりたかったのです。
アドバンスのようにHTMLを弄れないので、各メニューでスクロールバーの有無を選択することはできませんが、フリー版でもなんとか見栄えのするCSSになったかと思います。もちろん願わくば、1年以上つづけるユーザーも多くなってきたのですから、gooブログ側に過去の記事に何らかの対策が欲しいところではあります。

---

あちゃぁ、やっちゃいましたね(笑)
てっきりこの手のスタイルシートはIEから採用されるものだろうから何のチェックもしなかったんですが、max-height、max-widthはIEだけ適用されてないみたいですね。みなさんご指摘感謝です。FireFox、OperaやNetscapeではスクロールバーが表示されますし、IEでは指定しない場合と同じ（従来どおり）なので特に問題はないかと思いますのでこのまま行こうかと思います。

max-heightの詳しい解説は下記をご覧下さい。
max-height－スタイルシートリファレンス

トラックバック

あれとかこれとか　（Lefty）：CSSカスタマイズに手をだしてみた。
海外ドラマが好き♪：真似してスクロールバーを