- ベストアンサー
テンプレート幅変更できない問題について
- シーサー無料ブログテンプレートのStripe Brownにおいて、両サイドの幅を広くするために幅の変更を試みました。
- 記事部の幅を変更するためにどこを修正すれば良いかわかりません。
- 詳しい方、ご教示いただければ幸いです。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
関連するQ&A
- ブログのメイン記事の幅を広げたいです
ブログのメイン記事の幅を広げたいです。 テンプレートはｆｃ２の共有テンプレートから cuteblog_08_seo を使用しています。 初心者なのでいろいろ調べながらやっているのですが 思うようにいきません。 まず、「外枠の設定」で全体の枠を広げ、 「枠組みの設定」でwrapperの枠を広げ 「メイン記事部分の設定」でentry_boxの枠を広げてみました。 全てプラス60の数値に変更しました。 全体とメイン記事の枠は広がったのですが メイン記事の枠が右にずれ、右サイドに重なっています。 そして、メイン記事と左サイドとの間に空間が出来ています。 この空間をなくしてメイン記事を左に寄せるにはどうしたらいいでしょうか。 以下にスタイルシートを載せています。 どうぞよろしくお願いします。 /* -- ▼外枠の設定▼ --*/ .container { width:890px; ←width:950px; に変更 background-color: #ffffff; margin:0 auto 0 auto; border: 3px double #fff9f4; text-align: left; } /* -- ▼メインとサイドの枠組みの設定▼ --*/ .side_right { float:left; width:208px; background-color: #ffffff; } .wrapper { float:left; width:676px; ←width:736px; background-color: #ffffff; } .main_cont { float:right; width:468px; background-color: #ffffff; } .side_left { float:left; width:208px; background-color: #ffffff; } /* -- ▼メイン記事部分の設定▼ --*/ .entry_box { border: 1px solid #ffc6ba; background-color: #ffffff; width: 464px; ←width: 524px;に変更 margin-bottom: 10px; margin: 0px 1px 5px 1px; text-align: center; overflow: hidden; }
- ベストアンサー
- ブログ
- 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;
- 締切済み
- ブログ
- IEでテンプレートの表示が変です
理由があって、全画面表示で左に110pxの余白、続いてcontainerの770pxを表示したいのですが無理でしょうか？ Firefoxだと大丈夫なのですが！IEだと表示が異なります。 IEで観ると左に110pxの余白、containerの770pxがセンターリングされてしまいます。見た目では110pxの余白+150pxの余白+770pxといった感じです。 ディスプレーのサイズによっても違うようです。15インチ、17インチともにＩＥでは思い通り表示されませんが、19インチだと表示されます。 #container { width :770px; line-height: 140%; text-align: left; margin-left: 110px; margin-right: auto;（削除すると19インチもセンターリングされてしまいました） padding: 0; } #blog { width: 540px; padding: 0; float: right; overflow: hidden; } #links { width: 190px; float: left; margin: 0 0 10px 0; padding: 0; font-family: verdana; font-size: 12px; text-align: left; }
- ベストアンサー
- ブログ
- スマホ画面で長い文章が、左端に短い幅で片寄る。
スマホ画面で長い文章の部分だけ折り返され、左端に短い幅で片寄ってしまいます。 これはどのように修正すれば良いのでしょうか。PCではいろんなブラウザで問題なく表示されています。 #header { width:100%; background:#cccc99; } #container { width:950px; margin-left:auto; margin-right:auto; text-align:left; } #col1 { width:740px; float:left; margin-left:20px; background:#383838; } #col2 { width:190px; float:left; } #footer { clear:left; width:100%; border-top:1px solid #8f8472; } 左側にメニュー（190px）を配置したレイアウトです。 h1,h2,P,liタグなど、とにかく長い文章の部分だけ、画面幅ではなく、短い幅で折り返され 左側に片寄っています。下記のxxxxxxxxの部分もそのようになります。 ul.abc { list-style:none; width:100%; margin: 0; padding: 0; } ul.abc li { float:left; margin-right:1em; padding: 0; } ul.abc a { float:left; line-height:85px; } ul.abc img { float:left; margin-right:.5em; vertical-align:middle; } <ul class="abc"> <li><a href="..." target="_blank"><img src="..." width="115" height="85" alt=""/><img src="..." height="1px" width="1px" border="0"> xxxxxxxxxxxxxxxxxxxxx</a></li> </ul><div style="clear: left;"></div> よろしくお願い致します。
- 締切済み
- CSS
- CSSで２段組を作ったときの背景について
CSSで２段組を作り、片方をメニューに、もう一方を本文で使います。 メニュー枠には背景色をつけるのですが、本文の長さに合わせてメニュー枠を表示させたいのですが、どうしても文字列にあわせての長さになってしまいます。 要はメニュー枠と本文枠のケツを揃えたいのですが、どのように設定したらよいのでしょうか？ 現在のCSSの組み方は、次のとおりです。 大枠を設定しています。 #container { width: 800px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; } ２段組（メニューと本文） .menu { float:left; width:190px; height:100%; margin: 0px; background:#000000 } .main{ float:right; width:590px; background-color:#FFFFFF; } ご存知の方、ご教授いただければ助かります。 どうぞよろしくお願いいたします。
- ベストアンサー
- CSS
- css: IEでsidebarが表示されない
cssで2カラムのページを左右を両方floatさせて作っています。 firefoxでは表示されるsidebar（背景、画像、テキストを含むすべて）がIE7では表示されません。clearfixの問題かと思いclearfixを入れてみましたがうまくいきませんでした。 どうしたらよいかご存知の方がいたら教えてください。よろしくお願いします。 ちなみにCSSの主要部分は以下のとおりです。 /*--- container ---*/ #container {position: relative; background:url(images/background.jpg) repeat-y; width: 800px; hight: 600px; padding: 0; margin-left: auto; margin-right: auto; text-align: left; border: 0; } /*--- header ---*/ #header {width: 800px; height: 107px; margin:0;} /*--- side-bar ---*/ #side-bar{position:absolute; background: transparent url(images/menu_bckgrnd.png) center center no-repeat; width: 150px; padding:0; float:left;} #side-bar ul { margin: 0; padding: 50px 50px 50px 50px; ist-style: none; width:30px;} #side-bar li { margin: 0; padding: 0;} #side-bar li a{ display:block;} #side-bar a:hover{position: relative; top: 1px; left: 1px;} /*--- main-nav: content area ---*/ #main-nav {background: url(images/design.png) top left no-repeat; width: 610px; margin-top: 0 0 0 150px; padding: 0 10px 0 30px; float:right;} #main-nav a:hover {position: relative; top: 1px; left: 1px; } #content1{ float:left; width:200px; margin: 0 2px 20px -20px; background:#fff;} #content2{ float:left; width:200px; margin: 0 2px 20px 2px; background:#fff;} #content3{ float:left; width:200px; margin: 0 2px 20px 2px; background:#fff;} /*--- footer ---*/ #footer {width: 800px; height: 100px; background: transparent; margin: -100px 0 0 0; clear: both; text-align:center; padding-top:50px;} /* -- clearfix -- */ .clearfix{ zoom:1; } .clearfix:after{content:'.'; display:block; visibility:hidden; height:0; clear:both;}
- ベストアンサー
- CSS
- ライブドアブログのサイドバー幅の変更について
色々調べてわからなかったので質問します。 ライブドアブログでサイドバーの幅を変更したいのですがどこを いじればいいのか分かりません 具体的にはサイドバーの幅を大きくし画面に背景などいらない感じに したいのです。 使用デザインはブログメディア（2ch,コバルトブルー,3カラム）を使用しています。 人さまのサイトなのですがこのブログ↓のサイドバーの幅にしたいです http://blog.livedoor.jp/togurotogenkai/ この人はメイン(真ん中)の大きさも変更してるみたい…？ 下の部分の数値のどこをどういじればいいのでしょうか？ /* =============================================== */ /** 02. Layout - レイアウト（全体の枠組み） */ /* ----------------------------------------------- */ body { margin: 0; padding: 0; background-color: #fff; } #container { width: 996px; margin: 0 auto; } * html #container { position: relative; top: -1px; } *:first-child+html #container { position: relative; top: -1px; } #content { background-color: #fff; padding-top: 6px; padding-bottom: 6px; } #main, #sub, #extra { overflow: hidden; } /* 3col */ .message-board-outer { margin: 0 215px; background: url.message-board-outer-2 { padding: 10px; background: url } #main { float: left; display: inline; width: 100%; } #main .column-inner { margin: 0 215px; padding-top: 2px; } #sub { float: left; display: inline; width: 206px; margin-left: -100%; background: url #extra .column-inner, #sub .column-inner { background: url} #extra .column-inner-2, #sub .column-inner-2 { padding: 7px 6px; background: url #extra { float: left; display: inline; width: 206px; margin-left: -206px; background: url .calendarheadbody, .sidetitlebody { margin-bottom: 10px; background: url ; color: #fff; } .calendarheadbody .calendarhead, .sidetitle { padding: 5px 0 7px 15px; text-align: left; background: url font-weight: bold; } .side { margin: 0 0 30px 10px; text-align: left; } /* ----------------------------------------------- */ /** clearfix */ #container:after, #content:after, ul.article-navigator:after, ul.archives-navigator:after, .article-body:after, .article-body .article-body-more:after, #trackback-form ul:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } /** hasLayout */ .blog-title-outer, .archives-title, .article-body, .article-footer, .article-title, .pager, ul, .index-navigator-outer { height: 1%; } /** peek-a-boo bug */ #trackback-form, #trackbacks-list, #comments-list, #comment-form { height: 1%; 作るのは乙女ゲーとかワンちゃんのブログです 調べてもかなり難しかったのでどうかよろしくお願いいたします(>_<)！
- 締切済み
- ブログ
- 右サイドバーが下に落ちてしまう
当方３カラムの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; } ---------------------------------------------------------------
- ベストアンサー
- ブログ
- フロートをした場合の縦方向のマージンの指定方法
下記のソースをIEとFFで表示した場合に違いが出てしまいます。 希望はheader、container、footerの間を１０ｐｘずつにしたいです。 http://www.geocities.jp/multi_column/float/06.html こちらのページに「clear したボックスには margin-top は指定しないこと」とあるので、content、sidebarの下マージンを１０ｐｘにしてみました。 IEではsidebarの下マージンが表示されません。 なぜかsidebarよりcontentが長くなるとcontentの下にマージン１０ｐｘが表示されます。 contentとsidebarのどちらが長くなっても同じように表示させるにはどのような方法がありますか？ また、この現象の原因を教えてください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http equiv="Content-Style-Type" content="text/css" /> <title>サンプル</title> </head> <body> <div id="header"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="container"> <div id="content"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="sidebar"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </div> <div id="footer"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> </html> <style> *{ margin: 0; padding: 0; } body{ text-align: center; } div#header{ width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 10px; background-color: #FFCCCC; } div#container{ width: 900px; margin-left: auto; margin-right: auto; } div#content{ float: right; width: 660px; background-color: #FFCCCC; margin-bottom: 10px; } div#sidebar{ float: left; width: 230px; background-color: #FFCCCC; margin-bottom: 10px; } div#footer{ clear: both; width: 900px; margin-left: auto; margin-right: auto; background-color: #FFCCCC; } </style> 長くなって申し訳ありません。よろしくお願い致します。
- ベストアンサー
- HTML
- floatを使用すると中央寄せにならない
CSSについて質問があります。 floatを使って2段組のレイアウトにしたのですが、 MacのIE5.2で見ると、floatを使ったdiv（container）だけ中央寄せではなく 左寄せになってしまいます。MacのSafariやFirefoxでは正常に見れました。 URL：http://fuma.xrea.jp/ /* CSSソース*/ html{height : 100%; width : 100%;} body{width : 100%; text-align : center; margin : 0px auto; padding : 0px;} #container{ margin : 0px auto; padding : 0px; width : 720px;} div#main{ text-align : left; width : 490px; margin : 0px; padding : 8px 0px; float : left;} div#side{ margin : 0px; padding-bottom : 8px; text-align : left; width : 230px; float : right;} div#copyright{ text-align : center; margin : 0px auto; padding : 10px 0px; clear : both; width : 720px;} /* HTMLソース */ <div id="container"> <div id="side">てすと</div> <div id="main">てすと</div> </div> <div id="copyright">test</div> <div align="center">を使っても中央寄せになりませんでした。 どうすれば、MacのIEでも中央寄せにできますか？
- ベストアンサー
- CSS
お礼
助かりました。 希望するサイズになりました。 ありがとうございます。
補足
画像だったとは知りませんでした。