365-153 <教學>更改blogger-更改樣式(一)

今天是更改blogger教室最終回

因為內容很多很複雜，所以要集中精神唷！

一開始當然是到範本→修改HTML

步驟很簡單，連圖片都是用上次的XD

一、分類和內容

在上次教過的Variable(宣告)的下面

第一個看到的是/*Content--------------*/

俱我所知(不知道是不是真的)/* */表示中間是註記

也就是中這兩個括號裡面的文字是給電腦前面的人看的拉！

下面可以看到有body、content-outer等等

如果有要改變主體的尺寸和連結的顏色可以在這裡改

通常會寫成

.body{ }

大括號中間就是他的內容

各個內容之間要記得分號“;”

該有空白的地方也不要忘記給唷

至於給不給跳行不是很絕對，主要是排得清爽比較容易看懂

例如我們看到body下面的color

寫到

color: $(body.text.color)

表示這裡的顏色跟body.text.color是一樣的顏色

如果想把它改成白色可以直接寫成

color: #ffffff

#ffffff是網頁用顏色標記方式

如果不想一個一個改

想要改變body.text.color所有的顏色

那就用ctrl+F的方式找到它的定義

然後改變Value後面的顏色碼

二、Header、Padding介紹

接下來看到/*Header-----------*/的位置

會發現在header-inner.Header.descriptionwrapper後會看

padding-left: 20px;

Padding是填充的意思，白話文是空間

這個網站有詳細介紹padding和margin的差別

這是header(標題)的位置，他距離最左邊的底限有20px的距離

這麼說好了

如果20px是在這個位置(黑線是我劃上去的

而我們把padding-left: 20px改成200px

會發現，他距離左邊的位置就拉開了

當然你可寫padding-left改變他的左邊

以此類推padding-top padding-bottom padding-right

或是可以只打padding，那就會上下左右都改變

三、標題位置、圖片

如果想要在畫紅線的這個位置擺上一個圖片

但是位置太窄了！

所以要增加下面的空間

PS.這個方式可以運用在兩旁的小工具等

首先在/*Header-------*/後面找到header-outer

Oops，找不到！

沒關係！自己加！

自己在後面插入

.header-outer{ }

在大括號中間加入

padding-bottom: 160px;

以及放入圖片

backgroung: url{圖片的URL} no-repeat scroll top left;

順利的話就會長這樣！

但是，人生不如意時之八九

而且依我的經驗，HTML不如意的時候遠多過如意的時候阿

例如，一不小心他太小了！

而且自己明明就照著比例做了！

那你可以參考這個網址

他會教你如何搞定picasa的圖片

但其他地方的圖片...Google很好用=D

一不小心他也會變成這樣

那可以更改一下你的設定

backgroung: url{圖片的URL} no-repeat scroll top left;

後面的四個單字

no-repeat

表示圖片以怎麼樣的方式重複

你可以改成repeat-x或repeat-y

依照x軸或y軸重複

或是repeat

依照x軸和y軸重複

scroll

表示他會隨著頁面滾動

你可以改成fixed

固定，不會隨頁面滾動

top left

表示他依照(X軸Y軸)置頂靠左對齊

你可以依照英文字 top bottom right left組合

或是兩個距離2cm 4cm

或是隨螢幕比例改變50% 50%

四、Post、Boder

先找到/*Post----------*/

你一樣可以在這邊改變他的padding

以變更整個文張在框框的位置

然後找到.post-outer裡面的border((圖片打錯字XD

border是邊界的意思，可以解釋成外框

你可以看到他寫著

border: $(post.border.style) $(post.border.size) $(post.border.color);

顯示為一整個很愛定義，但只用一次很多餘

假設它沒有設定好，那他應該會顯示為

border: solid 1px $(post.border.color);

其中1px很明顯的是他的寬度

而solid則是他的造型

 

假設我們把它改成

border: double 10px $(post.border.color);

來張使用前後的照片

看文章外框，變成兩條線了！

當然如果你不喜歡兩條線，那你可以參考這個網址選擇你要的造型

怕大家不專心，所以分了上下集>.0