2017年05月05日

(1)シーサーブログの本文の上に余白を空ける/ブログの両側に余白を入れる


使用デザイン
 ライトグレー(両サイドバー)

ブログタイトルの下にバナー広告を入れてみた。
 すると、ビッグバナーの下半分が本文記事と重なり、記事タイトルが見えない状態に。
 スタイルシートを探してみると、


  
70行目あたりに
 .blog {
 padding:0px 5px 50px 5px;
 text-align:left;
 font-family:Verdana;
 }
という記述を発見!

記事本文を下に下げるために
margin-top:100px;」を追加
(記事本文の上に余白を100ピクセル空ける)
  ↓
 .blog {
 padding:0px 5px 50px 5px;
 text-align:left;
 font-family:Verdana;
 margin-top:100px;
 }

スポンサーリンク

■本文部分は成功したものの、両サイドバーはそのままなので
 サイドバーの上にも余白を入れる。

 使用しているデザインはサイドバーが少し上に出っ張っているので150ピクセルにしてみました。

126行目あたりに左サイドバーに関する記述あり。
 #links-left {
 font-weight:normal;
 width:23%;
 float:left;
 margin: 0px 0px 0px 0px;
 text-align:left;
 }

とあるので
余白150ピクセルを追加。
  ↓
 #links-left {
 font-weight:normal;
 width:23%;
 float:left;
 margin: 0px 0px 0px 0px;
 text-align:left;
 margin-top:150px;
 }

134行目あたりに右サイドバーに関する記述があるので同様に追加

 #links {
 font-weight:normal;
 float:left;
 width:23%;
 margin: 0px 0px 0px 30px;
 text-align:left;
 font-size:12px;
 }
 ↓
 #links {
 font-weight:normal;
 float:left;
 width:23%;
 margin: 0px 0px 0px 30px;
 text-align:left;
 font-size:12px;
 margin-top:150px;
 }

(3)ブログ本体の左右端の余白が狭い(ゼロ?)なので余白を入れる。

スタイルシートの1行目に「body」の記述。
最後の行に左と右のマージンをそれぞれ30ピクセル空ける記述を追加。

body {
background-color:#FFF;
margin:0px 0px 0px 10px;
padding:0px;
text-align:center;
font-family:Verdana;
text-align:center;
}
  ↓
body {
background-color:#FFF;
margin:0px 0px 0px 10px;
padding:0px;
text-align:center;
font-family:Verdana;
text-align:center;
margin-left:30px;
margin-right:30px;
}

 

posted by スピカ at 15:42| シーサーブログのカスタマイズ | 更新情報をチェックする