FC2ブログ、テンプレートの横幅を広げたい。

質問

FC2ブログの公式3カラムテンプレート、
web*citronさん制作の「cloud」を使っているのですが
【記事の横幅の広げ方】と【左右のカラムの広げ方】がわかりません。

widthの数値や使われている画像を弄ってみたり
してみてもレイアウトが崩れたりして、うまくいきません。

初心者なので詳しく教えていただけると嬉しいです。
できるだけ具体的な改変記述が分かる方のみ、お答えお願いします。

回答No.1

kobliha · ベストアンサー

左サイドバー +30px、メイン +120px、右サイドバー +50px で合計 +200px とする場合。
http://templates.blog.fc2.com/template/cloud/cloud_bg.gif
左右のシャドウ画像であるが、幅に合わせて自分で作り変え、アップロードして。その URL で書き換えること。
body {
color : #333;
background : url("http://templates.blog.fc2.com/template/cloud/cloud_bg.gif") top center repeat-y;
引用符 " はなくてもよい。

div#container {
width: 1000px; /* 1000 = 800 + 200 */
margin-left : auto;
margin-right : auto;
background-color : transparent;
text-align : left;
}
div#header {
margin-bottom:15px;
padding:60px 0 20px;
text-align:center;
background:url(http://templates.blog.fc2.com/template/cloud/cloud_header.jpg) no-repeat center top;
border-bottom:1px dashed #ddd;
}
ヘッダー画像も余白ができるので、サイズ位が不満なら作り変え。
center top を半角空けて追加。（中央配置）

div#wrapper {
float : left;
width : 770px; /* デフォルトが 400 + 180 + 20 + 20 という計算なので、 520 + 210 + 20 + 20 とする */
}

div#blog_content {
float : right;
width : 440px; /* 触らずとも良い */
padding : 0 20px;
voice-family : "\"}\"";
voice-family : inherit;
width: 520px; /* 520 = 400 + 120 */
}
html>body div#blog_content {
width: 520px; /* 520 = 400 + 120 */
}

div#left{
float : left;
width: 210px; /* 210 = 180 + 30 */
}

div#right {
float : left;
width: 230px; /* 230 = 180 + 50 */
}

お礼

わー、できました！！

ドのつく素人の私の質問に、こんなに丁寧に教えて下さり
ありがとうごさいました。ものすごく感謝してます。

補足の件は私のコピペミスでした。

補足

うまく左カラム、真ん中の記事、右カラムは広がったのですが
ブログの表示順が左カラム、右カラム、記事の順に表示されてしまいます。

画像の幅の問題なのか、何か私が勘違いして記述してしまっているのか、
原因がわかりません。なぜだろう……。