さくらのブログの幅の変更方法

このQ&Aのポイント
  • さくらのブログの幅を狭めることが可能かどうかについてお伺いします。
  • さくらのブログで使用しているシンプル茶色:両のテンプレートでは幅が狭いため、幅を広げたいと思っています。
  • 具体的な幅の変更方法やデザインの変更についてわからないため、お力をお借りしたいです。
回答を見る
  • ベストアンサー

さくらのブログの幅の変更について

こんにちは ブログの幅って変更できますでしょうか? 内容↓ 現在さくらブログの【シンプル茶色:両】を使用して ブログを作ろうとおもっています。 ↓練習で作りました。 http://yakyuusyounenn.sblo.jp/ ただ上記の標準では幅が狭いので少し広げたいと思っています。 全然CSSについてはわかっていませんが #container{ width:800px; を1000pxにして (多分全体の幅ですよね) #content{ width:360px; と言う数字を360px;から500pxに変更したら 確かに幅は増えたのですが背景の紙?の大きさが変わりません。 このようになります。 ↓ http://yakyuusyounenn2.sblo.jp/ 理想としては 左のサイドバーの幅 250px ブログの幅 450px 右のサイドバーの幅 250px で背景の白の紙も綺麗に表示できればいいなぁと 思っているのですが・・・・ デザインの何処を変更すればいいかがわかりません。 (もしかして出来ないのかな・・・とも思っています) もし可能であれば 何とかお力を貸していただけますでしょうか? 変更前のCSSのファイルは http://yakyuusyounenn.sblo.jp/ に記載しています。 お手数お掛けしますがよろしくお願いします。 <(_ _)>

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

  • ベストアンサー
回答No.2

こういう使い方をしていいのか分かりませんが。 title.gif→title_l.gif body.gif→body_l.gif に変更すればなんとかなりそうです。(微調整は必要だと思いますが) これは3カラム用でなく2カラム用の画像を拝借してます。

koutan_h
質問者

お礼

