• ベストアンサー

スクロールバー

gooブログアドバンスでカスタムブルーのテンプレ使ってます。 左のサイドバーに縦のスクロールバーを設置したいのです サイドバー全部ではなくENTRY ARCHIVE(過去の年月)だけに設置したいのですが方法が分かりません menuBgに下記のソースを設置したらサイドメニュー全体になります overflow : auto ; /*スクロールバー*/ height : 185px; /*バーの高さ範囲設定*/ 色々やって見ましたが分かりませんのでご存知の方、ご教授できませんか?

  • -777-
  • お礼率58% (126/215)

質問者が選んだベストアンサー

  • ベストアンサー
  • Muller3
  • ベストアンサー率81% (800/979)
回答No.1

アドバンスだったらHTMLも編集できますね? >menuBgに下記のソースを設置したらサイドメニュー全体になります HTMLにおいて、サイドバーの項目全てでclass="menuBgを使っているためです。 ENTRY ARCHIVEだけに違うスタイルを適用するには、違うclassを与え、スタイルシートでスタイルを指示しなければいけません。 HTMLの <div class="menuBar">ENTRY ARCHIVE</div> <div class="menuBg"> 部分を <div class="menuBar">ENTRY ARCHIVE</div> <div class="menuBgEntryArchive"> とでもして、 スタイルシートの中に、 .menuBgEntryArchive { padding: 2px; width: 180px; text-align: center; overflow : auto ; height : 185px; } を追加、でどうでしょう。 アドバンス使ってないので未検証ですみませんが。

-777-
質問者

お礼

どうもありがとう御座いました 完璧でした。 いい勉強になりましたm(__)m

