--------------------------------------------------------------------------------
引用文--
介紹版型放大教學篇，非常受用的一篇文章..
剛好適合到了痞客邦後覺得版型好小又不會調整語法的朋友參考看看..
謝謝zoza這位朋友
--------------------------------------------------------------------------------
引用內容如下：
這幾天，鬆散年餘的痞客小格因格友齊聚慢慢步向軌道
可怎麼看都覺得樣板屋款式太過壓縮空間
尤其看慣大字、大張照片的雙眼
一時之間很難適應這裡『甚麼都小小的』
在裝潢粉刷格屋的同時
好希望自己也能效法某一汽車廣告
輕唸咒語『踢大 ～』便可將空間增大
週六日因鐘點阿桑放假
我必須婦主中饋充任假日廚娘
週末煲湯的同時
將筆電、筆記、筆袋搬到廚房
準備來一次格子改建的大工程
感謝痞客的頁面設計有預覽功能
讓不太熟諳語法的我得以以神農氏嚐百草的實驗精神
對密密麻麻的語法
逐一反覆測試
並以筆記紀錄影響格局的幾個關鍵項目及數值
( 非紀錄不行，因為尚須起身巡視爐子上的湯鍋。)
經過三、四個小時的奮戰
終於實驗成功將版面放大
昨晚有不少格友問我方法為何
我想，與其我逐一答覆
不如公開分享給有需求的朋友
且也算是為自己重新整理留作紀錄
興許哪日看膩了裝潢又想整修門面
會再度派上用場呢！
痞客部落格版面樣式分二欄式和三欄式
因為想增大格文照片空間
因此一開始選版面樣式時即不考慮三欄式
進入 >> 管理後台 >> 部落格 >> 樣式管理 >> 自訂樣式 >> CSS原始碼編輯
仔細閱讀語法可以概略得知系統預設的各欄位尺寸規格
二欄式版面一般版面寬度為 950 px
直向可分 【版頭區】950*300 px 和其下的【內容區】
內容區又分【內文區】寬 650 px、【側欄區】寬 200 px
其餘 100（= 950 - 650 - 200 ) px 則分配至各欄區留白
若要加寬版面放置大尺寸照片
須更動【版面總寬度】以及【版頭區】與【內文區】
我的方法非常土法煉鋼
先用肉眼搜尋有width: 950px; width: 650px; 以及 height:300 px;的語法
然後逐一試驗它們是什麼欄位
得到以下結果( 為方便格友尋找，依語法順序排列。)
【文章內文區】.article-content {width: 650px; …
→ 650px 是系統預設 (以下同) , 可調整寬度。
【版面總寬度】#container3 {… width:950px; …
→ 可調整寬度；總寬度為最後一項的【主要內容區】寬度 + 300 px
【版頭高度】#header {…height:300px;…
→ 可視橫幅版頭圖照片尺寸調整高度
【部落格格名及描述的橫幅長條】#login-bar {…width:950px; …
→ 可調整寬度，視個人版形決定寬度。
【版頭橫圖】#banner {height:300px;…
→可視橫幅版頭圖照片尺寸調整高度
【部落格格名欄】 #banner h1 未調整
【部落格描述欄】#banner h2 →可調整左邊留邊空位 left:
及 寬度 width:(每個人版面總寬度不一，請自行調整。)
【主要內容區】#content {…width: 650px; … → 可調整寬度
調整好版面大小之後
若要輸入自己的橫幅照片
找到 #banner {height: 數字px; background:url (http://................. );
在紅字位置貼上自己照片所在位置的網址 ( 見※特別提醒第 2 點 )
此外，如想將側邊欄位以及回應回覆欄字體放大
先找到
body {... font-size: 數字px; → 可將回應、回覆以及側邊欄位標題字體變大
滑鼠繼續往下滾動，找到
.box-text {...font-size:數字px; → 可將側邊欄位文字變大
以上是格子版面放寬的步驟
在您準備開始動手之前，請務必詳細閱讀以下的特別提醒～
※特別提醒
1.請先想清楚自己版面要修改多寬，要放置多大尺寸的照片；
痞客不像雅虎完全免費服務，若是儲存圖檔容量到達一定限度，是需要付費的。
2.痞客的版頭照片只能提供 950*300 px 圖片，若是要選相簿裡自己的照片，
可能長度會不夠 (只有 VIP 才能顯示原尺寸圖檔)，
那麼，自己是否有存放圖片的其他網路平台 ( 例如 fb 或 Flickr ... )能提供圖片所在網址嗎？
3.請先選好自己喜歡的版面樣式再進行修改，以免再次更換樣式時須重來一次。
4.修改前先在電腦螢幕開二個CSS頁面，一為操作用，另一當作參考用，
免得不小心按下更改儲存時，尚有數值可對照修正回去。
留言列表
