文章分類: ZARD‧美化 (阪井‧泉水‧隨筆)

插件系列‧Blog Deco留言畫板

foreverzard — Mon, 29 Oct 2007 10:30:18 +0800

申請留言畫板
http://www.blogdeco.jp/rakugaki/

秘技系列‧查看他人的CSS

foreverzard — Sat, 27 Oct 2007 18:45:47 +0800

sidebar標題背景

foreverzard — Fri, 26 Oct 2007 18:32:26 +0800

1.預備一張背景圖，需要適合的長、闊、高

2.到.sidetitle{...}
3.插入代碼

.sidetitle{
...
background-image : url('http://圖片網址');
...
}

3.更改sidebar標題高度

.sidetitle{
...
height:18px;
background-image : url('http://圖片網址');
...
}

插件系列‧Blog Deco註冊

foreverzard — Thu, 25 Oct 2007 22:31:03 +0800

申請 Blog Deco
http://www.blogdeco.jp/entry

秘技系列‧加捲軸方法

foreverzard — Tue, 23 Oct 2007 19:30:37 +0800

a)日記加捲軸方法：
1. 到CSS設定
2. 找#main_content{...}
3. 加插CSS

#main_content{
...
overflow-x(水平捲軸) : visible(有) / hidden(無) / auto (自動);
overflow-y(垂直捲軸) : visible(有) / hidden(無) / auto (自動);
height : ???px(日記高度)
...

}

b)sidebar加捲軸方法(缺點 - 所以sidebar都會加捲軸)：
1. 到CSS設定
2. 找#main_content{...}
3. 加插CSS

.sideitem{
...
overflow-x(水平捲軸) : visible(有) / hidden(無) / auto (自動);
overflow-y(垂直捲軸) : visible(有) / hidden(無) / auto (自動);
height : ???px(sidebar高度)
...
}

秘技系列‧刪除sina工具列(只供參考)

foreverzard — Mon, 22 Oct 2007 18:17:23 +0800

只供參考.............不要亂用
原理：由於sina工具列是置頂，所以把整個網頁往上縮減，讓工具列消失得無影無蹤。

方法：
1. 到CSS設定
2.找body{...}
3.加插CSS

body{

...
margin-top: -36px;
...
}

4.完成
只供參考.............不要亂用

求救系列‧sidebar不是與日記並列

foreverzard — Sun, 21 Oct 2007 17:54:12 +0800

為什麼sidebar落在日記的下面？

99.99%的原因是日記的寛度和sidebar的寛度大於blog的寛度

本應是這樣剛剛好的
　　　　　　　　　　blog的寛度
←────────────────────────→
←─────────────→←─────────→
　　　　　日記的寛度　　　　　　　　sidebar的寛度

但是日記或sidebar其中一方多了寛度，突了出來
　　　　　　　　　　blog的寛度
←────────────────────────→
←─────────────→←──────────→
　　　　　日記的寛度　　　　　　　　sidebar的寛度

為了不破壞blog的寛度、日記的寛度和sidebar的寛度，
只能把sidebar移到日記下方。

　　　　　　　　　　blog的寛度
←────────────────────────→
←─────────────→
　　　　日記的寛度　　　　　←──────────→
　　　　　　　　　　　　　　　　　sidebar的寛度

更改三者寛度
讓日記的寛度+sidebar的寛度<=blog的寛度(570+220<=800)

日記的寛度 - #main_content{width: 570px;}
sidebar的寛度 - #main_sidebar{width: 220px;}
blog的寛度 - #document{width: 800px;}

背景系列‧BLOG Banner(I)

foreverzard — Thu, 11 Oct 2007 17:38:09 +0800

範例：插入 Banner
難度：●○○○○

步驟：
1. 打開管理面版 > 外觀設定 > CSS設定
2. 到#header{...}

#header{

margin : 0px;
height : 345px; /* header's height */

}

3. 插入代碼

#header{

margin : 0px;
background-image:url(http://圖片網址);
height : 345px; /* header's height */

}

下文 - 背景系列‧BLOG banner(II)
相關內容 - 背景系列‧BLOG版面(I) - 關於背景詳細介紹
　　　　

背景系列‧BLOG banner(II)

foreverzard — Wed, 10 Oct 2007 17:57:11 +0800

調整banner 大小
a,高度←→

#header{
margin : 0px;
height : 345px; /* header's height */
background-image : url(http://圖片網址);
}

b,闊度↑↓
由於banner闊度是整個blog的闊度，因此我們須要調整blog闊度。
(i) 到#document{...}
(ii) 更改闊度
下文...為省略

#document{ /* the blog's main frame */
....
width : 730px; /* blog's width */
....
}

下文 - 背景系列‧BLOG Banner(I)
相關內容 - 背景系列‧BLOG版面(I) - 關於背景詳細介紹

背景系列‧BLOG版面(I)

foreverzard — Tue, 09 Oct 2007 17:31:18 +0800

範例：背景為ＺＡＲＤ字圖片
難度：●○○○○

步驟：
1. 打開管理面版 > 外觀設定 > CSS設定
2. 到body{...}

body{
margin : 0px;
padding : 0px;
text-align : left;
}

3. 插入代碼

body{
margin : 0px;
padding : 0px;
text-align : left;
background-image : url(http://圖片網址);
background-repeat : 重復性;
background-position : 位置性;
background-attachment : 固定性;
}

下文 - 背景系列‧BLOG版面(II)

背景系列‧BLOG版面(II)

foreverzard — Mon, 08 Oct 2007 17:29:55 +0800

介紹：
background-image : url(http://圖片網址);
為背景圖片位址。
background-image : url(http://foreverzard.mysinablog.com/resserver.php?resource=951700-ZARD.jpg);

background-repeat : 重復性;
決定背景是否重復或怎樣重復。
background-repeat : repeat;(向四面八方不斷重復)
background-repeat : repeat-x;(只向水平方向不斷重復)
background-repeat : repeat-y;(只向垂直方向不斷重復)
background-repeat : no-repeat;(不重復)

background-position : 位置性;
背景圖片在頁面上的位置
background-position : top left;(左上)
background-position : center left;(左中)
background-position : bottom left;(左下)
background-position : top center;(中上)
background-position : center center;(置中)
background-position : bottom center;(中下)
background-position : top right;(右上)
background-position : center right;(右中)
background-position : bottom right;(右下)
background-position : x% y%;(x為水平，y為垂直)

background-attachment : 固定性;
固定或不固定在頁面。
background-attachment : fixed;(固定)
background-attachment : scoll;(不固定)

上文 - 背景系列‧BLOG版面(I)