• 締切済み

seesaaブログ 横幅を最大に CSS編集

seesaaブログのレイアウトの横幅を最大にしたいのですが、レイアウトが崩れてしまいます。 利用している、テンプレートは、シンプルオレンジ(右サイドバー)です。 次の部分を変更するだけでは、ダメなのでしょうか?アドバイスをお願いいたします。 以下のようなレイアウトを目指したいです。http://digitalkoukisin.seesaa.net/article/244271746.html #container{ text-align:center; margin: 0px auto 0px auto; padding:0px; background-position:right; width:800px;  ←ここ color:#856F51; font-size:12px; } 省略 #content { float:left; width:467px; text-align:center; } 省略 #links-left { } #links { font-weight:normal; width:253px; ←ここ float:left; margin-left:30px;

みんなの回答

  • kobliha
  • ベストアンサー率88% (120/136)
回答No.1

例示記事の通り #container と #content の width の数字に「同じ数字」を加える。 #links { font-weight:normal; width:253px; ←ここ float:left; margin-left:30px; はサイドバーであるから、マチガイ。

関連するQ&A

  • seesaaブログ 両サイドバーに書き換えたい

    seesaaブログで、楓 ヒーリングサウンド(右サイドバー)を両サイドバーに変更させたいと思います。 下記の過去記事を参考にし、スタイルシートをいじってみても、 プレビューを見ると全然左サイドパーが表示されずに困っています。 (私のやり方がまずいのだと思いますが) http://oshiete1.goo.ne.jp/qa1593295.html 上記の過去記事からは、下に記した二ヶ所を変更すれば良いとあったのでが、スタイルシートの知識も乏しいため、 具体的にこの二ヶ所をどのように変更すればいいのか解りません。 #links-left の中は#links の内容をそのままコピーだけではダメなのでしょうか? 詳しい方教えてください。 【楓 ヒーリングサウンド(右サイドバー)のスタイルシート】 #content { margin:10px 0px 10px 0px; float:left; width:536px; } #links-left { } #links { font-weight:normal; float:left; width:202px; margin:10px 0px 10px 24px; text-align:left; font-size:12px; text-align:right; }

  • 右サイドバーが下に落ちてしまう

    当方3カラムのSeesaaブログを使っているのですが、ある日突然右サイドバーが下に落ちてしまいました。初期値に変えても変化なしです。 container、links-left、linksの数値を変えてもダメでした。 下に落ちた右サイドバーの幅が妙に狭いのが気になるのですが・・・ スタイルシートの関係ありそうな部分を掲載しておきますので、ここがおかしいと思われたらご指摘をお願いします。 --------------------------------------------------------------- #container{ margin:0px auto 0px auto; width:100%; color:#5D5D5D; font-size:12px; font-family:Verdana; text-align:left; } .description { font-family:Verdana; font-weight:bold; padding:0px 10px 0px 0px; } #content { margin:0px 0px 0px 30px; float:left; width:40%; } #links-left { font-weight:normal; width:23%; float:left; margin: 0px 0px 0px 0px; text-align:left; } #links { font-weight:normal; float:left; width:23%; margin: 0px 0px 0px 30px; text-align:left; font-size:12px; } ---------------------------------------------------------------

  • CSSで全体をセンタリングしたい

    navi address main footer ↑このような4つの<div>をさらにcoverという<div>でくるんだ?レイアウトにしました。 下記のようなCSSにしたのですが、中央にすることができません。 同じような質問もたくさんあり、拝見したのですがどうもうまくいきません。 coverという<div>を作ったのが間違いなのでしょうか? ------------------------------------------- body{ text-align:center; } #cover{ width: 800px; margin-right=:auto; margin-left=:auto; text-align:left; } #navi{ float: left; width: 565px; height: 165px; } #address{ float: right; text-align: left; width: 235px; } #main{ width: 500px; clear:both; padding-right: 150px; padding-left: 150px; font-size: 10px; text-align: left; line-height: 20px; } #footer{ width: 500px; text-align:center; padding-right: 150px; padding-left: 150px; padding-top: 30px; } -------------------------------------------

    • ベストアンサー
    • CSS
  • CSSで、指定されていない空白が開く

    ヘッダーのロゴとその下のナビゲーションの間に、勝手に空白が空きます。 margin: 0;と設定しても空白が空きます。 section#header { width:80%; height: 63px; margin-right: auto; margin-left: auto; } img.LOGO { width: 700px; height: 63px; float: left; } p.intro { color: #383838; float: right; font-size: 120%; } section#links { font-size: 130%; width: 90%; height: 40px; margin-bottom: 40px; margin-right: auto; margin-left : auto; } nav ul li { display: block; float: left; width: 18%; height: 40px; margin-left: 1px; margin-right: 1px; border-left: #000000 2px solid; border-right: #000000 2px solid; } nav ul li a { display: block; line-height: 40px; width: 100%; height: 100%; text-decoration: none; text-align: center; } div#clear { clear:both; } CSSは以上の通り書きました。 このとき、section#headerで設定した、img#LOGOとp.introを含むヘッダー部分と、 section#linksで設定したナビゲーション部分に間が空いてしまいます。 どうすれば開かなくなるでしょうか。 閲覧環境はChromeです。

    • ベストアンサー
    • CSS
  • このCSSでおかしいところは?

    お世話になります。 またサイト制作で分からないところがでてきましたので助言をいただけたらなと思います。divで分けたcentermenu(630px)の中にテキストとリンクを貼ったボタンを設置したいと思っています。テキストは<p>要素で450pxの横幅にテキストを流し込み、残りの180pxの部分にボタン<a>要素として置きたいと思っています。ボタンはテキストに回り込ませて、テキストと下揃えにしたいのです。ところが現状ではテキストの下の段落になってしまいます。これはどこがおかしいのでしょう? どうか教えていただけないでしょうか? ■HTMLソース <div id="centermenu"> <p><img src="company-title.jpg" width="630" height="70"></p> <p>省略</p> <a class="shousai"><img src="shousai.jpg" width="123" height="30" align="right"></a><div align="right"><br> </div> ■CSSソースです。 div#centermenu{ width:630px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } p{ font-size: 12px; font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #666666; font-style: normal; line-height: normal; font-weight: normal; width:450px; } a:shousai{ padding-left:20px; padding-right:20px; float:right; }

  • CSSでボックスを中央に表示させたい

    CSSでボックスを中央に表示させたいのですが、 {float:left; width: 800px; heght: 100px; height: 100px; margin: auto; text-align:left;} こんな感じでできるかと思ったのですができません。 既存の質問にもあったように margin: auto; text-align:left; と入れたのですが、左寄せのままでした。

    • ベストアンサー
    • CSS
  • CSSレイアウトの本当の正しいやり方

    CSSでヘッダーとフッター付きの2カラムレイアウトを書籍のサンプルを見て行ないました。 表示は何も問題ないのですが、色々とサンプルレイアウトのサイトを見ていると「main」でleft-marginfを指定しているのはなく、floatを指定しているのが多いのですが、下記でも合っているのでしょうか。 #wrap { width: 700px; margin: 0 auto; text-align: left; } #header { color: #fff; } #menu { width: 160px; float: left; } #main { margin-left: 160px; padding: 10px; } #footer { clear: both; padding: 10px; }

    • ベストアンサー
    • HTML
  • ブラウザ間のCSSの表示違いにつきまして

    現在、趣味のホームページを作成しているのですが、IEでは意図したとおり表示されるのですが、firefoxではCONTENT内上部(float boxの上)に隙間のようなものができてしまって困っています・・・ CSSは以下になります。 #content { width: 680px; margin: 0 10px; padding: 0; background-image: url(../img/content-back.jpg); background-repeat: repeat-y; text-align: center; overflow: auto; text-align: center; } #left { float: left; width: 456px; margin: 0; padding: 50px 0; text-align: center; } #right { float: right; width: 224px; margin: 0; padding: 50px 0; background-color: #000000; text-align: center; } #footer { height: 60px; margin: 0 10px; padding: 0; background-image: url(../img/footer-back.jpg); background-repeat: repeat-x; text-align: center; clear: both; } CONTENTを親要素として、その中にleftとrightボックスを作成しました。 なお、overflow: auto;をなくしてcontent・left・rightに高さを指定したら隙間はなくなるのですが、共に内容に準じた高さ(auto)にしたくて・・・ どなたか解る方いらしたらご教示お願いします!

    • ベストアンサー
    • HTML
  • CSSでブラウザごとにレイアウトが崩れたりします。

    はじめまして。 現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。 細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■    ■=ヘッダー □□●●●●    □=メニュー □□●●●●    ●=コンテンツ(中身)1 □□○○○○    ○=コンテンツ(中身)2 □□○○○○    ▲=フッター ▲▲▲▲▲▲ このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。 そこで、問題の崩れているレイアウトですが、メニュー(□)とコンテンツ(○+●)の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー(□)の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。 ※コンテンツ(○+●)部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。 ちなみにこの現象はIE7のみでして、IE6やfirefoxなどでは正常に表示されました。 全てのhtmlファイルごとに高さを指定して、divを指定すれば、解決するとは思うのですが、テンプレートを使用しているため、なんとかこのまま解決方法を見いだせればありがたいのですが、、、 どうか教えていただけないでしょうか? body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFFF; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#FFFFFF; } /* 左側の設定*/ #left{ width:210px; height:auto; float:left; background-color:#FFFFFF; } /* 右側の設定*/ #right{ width:580px; height:950px; float:right; background-color:#FFFFFF; margin-bottom: 15px; } #sub_main { width: 550px; margin-left: 15px; background-color: #FFFFFF; margin-top: 10px; height: auto; margin-bottom: 5px; } #sub_main2 { width: 550px; margin-left: 15px; margin-top: 15px; background-color: #FFFFFF; height: auto; } #foot{ position:relative; width:100%; height:auto; background-color:#CCFFCC; clear:both; float: left; } ※sub_main1,2は●と○になります。 どうかよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSでライブドアブログのレイアウトがIEでだけ、崩れてしまう。

    CSSでライブドアブログの左サイドバーのレイアウトがIEで見ると、崩れてしまいます。 Fireboxなどでは、きれいに表示されますが、IEでは、左サイドバーの表示がはるか下方に表示されてしまいます。 下記のCSSに問題がないか教えていただけないでしょうか? 参考になりそうなサイトとして(1)(2)なども見たのですが、結局わからなかったです。 (1)CSSによる段組(マルチカラム)レイアウト講座 ​http://www.geocities.jp/multi_column/index.html​ (2)CSSバグリスト ​http://cssbug.at.infoseek.co.jp/ よろしくお願いします。 /********************************** =2.Common **********************************/ table#header{ width:100%; font-size:12px; color: #cffdcc; } table#header a{ color: #cffdcc; } table#header th{ width:1%; } table#header th img{ margin:2px 10px; width:132px; height:24px; } table#header td.catprbox{ width:1%; white-space:nowrap; } table#header td.catprbox span{ margin-right:15px; } table#header td.newstickerbox{ width:97%; text-align:right; padding-right:10px; } table#header td.startblogbox{ width:1%; padding-right:10px; white-space:nowrap; } table#header td.startblogbox img{ width:17px; height:16px; margin-right:3px; border:0px; vertical-align:middle; } #container{ width:800px; margin:0 auto; text-align:center; } #cgmmenu{ display:none; } #banner{ height:200px; border:solid #fff; border-width:6px; background:#240000 url(http://image.blog.livedoor.jp・・・・・) no-repeat; text-align:left; margin:0 auto; clear:both; } #banner a{ color:#fff; text-decoration:none; } #banner a:hover{ text-decoration:underline; } #banner h1.blogtitle{ padding:80px 30px 5px; font-size:20px; } #banner div.description{ width:500px; padding:0 30px; line-height:135%; font-size:12px; color:#fff; } #blogcontainer{ background:url(http://image.blog.livedoor・・・・) 0 0 repeat-y; border:solid #fff; border-width:0 6px 0; padding:0 0 30px; margin:0 auto; height:1%; } #wrapper{ float:left; width:605px; } #content{ float:right; width:420px; text-align:left; background-color:#F9F3EE; } #contentin{} #left{ float:left; width:180px; } #right{ float:right; width:178px; } #lefttop , #leftbody , #leftbottom , #righttop , #rightbody , #rightbottom {} #footer { background:url(http://image.blog.livedoo・・・・) 0 0 no-repeat; border:solid #fff; border-width:0 6px 6px; height:46px; } #outfooter{}