7. ブログの横幅を増やす

ブログの横幅を増やしたいと思います

[スタイルシート編集]

/* Content */

#content{
width: 900px;
margin: 0 auto;
text-align: left;
}

・
・
・
/* Articles */
#main {
float: left;
width: 480px;
overflow: hidden;
}

.articles {
width: 480px;
margin-bottom: 20px;
overflow: hidden;
background: url(/_common/skins/21/images/dotline.gif) repeat-x left bottom;
}

↓

/* Content */

#content{
width: 1000px;
margin: 0 auto;
text-align: left;
}

・
・
・
/* Articles */
#main {
float: left;
width: 540px;
padding: 0px 18px 0px 18px;
border-width :0px 0px 0px 1px;
border-style : dashed;
border-color : #C0C0C0;
overflow: hidden;
}

.articles {
width: 540px;
margin-bottom: 20px;

overflow: hidden;
background: url(/_common/skins/21/images/dotline.gif) repeat-x left bottom;
}

●#contentのwidthを900ｐｘから1000ｐｘに変更してヘッダー以外の横幅全体をアップ

●#main、.articlesのwidthを480ｐｘから540ｐｘへ変更して記事本文エリアの横幅をアップ

●#mainにpadding: 0px 18px 0px 18px;を追加して余白を調整

●さらに#mainに
border-width :0px 0px 0px 1px; border-style : dashed; border-color : #C0C0C0;
を追加して左側に破線を追加。見た目のバランスを取りました

タグ：テンプレート