-步驟-Blogger 彈性版面，隨著視窗大小調整寬度 Blogger flexible width (changes with browser window) - my Blogger template tweak, using Picture Window

Blogger 的樣板，預設都是「固定寬度」的，如果網友的螢幕比網頁的寬度小，那瀏覽器就會出現水平捲軸，要往右捲才看得到右邊的內容。如果螢幕比較大，又會在左右多出一堆空白，浪費了大大的螢幕。

雖然說，Blogger 後台有一個「Show mobile template」選項可以選，如果 Blogger 系統偵測到網友用手機上網，就會轉換成手機版的網頁。不過，現在可以拿來上網的東西，越來越千奇百怪，而電腦方面，一堆新的舊的電腦螢幕，大小也各自不同。總之，為了方便網友閱讀，我覺得彈性寬度的部落格還是非常必要的！（握拳）

樣板功能：網頁的寬度隨著使用者的視窗而調整，但是不要太寬，也不要太窄。

比 1440px 寬的螢幕：

寬度在 800px 到 1440px 之間的螢幕：

比 800px 窄的螢幕：

其實，Blogger 樣板的 CSS 裡面，已經有為了彈性寬度預先鋪路，版面的寬度有「最小寬度 min-width」跟「最大寬度 max-width」的設定，只是，預設的樣板，都把這兩個數值設定成同一個數字... 結果就是 min-width = max-width ，統統都是固定寬度。囧


彈性寬度實作的方法很簡單，只有牽涉到一組 CSS 而已，修改步驟如下：（以 Picture Window 範本為例）

1. 在 Blogger 後台的「設計 Design」的「編輯原始碼 Edit HTML」頁面中，按 Ctrl + F 搜尋 <b:template-skin> 這段文字，會找到像這樣的東西：
       <b:template-skin>
         <b:variable default='930px' name='content.width' type='length' value='1000px'/>
         <b:variable default='0' name='main.column.left.width' type='length' value='180px'/>
         <b:variable default='360px' name='main.column.right.width' type='length' value='180px'/>
   
         <![CDATA[
         body {
           min-width: $(content.width);
         }
   
         .content-outer, .content-fauxcolumn-outer, .region-inner {
           min-width: $(content.width);
           max-width: $(content.width);
           _width: $(content.width);
         }
   上面的 min-width 跟 max-width 都設定成同一個變數 content.width 了，難怪版面會變成固定寬度。
2. 把上面這段文字修改成這樣：（紅色代表有修改的部份）
       <b:template-skin>
         <b:variable default='930px' name='content.width' type='length' value='1440px'/>
         <b:variable default='0' name='main.column.left.width' type='length' value='180px'/>
         <b:variable default='360px' name='main.column.right.width' type='length' value='180px'/>
   
         <![CDATA[
         body {
           min-width: 800px;
         }
   
         .content-outer, .content-fauxcolumn-outer, .region-inner {
           min-width: 800px;
           max-width: $(content.width);
           width:100%;
         }
3. 大功告成！

說明：

第一處修改 1440px 是頁面的最大寬度，在 Template Designer 裡面，雖然可以用滑桿調整這個數值，但是最大只能到 1000px。如果要讓最大寬度可以更寬，就要在這邊用手動設定。這個數值，前面有一句「name='content.width'」意思是說，這個變數有一個用來代表它的名稱，叫做 content.width ，之後在 CSS 裡面可以用這個 content.width 來代表它。

第二處修改 min-width: 800px 是要把最小寬度獨立設定一個數字，不要跟最大寬度一樣，不然就沒有彈性寬度的效果了。

第三處修改的原理同上。

第四處修改 width:100% 正是彈性寬度的設定本身，不管使用者的瀏覽器視窗，寬度是 1900 像素也好，是 800 像素也好，我們網頁的寬度始終都是它的 100% 。

不過，因為有 max-width 的設定，當視窗大小超過 1440px 的時候，網頁的寬度還是維持在 1440px，這樣的好處是，不會因為網友的螢幕太大，就讓文章的左右寬度拉很長，導致一行有太多字，不容易閱讀。

而最小寬度 min-width 我是設定成 800px，原因是最古老的螢幕應該也有 800像素，而且，再窄下去的話文章內容大概就沒辦法看了，寧可讀者用水平捲軸來看。反正真正太小的螢幕，通常是手機螢幕，我已經設定了「自動切換到手機版網頁」了，就不在這邊替手機煩心。

以上就是 Blogger 樣板彈性寬度的實作方法，是不是很簡單呢？