2010年5月20日 星期四

[網誌] 網誌新增套件兩三事 part3

Blogger網誌,固定版型的寬度大小之教學與分享。

我一直想固定網誌內容中左右的寬度大小,因為原本版型的CSS中是預設的視窗大小隨著每個人電腦的解析度而不同;如此一來,每行的字數和整篇文章的排版,可能就會和我原來發表時的想法與文字的斷句會有所出入。所以,我想要將網誌固定在某一個特定大小,以我的電腦螢幕17吋、解析度為1280*1024為例,我將網誌寬度設定在1280px,即使是使用24吋螢幕的1920*1200解析度進來瀏覽,也不會改變版型,而是形成左右留白的視窗畫面。

昨天晚上我花了一段時間研究(差點趕不上今天早上約好的interview),拿兩款Blogger原本預設的不同樣式版型(一個是左右留白固定在中間的版型、另一個則是原來我網誌內的版型),研究其CSS不同之處並不斷的在我網誌上試驗(怎麼有一種在compiler的感覺),最終好不容易被我研究出來了,也在此分享給各位。

首先,在登入Blogger 的控制台後,進入「版面配置」的「修改HTML」,勾選「展開小裝置範本」,然後搜尋 body 會找到類似下面的這段CSS語法:

body {
  background:$bgcolor;
  margin:0px auto; //....將網誌內容置中
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: left; //....是用來設定文字對齊的屬性(以靠左對齊為例)
  padding:15px; //....是用來作為同時設定四個邊留白的捷徑屬性(上下左右皆留白15px為例)
  max-width: 1280px; //....看您要將網誌寬度固定在多少像素(以17-19吋螢幕最佳解析度1280px為例)
 }

基本上,只要加入這四行CSS的語法,即可以固定網誌內容的寬度大小了。


再來,如果你擔心其他觀看網誌內容的人,其電腦螢幕解析度可能低於您設定的解析度,或者是將視窗縮小,就會發生網誌版型變形以及被裁切的可能(Blogger預設寬度好像是720px),這時候只要加入下列語法,即可解決這個問題了。

body {
  background:$bgcolor;
  margin:0px auto;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: left;
  padding:15px;
  min-width: 1024px;
  max-width: 1280px;
  behavior: expression(this.style.width=(document.documentElement.offsetWidth<1024)?"1024px":"100%");
}

和上述一樣在修改HTML中的 body 段落裡,加入這段語法,就可以將網誌的最小寬度設定在某一個像素,在當解析度較低或者縮小視窗的情況下,下方就會出現BAR捲軸,如此一來就不會影響到原本的版型,或者是裁切到網誌中的圖片大小了,如下圖。

《網誌寬度即使視窗縮小仍維持在我設定的1024px,下方即出現可以移動的捲軸。》


很久很久以前就從無名跳過來Google Blogger使用了,無非就是乾淨清爽的介面,還有就是可以任意地自行設計網誌版型,如果懂得HTML和CSS更可以完全設計出屬於自己的網誌風格。關於這篇內容,如果有不清楚的地方,再請留言或者EMAIL告知,謝謝。

0 回覆:

張貼留言