レイアウトのサイズや背景色を変更する

ここではテンプレートのレイアウトで固定されているサイズの変更する方法について説明します。(レイアウトの形状そのものはテンプレート選びの時点で変更してください。)
ここで説明する変更場所は
  1. 背景色
  2. ブログ部分全体の横幅
  3. メインボディの部分の横幅
  4. 右サイドバーの部分の横幅
です。このサイト(ブログ)で利用しているテンプレート『若草(右サイドバー)』で説明していきます。
 

準備
SeeSaaブログの 「マイ・ブログ」タグからサインイン(ログイン)して → 「デザイン」 → 「スタイルシート」 → 「使用しているテンプレートのタイトル」 でスタイルシートを変更、書き足しができるページを開きます。

下の画像のようなページが表れます。このページでスタイルシートを変更していきます。


CSSnyuuryoku.gif

1.背景色を変更する

テンプレート『若草(右サイドバー)』の場合、背景は明るめのグレーになっています。(下の画像の赤い枠で囲まれた部分)


haikeisetsumei.jpg

スタイルシート セレクタ 『body』 の部分を変更することで背景色を変更します。(一番上に書かれているセレクタ)
 

変更前

body {  ←セレクタ名「body」(ページ全体)
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
text-align:center;
background-color:#CFCFCF;  ←背景色:「#CFCFCF」(明るめの灰色)
}

変更後

body {
font-family: Arial, Helvetica, sans-serif;
margin:0px 0px 20px 0px;
padding:0px;
text-align:center;
background-color:#333333;  ←背景色:「#222222」(やや明るめの黒色)
}
 

変更した結果がこのページの背景です。
「プレビュー」ボタンで確認後、問題がなければ「スタイルシートを変更する」ボタンを押して変更を確定します。

2.ブログ部分全体の横幅を変更する

下の画像の赤い枠で囲まれた部分のスタイルを決定する セレクタ『 #container』 の中身を変更することでブログ全体の横幅を変更します。


containersetsumei.jpg

 

変更前

#container{  ←セレクタ名「#(ID) cntainer」(ブログ部分全体)
text-align:center;
margin: 0px auto 0px auto;
padding:0px;
background-image:url(http://blog.seesaa.jp/img/bg/wakaba/bg.gif);  ←背景画像を指定
background-repeat:repeat-y;  ←背景画像を縦軸にのみ繰り返して表示
background-position : top center ;
width:762px;  ←横幅:762ピクセル
color:#8B8B8B;  ←文字色:「#8B8B8B」(灰色)
}

変更後

#container{
text-align:center;
margin: 0px auto 0px auto;
padding:0px;
background-color:#ffffff;  ←背景色:白
width:800px;  ←横幅:800ピクセル
color:#555555;  ←文字色:「#555555」(暗めの灰色)
}
 

「プレビュー」ボタンで確認後、問題がなければ「スタイルシートを変更する」ボタンを押して変更を確定します。

これで横幅のサイズが762ピクセルから800ピクセルになりました。

ついでに、このサイトではテンプレートの背景画像を利用しないので 『background-image』 と 『background-repeat』 は削除しました。

さらに文字色もテンプレートの初期値より少し黒くしました。

『background-image』 にオリジナルの背景画像のURLを入力すれば好きな背景画像にすることができます。

3.メインボディの部分の横幅を変更する

下の画像の赤い枠で囲まれた部分 (ブログ全体からヘッダ、フッタ、サイドナビを除いた、記事やトラックバックなどが掲載されるエリア) のスタイルを決定する セレクタ『 #content』 の中身を変更することでメインボディ部分の横幅を変更します。


mainbodysetsumei.jpg

 

変更前

#content {  ←セレクタ名「#(ID) content」(メインボディの部分)
float:left;
width:500px;  ←横幅:500ピクセル
text-align:center;
margin-top:10px;
}

変更後

#content {
float:left;
width:580px;  ←横幅:580ピクセル
text-align:center;
margin-top:10px;
}
 

「プレビュー」ボタンで確認後、問題がなければ「スタイルシートを変更する」ボタンを押して変更を確定します。
このサイトではメインボディの横幅を広くして記事スペースを大きく取りたかったので80ピクセル広げました。

4.右サイドバーの部分の横幅を変更する

下の画像の赤い枠で囲まれた部分 (ブログ全体からヘッダ、フッタ、メインボディを除いた、カレンダーやカタログ、過去ログ、新着記事などのリンクが張られるエリア) のスタイルを決定する セレクタ『 #links』 の中身を変更することで右サイドバーエリアの横幅を変更します。


sidenavisetsumei.jpg

 

変更前

#links {  ←セレクタ名「#(ID) links」(右サイドナビの部分)
font-weight:normal;
width:244px;  ←横幅:244ピクセル
float:left;
margin-top:10px;
margin-left:18px;
}

変更後

#links {
font-weight:normal;
width:210px;  ←横幅:210ピクセル
float:left;
margin-top:10px;
margin-left:10px;  ←左側の余白を8ピクセル縮小
}
 

「プレビュー」ボタンで確認後、問題がなければ「スタイルシートを変更する」ボタンを押して変更を確定します。

ここではメインを大きくするためにサイドナビの横幅を小さくしました。

それぞれの横幅は自分の好きなサイズに変更できますが、ちゃんと全体サイズの和に合うように計算してサイズ変更してください。

変更前のテンプレート初期値の横幅
全体サイズ 762px =
メインボディ 500px + 右サイドバー 244px + 右サイドバーの左側余白 18px

変更後のの横幅
全体サイズ 800px =
メインボディ 580px + 右サイドバー 210px + 右サイドバーの左側余白 10px
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。