SeeSaaブログのデザインをカスタマイズする(サイトの幅を変更する)

サイトデザインのテンプレートは『ライトグレー(両サイドバー)』を選択しましたが、サイトの幅が%でブラウザに合わせて変わるようになっています。

これを変更し固定幅となるようにします。

幅を決めるのは4つ
・全体の幅  #container を950pxに
・左サイドバー #links-left を180pxに
・右サイドバー #links を180pxに
・コンテンツ部 #content を530pxに
それぞれ変更します。

CSSを開き

   1: #container{
   2: margin:0px auto 0px auto;
   3: width:100%;
   4: color:#5D5D5D;
   5: font-size:12px;
   6: font-family:Verdana;
   7: text-align:center;
   8: }

width:100%; を width:950px; に変更

   1: #links-left {
   2: font-weight:normal;
   3: width:23%;
   4: float:left;
   5: margin: 0px 0px 0px 0px;
   6: text-align:left;
   7: }
   1: #links {
   2: font-weight:normal;
   3: float:left;
   4: width:23%;
   5: margin: 0px 0px 0px 30px;
   6: text-align:left;
   7: font-size:12px;
   8: }

の width:23%; をそれぞれ width:180px; に変更

   1: #content {
   2: margin:0px 0px 0px 30px;
   3: float:left;
   4: width:54%;
   5: }

の width: を 530px; に変更します。

WS00124

固定幅に変更できました。

コメント

タイトルとURLをコピーしました