沈小慧。攝影／旅遊／美食

在這之前、我從來沒有想過，有一天、我會在網路上打著Blog的CSS教學

會在痞客邦獻上我的第一次，小蓓 這一切、攏是為丟里啦

《雖然妳最後還是選擇隨意窩為棲身地》

曾經有人問「為什麼妳們家的相片看起來都這麼大張」 

因為痞客邦給的版型有限，要讓文章內的相片變大、就只能修改版型了

 那麼、先依我的文章「台中彩虹眷村」來作說明，這是原先痞客邦給我的版型

我不是說不滿意，只是它都把我的相片卡掉了，這點讓我的心情很不美麗

當初拍到的相片明明是這樣的，人物置中、比例完整

但是上傳到痞客邦的文章後，Amy的美照硬是被卡掉了1/5

當初明明有拍到牆上的「平安百福」，看起來多麼完美

但是上傳到痞客邦的文章後，平安百福卻變得不完美了

這完完全全惹毛了我，所以、開始動腦筋在CSS上

因為曾經在Yahoo!BLOG玩過CSS的語法，成功的把文章欄位變大，也把文章內的相片變大

所以也自認痞客邦的CSS應該也是一樣的，開始很「假會」的自己動手修改語法

但是一接觸之後才發現，完了、痞客邦的CSS和雅虎部落格的CSS完全不一樣 shit

所以、我們先拋開在Yahoo!學過的CSS，重新學習痞客邦的CSS吧

以下CSS說明、僅適用於單一側邊欄位

因為我不曉得三欄位的CSS是不是也完全一樣的

如果有朋友試過三欄位成功的話，請您再告知小慧喔

先在管理後台中，點選「部落格」的「自訂樣式」的「CSS始碼編輯」

提醒大家!!請記得先把原CSS複製存檔

萬一如果沒有修改成功的話，我們還保留著原CSS可以用

第一個、先教大家把我們的文章欄位變大，因為文章欄位變大了、我們的相片才能放大張呀

找到裏面語法的這一串

#content{

width:650px ;

float:left;

_overflow: hidden;

}

紅色字體的部份、可以依照個人喜好的文章欄位大小來作調整

輸入您要的欄位大小後，記得要用「預覽」的方式來看

 如果欄位太大或太小的話，再回來作修整，直到您滿意之後、再點選「儲存」

另外、假設您輸入的數字是 700 的話，那麼以後就先把您的相片調整寬度為700後再上傳

這樣就可以讓您文章內的相片變大了

修改了文章欄位的大小，大家的側邊欄位、是不是也就下滑到文章的最底下了

所以、第二個、要教大家把我們的版型加大，這樣就可以把我們的側邊欄位拉上來了

找到裏面語法的這一串

#body-div{ 

background: #fff; 

overflow:hidden ; 

width: 970px; 

margin: 0 auto;

}

紅色字體的部份、可以依照個人喜好的版型大小來作調整 

輸入您要的版型大小後，記得要用「預覽」的方式來看 

如果版型太大或太小的話，再回來作修整，直到您滿意之後、再點選「儲存」

↓↓底下這一個CSS，可作、也可不作，完全是依個人喜好↓↓

如果有人也想跟我一樣，把我們右邊欄位改大或改小的話，找到裏面語法的這一串

#links{

float: right;

width: 265px;

}

紅色字體的部份、可以依照個人喜好的版型大小來作調整 

輸入您要的版型大小後，記得要用「預覽」的方式來看 

如果版型太大或太小的話，再回來作修整，直到您滿意之後、再點選「儲存」

只不是、這一個CSS的修改、會牽動到剛剛講的第二個的CSS

所以、如果沒有玩過CSS的痞友們，真的不要輕易嚐試，因為它真的會讓妳改到想砸了電腦

那麼、都完成了吧!!現在我們的版型都變大了，下方也多了個橫軸可以拉右又拉左

剛剛Amy被卡掉的美照，現在都跑出來了

放上版型變大前、後的相片作比較，這樣的比例才叫完美

就連剛剛只看到的平什麼、百什麼的相片，現在也都出現了

放上版型變大前、後的相片作比較，「平安百福」終於看到了

另外、因為不是每個人都用同一個版型，我的主圖是套用現有版型下去作「自訂樣式進階版」修改

所以在作完上面的CSS修改之後，我發現、我的主圖卻沒有跟著變大

這就是CSS讓我又愛又恨的原因

我愛它可以讓我的版型不一樣，我恨它的囉哩叭嗦想砸了它

所以為了完美，我們再來修改主圖的CSS吧

先在管理後台中，點選「部落格」的「自訂樣式」的「自訂樣式進階版」

然後在「部落格最上面」的欄位裡，上傳您要當主圖的相片

記得!!上傳的相片大小，要和剛剛CSS修改第二個版型大小的width一樣

上傳完畢後，到再煩人的「CSS原始碼編輯」中，找到裏面語法的這一串

#header{

position:relative;

width:970px;

height:425px;

 background: url('http://pic.pimg.tw/gomay520/1311230616-70718f49aa727cb16d7663bab3646ca4.jpg') no-repeat left top;

 color:#555;

 background-image:url('http://pic.pimg.tw/gomay520/1311230616-70718f49aa727cb16d7663bab3646ca4.jpg');

background-position:center;
background-repeat:no-repeat;

}

紅色字體，width的部份，要和剛剛CSS修改第二個版型大小的width一樣才可以喔

height的部份，就依照個人喜好大小來作調整 

輸入您要的版型大小後，記得要用「預覽」的方式來看 

如果版型太大或太小的話，再回來作修整，直到您滿意之後、再點選「儲存」

完  成

以上就是我們家修改CSS的方式，是不是囉嗦又煩人!!但又不得不承認、改完後的文章變得更好看

還有、我要先說明!!這一篇、當初真的只是應小蓓要求寫的，畢竟我也不是科班出身 

我也是在網路上學習，然後慢慢的、一點一滴的修改我的CSS，才改出現在我要的版型

所以、拜託各位不要再用悄悄話來問我哪個CSS要怎麼改

您問的問題、如果我會的話，我一定會詳細的說明!!但是如果我不會的話，也希望您能諒解

我真的、真的不是CSS的PRO呀