お返事ありがとうございます。 す・すごいです。 確かに幅の広い画像を使用すれば可能ですね。 気づきませんでした。 あと追加で footer.gif ⇒ footer_l.gifに変更して 完成しました。(^-^; 練習なのでもうすぐ削除しますが完成です↓ http://yakyuusyounenn2.sblo.jp/?1300122516 hiro98_webさまもさくらを使用しているのかな・・・(^-^; 本当にたすかりました。 これでブログを作成していけます。~

その他の回答 (1)

  • susy-xx
  • ベストアンサー率69% (339/485)
回答No.1

ピンで貼った紙の画像は元々その幅で作成された画像なので変更は出来ません。 縦の長さが文章の長さに応じて変化するのはテキスト欄で白くて四角い画像を 並べて表示するように指定しているからです。 希望する幅の似たような画像を探すか 作成するしかないと思います。 利用している画像に手を加えて改造することも出来ると思いますが、 素材配布している方がそのような使い方を許可していない限り しないほうが無難です。

koutan_h
質問者

お礼

ご丁寧なお返事ありがとうございます。 >希望する幅の似たような画像を探すか >作成するしかないと思います。 確かにその通りですね。 hiro98_web様よりその画像を教えていただいて 無事成功しました。(^-^; ありがとうございます。

関連するQ&A

  • テンプレート幅変更カスタマズについて

    シーサー無料ブログテンプレート Stripe Brown:両サイドの幅を広く使いたいと思っています。 #container{ margin:0px auto; width:800px; ↓ #container{ margin:0px auto; width:1024px; は変更できました。 #content { margin:0px 10px 0px 0px; float:left; width:400px; ↓ #content { margin:0px 10px 0px 0px; float:left; width:585px; 記事スペースは変更になったのですが 記事の枠が400pxとなったままです。 記事部の枠も585pxにするにはどこを 変更すればよろしいでしょうか? よろしくお願いします。

  • CSS html ブログの横幅の編集

    CSS html編集初心者です。 横幅の編集で、下記の部分を100pxずつ増やしました。 #container{ width:1210px; #content{ width:620px; すると見出し部分の背景色が、反映させることができません。(画像参照) どこのタグの何という部分を編集すればよいのでしょうか? 些細なことでも構いませんので、アドバイスお願いいたします。 使用テンプレート(seesaaブログ、シンプルベージュ(両サイドバー))

  • ブログの幅を変更したい。

    現在fc2でブログをしているのですが、ブログの幅を変更したいと思っています。 ブログ全体の幅:800px 記事の幅:550px 右サイドバー:230px 大まかに言うと上記のようにしたいと思っています。 テンプレートは公式内にある[arrow_o]になります。 どのように変更すればよいのか、 分かる人は教えてくれませんか?

  • ライブドアブログのサイドバー幅の変更について

    色々調べてわからなかったので質問します。 ライブドアブログでサイドバーの幅を変更したいのですがどこを いじればいいのか分かりません 具体的にはサイドバーの幅を大きくし画面に背景などいらない感じに したいのです。 使用デザインはブログメディア(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%; 作るのは乙女ゲーとかワンちゃんのブログです 調べてもかなり難しかったのでどうかよろしくお願いいたします(>_<)!

  • CSSに関して教えてください。

    CSSで左列がサイドバーで右列がメインコンテンツの二段組レイアウトについて質問します。 ●要点 サイドバーには背景色が指定してあり、サイド、メインとも高さが可変(指定なし)とします。メインコンテンツの高さの変動に応じてサイドバーの高さも変化してサイドバーの背景色とメインコンテンツの高さが同じになるように変化させたいのです。 ---------- CSSソース ---------- body { text-align: center } #wrapper { width: 720px; margin: 0 auto; text-align: left; } #content { width: 720px; background: url("../img/content.gif") repeat-y; } #main { float: right; width: 540px; } #sidebar{ float: left; width: 180px; background: blue; } ---------- HTML ---------- <body> <div id="wrapper"> <div id="content"> <div id="main"> ・・・・・・・・・ </div> <div id="sidebar"> ・・・・・・・・・ </div> </div> </div> </body> CSSでcontentに背景画像(サイドバーの幅が青色の画像)を指定してrepeat-yとするとIE6ではメインコンテンツの高さに合せてcontentに指定した画像が繰り返されサイドバーの色がメインコンテンツの高さと揃います。Firefoxでは、メインコンテンツがサイドバーより高くなると揃わなくなります。contentに指定された画像が表示されてないようです。 どのようなことでもいいのでお教えください。手がかりがなく困っています。

    • ベストアンサー
    • HTML
  • cssを使って分割したページのレイアウトが崩れてしまいます

    はじめまして。 見よう見真似でcssでページの分割を始めたのですが、ウインドウのサイズを変えるとレイアウトが崩れてしまって、何度手直ししても直らず暗礁に乗り上げてしまった為、質問させて下さい。 幅780で設計しているページ内にコンテンツ(左)とサイドバー(右)で左右に分割表示している部分があります。 コンテンツは幅500、サイドバーは幅260でそれぞれ高さは変動する可能性がある為、指定はしておりません。 ブラウザのウインドウ幅を小さくするとサイドバーがコンテンツの下に回り込んでしまうのでサイドバーをposition:absoluteで固定してみたのですが、今度はウインドウ幅を大きくすると下段のテーブルや最下段に自動でくっついてくる広告がサイドバーに重なってしまうことになり、解決策が見出せずにいます。 ウインドウのサイズを変更してもレイアウトが崩れないようになる手段をご存知の方がおりましたらご教授頂ければと思います。 また、本来やりたかったレイアウトがありまして、コンテンツとサイドバーを左右で分けつつ、更に両方を幅780の一つのボックスに収めることは可能でしょうか? こちらも手段をご存知の方がおりましたら合わせてご教授下さい。 以下ソース抜粋 htmlファイル↓ <body> 割愛 <table cellpadding="0" width="780" bgcolor="#ffffff" cellspacing="0"> <tbody> <tr><td bgcolor="#666666" align="left"></td></tr> </tbody> </table> <div id="content">コンテンツ</div> <div id="sidebar">サイドバー</div> <table cellpadding="0" width="780" bgcolor="#ffffff" cellspacing="0"> <tbody> <tr><td bgcolor="#666666" align="left"></td></tr> </tbody> </table> </body> 読み込んでいる外部cssファイル↓ <style type="text/css"> #container{width:780px;text-align:left;margin:0px auto;} #header{width:780px;margin:0px 0px 15px 0px;} #content{float:left;width:500px;padding:10px 2px 2px 8px;} #sidebar{float:center;width:260px;padding:2px 2px 10px 8px;} #footer{clear:both;width:770px;margin:15px 5px 15px 5px;} </style> div{  font-size: 10pt;  margin: 1%;  padding: 2%;  line-height: 120%;  border-style: double;  border-color: #F5F5F5;  background-image:url("背景画像") }

    • ベストアンサー
    • HTML
  • アメブロのサイドバーの広告幅について

    アメブロのサイドバーの広告は300px以外のものは選べないのですか? 300px以下の広告がサイドバーについているブログを見つけたのですが http://ameblo.jp/365pan 有料プランかなにかにはいっているのでしょうか? それともCSSを弄ることでなんとかすることができるのでしょうか? 詳しい方教えてください。

  • [CSS]リキッドレイアウト上で、floatさせたサイドバーの背景画像を高さ100%で敷き詰めたい

    今ヘッダフッタ付きの3カラムブログデザインを作っています。 leftnaviとrightnavi(サイドバー/メニュー)の間にmaincontents(ブログのメイネントリ)が挟まるような、まあ一般的なブログデザインです。 で、質問なんですが、leftnaviとrightnavi(サイドバー/メニュー)に背景画像を敷き詰めたいんです。 ブログですので、基本的にはmaincontents(エントリ)の方がサイドバーよりもheightが大きくなってしまいます。 その際、サイドバーの背景が、記述されたメニューの部分までしか反映されません。これについて、エントリ部分の高さまで敷き詰める方法を教えて頂けませんでしょうか? 色々調べたところ、(http://css-happylife.com/log/css-template/000028.shtml)こちらで、width固定デザインの際にcontainerに背景画像を指定する方法が紹介されていました。 ただ、今回お伺いしたいのは、containerのwidthを%指定するリキッドデザインの場合、です。左右のサイドバーにはそれぞれ別の背景画像を指定したいと考えているのですが、それは可能なのでしょうか?

  • さくらのブログでサブドメインを使用したい

    さくらインターネットを使っています。 サブドメインを使ってブログを表示させたいと 考えているのですが調べても見つからないし さくらはブログはサポート外なので問い合わせもできません。。。 ex: http://www.●●●.jp を http://blog.●●●.jp こんな感じにして、中身はさくらのブログのままに。 記事投稿やカスタマイズもさくらのブログにログインして 扱えるようにという形です。 さくらのブログは通常 http://●●●.sblo.jp です。 どうぞよろしくお願いします。

  • 固定幅+可変幅レイアウトがなぜこれで実装可能?

    cssで、固定幅+可変幅レイアウトについて、下記コードのようにやったら実現できたのですが、 なぜ右カラムのwidthが100%でも、ブラウザの横幅いっぱいでなく、 望みどおりに実現できてしまっているのでしょうか? 結果オーライではありますが、理屈が知りたい&後学のために、 理由をお教えいただければ幸いです。 (下記では見やすいようにタブを全角空白4文字に変換しています。) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>2カラムレイアウト(左固定幅、右リキッド)</title> <meta name="description" content="2カラムレイアウト(左固定幅、右リキッド)"> <meta name="keywords" content="CSS,2カラムレイアウト,左固定幅,右リキッド"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> *    {      margin: 0;      padding: 0; } #header {      width: 100%;      height: 150px;      background-color: #808080; } #container {      width: 100%; } #left    {      width: 200px;      background-color:#A9A9A9;      float: left; } #right {      width: 100%;      background-color:#DCDCDC; } #footer {      clear: both;      width: 100%;      height: 150px;      background-color: #808080;      } </style> </head> <body> <div id="header">     <p>ヘッダー</p> </div> <div id="container">     <div id="left">     <p>左あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>     </div>     <div id="right">         <p>右いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>     </div> </div> <div id="footer">     <p>フッター</p> </div> <p><a href="#" onClick="history.back(); return false;">戻る</a></p> </body> </html>

    • ベストアンサー
    • CSS