関連するQ&A

  • CSSだけで、テーブルにスクロールバーを表示させたいのですが…

    CSSを使い、テーブルにスクロールバーを表示させたいのですが <div style="height:60px; width:300px; overflow-y:scroll;"> <table border=1 width=300> : </table> </div> 上記の方法だと確かにスクロールバーは表示されるのですが、出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか? 出来れば、スクロールバーの色を変更して、横(X軸)のスクロールバーも消したいのですが… CSSで .scroll { overflow: scroll; visibility: visible; height: 100px; width: 140px; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。 ご存知の方教えて下さい。

    • ベストアンサー
    • HTML
  • スクロールバーのデザインを変えたい

    CSSの設定で div#information { height: 150px; overflow: scroll; } という風に記述した時に現れるスクロールバーのデザインを変えたいのですが、IE以外でも対応している方法はないでしょうか? スクロールバーのデザインを変えるいい方法がありましたら教えて下さい。

    • ベストアンサー
    • HTML
  • フロートしたボックスのスクロールバー

    メインのフロートボックスに垂直スクロールバーをつけたいのですが、 上手くいきません。 スタイルシートに (メインのボックス↓) .l_main { margin: 0px; padding: 0px; width: 600px; height: 550px; float: right; overflow:auto;(←スクロールバーの要素を記述) } こう記述しているのですが、ページ内容によってものすごく縦長になったり、いらぬ余白が出来たり。 独学の上、CSSの参考サイトからコピペなどして適当にやっているので分かりません。よい方法を教えてください。

  • クロームとサファリでスクロールバーが表示されない

    Macのグーグルクロームとサファリでスクロールバーを表示させる方法を教えて下さい。 ちなみにWindowsでは表示されていると思うのですが・・・ 下記のように、縦幅を指定し、その中で入り切らない文章を下にスクロールさせるようなページを作成したのですが、ブラウザによりスクロールバーが見えないとなると、人によっては下にまだ内容がある事に気づかないという事が起こってしまうのではと心配です。 #content { text-align: left; padding: 0px; width: 340px; height: 500px; float: left; margin: 0px; overflow-y: auto; overflow-x: hidden; } 何かやり方があれば是非教えて下さい。 宜しくお願いします。

    • 締切済み
    • CSS
  • ブログサイドバーにスクロールバー

    ブログのサイドバーにスクロールバーを設置したいのですが やり方がわからず困っています。 スクロールバーを設置するタグを教えて下さい!! 初心者なので説明をしていただけるとうれしいです。 宜しくお願いします。

  • <div style="overflow">でこんなことは出来ませんか?

    <div style="overflow: auto; height: **px;width:**px;"> というタグについて教えてください。 <div>で囲まれた内容が、height: **pxに満たない場合、 スクロールバーは出ませんが スペースはheight: **px分、空いてしまいます。 やりたいことは、<div>で囲む内容が height: **px未満の場合はスペースもあけず スクロールバーも出さず、overflow未指定の状態にする。 height: **pxの場合はheight: **pxで高さを固定して スクロールバーを出す。ということです。 何か良い方法はありませんでしょうか。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • overflow:auto; の記述で横スクロールバーが表示される

    gooブログでカスタムテンプレートを使用しています。 縦のみにスクロールバーをつけたくて 「overflow:auto;」 の記述をいれました。 Operaとfoxでは縦のみにスクロールバーが表示されます。 ですがIE6だけ、縦にも横にもスクロールバーが表示されます。 どうすれば、IE6でも縦のみのスクロールバー表示になりますか?

  • Firefoxスクロールバーの有無でページがずれる

    Firefoxスクロールバーの有無でページがずれる 縦の長さが長いページから短いページに切り替えるとき、スクロールバーの関係で左右にガタガタずれて見えるためcssで html{ height:100%; margin-bottom:1px;} と入れてみました。(ネットで探したものです) そうするとOperaとgoogleとSafariではずれなくなったのですが、Firefoxだけ相変わらずずれます。 overflow-y:scrollにするとずれませんでしたが、IEで見たときスクロールバーが二重に見えたので、この方法は避けたいです。 Firefoxでもガタガタずれずに切り替えられる方法はありませんでしょうか? よろしくお願いします。

  • 2カラムサイト高さ100% 左右別々にスクロール

    サイトの構成は2カラムのみのサイトで、左にナビ、右にコンテンツになります。 左右どちらもheight100%で、両方とも縦に別々のスクロールを行いたいと考えております。 そこで、main(左)とsub(右)を作りfixedで固定し、100%にしました。 その中に固定したエリアを導入しスクロールバーを表記させようと思い下記のような記述をいたしました。 main_sとsub_sのheightをpxで表記するとうまく動作します。 しかし、%にするとスクロールバーが表示されずfixedの影響で画面が固定されてしまいます。 #main{ float:left; width:400px; position: fixed; background-color:pink; height: auto; min-height: 100%; } #main_s { height:90%; overflow-y:scroll; } #sub{ float:left; width:300px; position: fixed; background-color:yellow; height: auto; min-height: 100%; margin-left:400px; } #sub_s { height:90%; overflow-y:scroll; } 左右のカラムを別々にスクロールをさせたいのですが、お力添えいただけたら幸いです。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • DIVでスクロールバーを作ったのですが…

    DIVでスクロールバーを作ったのですが… ページが表示された時にスクロールバーの見えない部分(最下位)を表示させるにはどぅしたら良いのでしょうか?? 例:最下位のcccの部分 div.txt { border: solid 1px #808080; /*1pxには線の太さ、その後は色*/ width: 330px; /*横幅*/ height: 135px; /*高さ*/ padding: 0.5em; /*空白の大きさ*/ overflow: auto; /*スクロールバーの出方*/ } <div class="txt"> <p>111</p><br> <p>222</p><br> <p>333</p><br> <p>444</p><br> <p>555</p><br> <p>666</p><br> <p>777</p><br> <p>888</p><br> <p>999</p><br> <p>000</p><br> <p>aaa</p><br> <p>bbb</p><br> <p>ccc</p><br> </div> これは、可能ですか? よろしくお願いします。