過去の記事が増えてきて、非常に見づらくなってきましたのでスクロールバーを追加しましたよ。
なぜ、今更って?
それは、スタイルシートを良く知らなかったからです(爆)
いや、正確にはLeftyさんのコチラの記事やじゃすみんさんのコチラの記事のやり方は知っていて、一度はチャレンジしていたんですが、全てが一律の高さになってしまうので、カレンダーやgooメニューなど高さが無い物が間延びしてしまって満足できなかったのです。
もちろん、解決策としては私の場合クリア系テンプレートの左メニュー版を使っているので、これを左右メニュー版にしてgooメニューを消してしまえばよいのでしょうが、gooブログの規約的にグレーゾーンなのでやりたくなかったのです。(アドバンスでは規約違反でフリーでは触れられていなかったはず)
で、この前FireFoxのsageのCSSを弄ったときに衝撃のスタイルシートを見つけてしまったのですよ!
それはコレ
max-height
何をするものかというと、最大高さを決定する物なんですね。
つまり、それ以下の高さの物は変更されないわけなんです。
こ、コレだ!コレをmenuBGにほおりこめばOKだ!ということで早速やってみました。
赤字のところが追加した部分ですよ。
見事、カレンダーや、gooメニュー「ブログの作成・編集」欄が間延びせずにそれ以下のメニューだけにスクロールバーがつきました!
うん、これこれ、コレがやりたかったのです。
アドバンスのようにHTMLを弄れないので、各メニューでスクロールバーの有無を選択することはできませんが、フリー版でもなんとか見栄えのするCSSになったかと思います。もちろん願わくば、1年以上つづけるユーザーも多くなってきたのですから、gooブログ側に過去の記事に何らかの対策が欲しいところではあります。
あちゃぁ、やっちゃいましたね(笑)
てっきりこの手のスタイルシートはIEから採用されるものだろうから何のチェックもしなかったんですが、max-height、max-widthはIEだけ適用されてないみたいですね。みなさんご指摘感謝です。FireFox、OperaやNetscapeではスクロールバーが表示されますし、IEでは指定しない場合と同じ(従来どおり)なので特に問題はないかと思いますのでこのまま行こうかと思います。
max-heightの詳しい解説は下記をご覧下さい。
max-height-スタイルシートリファレンス
あれとかこれとか (Lefty):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カスタマイズに手をだしてみた。
海外ドラマが好き♪:真似してスクロールバーを
IEでは対応してないみたいです…。
http://blog.goo.ne.jp/info/rules2.html
>(14) gooブログが提供している事をあらわすパワードバイ(powerd by)バナーの削除
です。クリア系で左右メニューにすると、これって右に行きましたっけ?
探しましたわ・・。
対応してなかったのね・・・。
rexさん、もう一歩がんばってね!!
まぁIEの人はこの恩恵に預かれませんが、必要な部分が表示されない訳じゃないので、全く問題なし。
それと、シンプル系左右メニューでは「powerd by」は右メニューにつくので、左メニュー(ブログの作成・編集)を消しちゃう手は、規約違反にはならないと思います。
● シンプル系二段組・メニュー簡素化
http://blog.goo.ne.jp/mid_knight/e/efa2aa48585124625bea088ad9cc81f9
でも「メニュー簡素化」すると、IEでちらつくんですよ。
バギーなIEくんには困ります。
そう、シンプル系の左右メニューって左側にgooの編集メニューが来ちゃうんですよね。なので、左側にメニューをつけたい私としては左側を消して右メニューにするのはちょっと落ち着かないんです。
シンプル系ではなくカスタム系でやれば左メニューに出来るんですが、いまさらカスタム系のCSSに変更する気力が無くて(笑)
シンプル系の左右メニューで左を消して、右メニューを左メニューに変更できるのかな?
それができるのなら、やってみたい気もします。
CSSに詳しい方教えてください(笑)
# IEは<br style="clear:both">を上手に処理してくれないらしい
ご希望なら「シンプル系左簡素メニュー(横幅固定)のCSS」にもチャレンジしてみますけど?
ご教授願えますか?
# ちゅうか「可変」の方を「固定」から幅に関する変更箇所を落としただけに直したんですが