seesaaブログのデザイン変更

このQ&Aのポイント
  • seesaaブログのデザイン変更方法とは?
  • デザイン一覧でクリックしてタグを見るとわからない
  • デザインシートに関するタグを勉強できるサイトはある?
回答を見る
  • ベストアンサー

seesaaブログのデザイン変更

seesaaブログのデザイン変更 今使っているデザインは両側が大きく開いています。 スペースがもったいないのでデザイン一覧でクリックしてタグを見ると・・・ わかりません(沈没) 少し左右に広げたいのですが、どこの width をどれくらいに設定するのでしょう。 これかな。 #container{ text-align:center; margin:0px auto 0px auto; padding:0px; width:900px; } と思ってやってみたら、左に寄っただけでした(--) また、デザインシートに関するタグだけをまとめて勉強できるサイトが もしあれば教えてください。

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

  • ベストアンサー
  • thila
  • ベストアンサー率73% (45/61)
回答No.1

ページ全体の様子がつかめないので明確な回答はできませんが、こちらのページを参考にちょっと思ったことを。 http://www.blogcustomize.com/customize_total_design.html 左に寄っただけ、というのは、元の状態から中央から少し左寄りになったというイメージなのかなと思いました。 もしそうであれば、多分contents内部のlinks-left部分、content部分、links部分それぞれにwidthが指定されているのではないかなと思います。 もし指定されていたのなら、content部分のサイズを、container部分を拡張した分だけ足してみてはいかがでしょうか。 content内でもwidthが指定されているものがあれば、表示を見ながらサイズ調整をしてみて下さい。 想像の範囲の回答なので、見当違いでしたらごめんなさい。

kaitenzusi
質問者

お礼

わかりやすいサイトを教えてくださりありがとうございました。 勉強してみます。

