[網誌] 網誌新增套件兩三事 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告知，謝謝。