2010年4月29日木曜日

Blggerのブログの幅やサイドバーの幅を変更する

HTMLの以下の部分を変更すればブログの幅を変更できます。
取り消し線の値が初期値で、赤字がこのブログの値です。

変更することでサイドバーに楽天アフェリエイトの
250pxの広告が出せるようになります。

この設定を変更するとクイック編集ボタンがでなくなったのですが、
「設定」タブでクイック編集ボタンを「いいえ」にして登録後に
「はい」で再登録すると表示されるようになりました。

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;       width: 990px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}



#main-wrapper {
width: 410px;          width: 640px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}



#sidebar-wrapper {
width: 220px;        width: 350px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}





ヘッダーも同じように拡張する。

/* Header
-----------------------------------------------
*/
#header-wrapper {
width:900px;     width:990px;

margin:0 auto 10px;
border:1px solid $bordercolor;
}



ヘッダーの高さを変更(タイトルの上の幅を狭める)


 #header h1 {
margin:5px 5px 0;       0px
padding:15px 20px .25em;        5px
line-height:1.2em;               1.0em;

text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

 
ヘッダーの高さを変更(タイトルの下の幅を狭める。)

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;        0px
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}



投稿 日の上にスペースを作る。

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;    5em
}




投稿のタイトルと本文の間を開ける
タイトルの文字を大きくし、本文と隙間を空ける。

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin: 5em 0 .5em;
}

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

.post h3 {
margin:.25em 0 0;                 20px
padding:0 0 4px;       20px;
font-size:140%;                     170%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}


サイドバーの位置を下げる。

/* Sidebar Content

----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
padding:50px;             (この行はもともとなかったので追加)
}

0 件のコメント:

コメントを投稿