関連するQ&A

  • 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;

  • 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
  • DreamweaverMXのデザインビューが一部表示されなくなる

    DreamweaverMXのデザインビューが一部表示されなくなってしまい困っています。 どうして表示されなくなったのか具体的に言うと、 3カラムのレイアウトをdivを使いCSSで作成していました。firefoxで見るとフッターがメインコンテンツの上部にきてしまっていたので、高さを指定してあった「右メニュー」や「左メニュー」、また「メインコンテンツ」の部分のdivの高さをすべて「auto」にし、フッター部分のCSSに「clear: both;」を記入し、修正を図りました。 これでその問題は解決されましたが、その後、DreamweaverMXのデザインビューの一部(メインコンテンツ、3カラムの真ん中部分です。)が途中から真っ白になってしまっていて、そこに書かれていたテキストや画像等すべて真っ白で、デザインビューで作業できなくなってしまいました。 真っ白でも、その部分に書いたテキストはマウスで反転させたりすると黒くその部分が反転するので、テキスト等はそこにあるようですが、真っ白ですから、作業ができません。 コードビューで作業できますが、それではDreamweaverMXを使う意味がありません。デザインビューで作業できれば、非常にスピーディーに出来るので、こうなってしまい非常に困っています。 「すべてのビジュアルエイドを非表示」にしたら直ったこともあり、そうして見ましたが、今回は駄目です。 CSSコードの書き方に問題があるかもしれません。 以下が、そのCSSコードです。 /* container */ #container { width: 900px; margin-right: auto; margin-left: auto; text-align: left; height: auto; } #incontainer { width: 700px; float: left; height: auto; } /* メイン */ #main { float: right; width: 480px; padding: 10px; height: auto; } /* 左メニュー */ #ml { float: left; width: 200px; height: auto; } #box-ml { padding: 0px 0px 10px; width: 200px; float: left; height: auto; } #ul-ml { margin: 0px; padding: 0px; display: inline; text-indent: 0px; list-style-type: none; text-align: left; } #li-ml-kg { margin: 0px; list-style-type: none; padding: 0px; display: block; line-height: 26px; background-image: none; text-indent: 20px; background-color: #66CC00; border: 1px solid #CCCCCC; color: #FFFFFF; font-size: 13px; } #li-ml a { margin: 0px; list-style-type: none; padding: 0px; display: block; line-height: 25px; background-image: url(buttons/li-bg.gif); text-indent: 20px; font-size: 13px; } #li-ml a:hover { margin: 0px; list-style-type: none; padding: 0px; display: block; line-height: 25px; background-image: url(buttons/li-bg-m.gif); text-indent: 20px; color: #FF0000; font-size: 13px; } /* 右メニュー */ #mr { width: 200px; float: right; text-align: left; height: auto; } #box-pick { width: 180px; padding: 10px; border: 1px solid #CCCCCC; margin: 0px 0px 5px; display: block; float: right; height: auto; } #box-koshin { display: block; width: 180px; padding: 10px; border: 1px solid #CCCCCC; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: right; height: auto; } #box-saishin { display: block; width: 180px; border: 1px solid #CCCCCC; padding: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: right; height: auto; } #box-toiawase { display: block; width: 180px; border: 1px solid #CCCCCC; padding: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: right; height: auto; } #box-counter { display: block; width: 180px; padding: 10px; text-align: center; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: right; height: auto; } /* フッター */ #footer { background-color: #66CC00; height: 50px; width: 900px; margin-right: auto; margin-left: auto; color: #FFFFFF; padding-top: 18px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;     clear: both; } 何が原因なんでしょうか? 宜しくお願いいたします!

    • ベストアンサー
    • CSS
  • スタイルシート ページ左右の余白幅 設定

    Seesaaブログを利用しています。 テンプレート「ガーベラ」のページ左右の余白幅を狭くしたいと思っています。 やりたい事は、例えばWord文書の左右余白は規定値で35mmになっているが20mmに変更したい という感じです。 初心者なので少し調べましたが スタイルシートのpadding、marginの設定を変更する必要がありそうな事しか分かりませんでした。 以下、スタイルシートの一部をコピーしたものです。 具体的に、どの部分を変更すればいいのか教えて下さい。 body { font-family: Arial, Helvetica, sans-serif; margin:0px; padding:0px; text-align:center; background-color:#FFF; color:#666666; } #container{ text-align:center; margin: 10px auto 0px auto; padding:0px; width:769px; } a{ text-decoration: underline; color:#87B400; } #banner{ font-family:arial, Helvetica; height:275px; margin:0px; padding:0px 0px 0px 160px; text-align:left; background-image:url(http://blog.seesaa.jp/img/bg/gerbera/header.jpg); background-repeat:no-repeat; }

  • CSSを用いた角丸の枠(フタ-中身-底)の作り方を教えてください。

    こんにちは。 こんな角丸の作り方が知りたいです。 フタ(画像)   ┌─────┐(実際は角丸の画像) 中身(左右の罫線)│     │ 底(画像)    └─────┘(実際は角丸の画像) 下に記載したタグでやってみたところ、IE6ではうまく表示されますが、Firefoxでは、フタ部(底部)と中身部の間が空いてしまいます。 ◆HTML <div id="container-top"><img src="img/container-top.gif"> </div> <div id="container">本文テキストがつづく。。。 </div> <div id="container-bottom"><img src="img/container-bottom.gif"> </div> ◆CSS div#container-top{ width:750px; height:10px; margin:0 auto; padding:0; } div#container{ width:750px; border-left:1px solid #cccccc; border-right:1px solid #cccccc; margin:0 auto; padding:0; } div#container-bottom{ width:750px; height:10px; margin:0 auto; padding:0; } どうぞよろしくお願いいたします。

  • IEだとディスプレーによって表示が違います

    理由があって、全画面表示で左に110pxの余白、続いてcontainerの770pxを表示したいのですが無理でしょうか? Firefoxだと大丈夫なのですが!IEは無理なのでしょうか? IEで観ると17インチディスプレーの場合、上手く左に100pxの余白、続いてcontainerの770pxが表示されるのですが、15インチディスプレーだと左に110pxの余白、containerの770pxがセンターリングされてしまいます。 見た目では110pxの余白+150pxの余白+770pxといった感じです。 #container { width :770px; line-height: 140%; text-align: left; margin-left: 110px; margin-right: auto; 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; }

  • CSSについての質問です

    下記のプログラムについて解らないのですが、containerの内のh1と ulの位置関係ですがh1にmargin-bottom: 0と指定し、ulにmargin-top: 0としてあるが、この2つがくっつかないのは何故でしょうか? 親切な方、ご回答いただけますようよろしくお願いします。 body{ background-color: #f2f2f2; padding: 0; margin: 0 } div#container { width: 750px; margin-left: auto; margin-right: auto; background-color: white } h1{background-image: url(画像.jpg); width: 640px; height: 120px; margin-bottom: 0; margin-left: 50px; } ul{ list-style: none; text-align: center; padding: 0; margin-left: 10px; margin-top: 0 } li{ width: 128px; float: left; padding: 0px; margin: 0px; }

  • <P>タグと<div>タグについて

    <P>タグと<div>タグには“前後に空行が入るかどうか”という違いがあるそうですが、下記のようなデータを作り、自分のホームページに記入したところ、前後に全く空行が入りませんでした。 しかし、自分のホームページ以外で、このデータを試してみたところ、<p>タグにはきちんと空行が入るようです。 記入する場所によって、空行が入ったり入らなかったりするのは、なぜなのでしょうか? ※ブラウザはIE8を使用しています。 <P align="right" style="width:740px;margin:auto;">●●●</p> <P align="right" style="width:740px;margin:auto;">●●●</p> <P align="right" style="width:740px;margin:auto;">●●●</p> <div align="right" style="width:740px;margin:auto;">▲▲▲</div> <div align="right" style="width:740px;margin:auto;">▲▲▲</div> <div align="right" style="width:740px;margin:auto;">▲▲▲</div>

  • IEでテンプレートの表示が変です

    理由があって、全画面表示で左に110pxの余白、続いてcontainerの770pxを表示したいのですが無理でしょうか? Firefoxだと大丈夫なのですが!IEだと表示が異なります。 IEで観ると左に110pxの余白、containerの770pxがセンターリングされてしまいます。見た目では110pxの余白+150pxの余白+770pxといった感じです。 ディスプレーのサイズによっても違うようです。15インチ、17インチともにIEでは思い通り表示されませんが、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; }

  • CSSで文字が流れ込んでしまいます

    CSS勉強中ですが、このように組んだらFireFoxで見ると左のコンテンツより右のテキストを増やした場合に左の<div id="leftside">の領域まで文字が行ってしまいます。 clear: bothを入れるのかなぁと思いつつ、色々なところに入れてみたのですが、変らなくて・・・。 どのようにしたらいいでしょうか。 body { margin-top: 0; background: #30689D; text-align: center; } #header{ width: 760px; margin-left: auto;    margin-right: auto; background: #E2E2E2; } #container{ width: 760px; margin-left: auto;    margin-right: auto; background: #FFFFFF; text-align: left; } #wrap { padding: 0px; } #leftside{ width: 170px; float: left; background: #FFFFFF; } #photo{ width: 570px; float: left; margin-left: 10px background: #FFFFFF; } #news{ width: 570px; margin-left: 10px background: #FFFFFF; } #footer{ width: 760px; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; background: #E2E2E2; text-align: right; } p { margin: 0; padding: 0; } -----HTML <div id="header">ヘッド</div> <div id="container"> <div id="wrap"> <div id="leftside"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div id="photo"> <p>写真を入れたいところ</p> </div> <div id="news"> <p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p> <div id="footer">フッターく</div>

    • ベストアンサー
    • HTML