ブログの横幅を変更する方法

ブログのデザインはCSS(スタイルシート)で決められています
CSSを変更することで簡単にデザインを変更できます

「シンプルブログデザイン」の3カラムのテンプレートの
横幅変更方法をご説明します


まず
FC2ブログ管理画面の「環境設定」の「テンプレートの設定」へ

変更するテンプレートのHTMLCSS「編集」へ

一番下の「(テンプレート名)のスタイルシート編集」のCSSを変更します

(注)
もしもの時に備えてCSSを「すべて選択」→「コピー」→「メモ帳に貼り付け」
→「CSS変更前」とか名前をつけてデスクトップなどに保存しておきましょう


変更作業再開しましょう
以下の例を参考にお好みの大きさに変更してみてください

例)
左サイド部分を 50px大きく
中心部分を 150px大きく
右サイド部分を 100px大きく
する場合

以下の①~⑤の部分をそれぞれ変更します
__________________________________________________________________________________________________


/* 外枠 */

#container{
width: 756px; ←ココを 1056 に変更 (756+50+150+100=1056)
margin: 0 auto;
border: gray 1px solid;
}


__________________________________________________________________________________________________


/* ブログ中心部 */


#blogcontainer{
}

#wrapper{
width: 554px; ←ココを 1056 に変更 (554+50+150=754)
float:left;
}

__________________________________________________________________________________________________


/* 左サイドバー(プラグインカテゴリー1) */

#left{
float: left;
width: 185px; ←ココを 235 に変更 (185+50=235)
margin-left: 5px;
}

__________________________________________________________________________________________________


/* 右サイドバー (プラグインカテゴリー2)*/

#right{
float: right;
width: 185px; ←ココを 285 に変更 (185+100=285)
margin-right: 5px;
}

__________________________________________________________________________________________________


/* 本文部分 */

#blog{
float:right;
width: 350px; ←ココを 500 に変更 (350+150=500)
overflow:hidden;
}

__________________________________________________________________________________________________

以上の例にしたがって数値を変更してみてください
どうでしょう?うまくできましたでしょうか?

数値は正確に代入してくださいね
ここが正確でないとテンプレートレイアウトが崩れる原因になります

うまくいかなかった場合は
先ほど保存しておいた「CSS変更前」を使って再挑戦してみてください



2カラムテンプレートの横幅変更は3箇所のみ

①の外枠
③または④のサイド部分
⑤の本文部分

です

ポチッと応援おねがいしまーす`・ω・´)σ人気ブログランキングへ


コメント一覧
コメントを投稿する

トラックバック一覧
トラックバックする

最近の記事

最近のコメント

最近のトラックバック

検索フォーム

必ずお読み下さい

シンプルテンプレート

テンプレランキング

テンプレランキング
他の作者さんの素敵なテンプレ


にほんブログ村 ブログブログ ブログテンプレートへ

カテゴリー

リンク

おすすめシンプルテンプレート

画像をクリックするとサンプルが表示されます ・v・ 。)ノ
a-00001gray2left_4
FC2シンプルブログデザインテンプレートa-00001gray2left_4
詳細
a-00001gray2right_4
FC2シンプルブログデザインテンプレートa-00001gray2right_4
詳細
a-00001gray3_4
FC2シンプルブログデザインテンプレートa-00001gray3_4
詳細
a-00001white2left_3
シンプルブログデザイン・白色テンプレート2カラム左サイドバー型
詳細
a-00001white2right_3
シンプルブログデザイン・白色テンプレート2カラム右サイドバー型
詳細
a-00001white3_3
シンプルブログデザイン・白色テンプレート3カラム型
詳細
a-00001black2left_3
シンプルブログデザイン・黒色テンプレート2カラム左サイドバー型
詳細
a-00001black2right_3
シンプルブログデザイン・黒色テンプレート2カラム右サイドバー型
詳細
a-00001black3_3
シンプルブログデザイン・黒色テンプレート3カラム型
詳細
未登録の方はこちらからFC2ブログを登録、 詳細ページからHTMLとCSSをそれぞれを右クリックでデスクトップ等に保存し、 「テンプレートの設定」のHTML部分とCSS部分に貼り付け保存、 利用規約に同意の上、ご利用ください
・v・ 。)ノ