Blogger 的樣板，預設都是「固定寬度」的，如果網友的螢幕比網頁的寬度小，那瀏覽器就會出現水平捲軸，要往右捲才看得到右邊的內容。如果螢幕比較大，又會在左右多出一堆空白，浪費了大大的螢幕。
雖然說，Blogger 後台有一個「Show mobile template」選項可以選，如果 Blogger 系統偵測到網友用手機上網，就會轉換成手機版的網頁。不過，現在可以拿來上網的東西，越來越千奇百怪，而電腦方面，一堆新的舊的電腦螢幕，大小也各自不同。總之，為了方便網友閱讀，我覺得彈性寬度的部落格還是非常必要的！（握拳）
樣板功能：網頁的寬度隨著使用者的視窗而調整，但是不要太寬，也不要太窄。
其實，Blogger 樣板的 CSS 裡面，已經有為了彈性寬度預先鋪路，版面的寬度有「最小寬度 min-width」跟「最大寬度 max-width」的設定，只是，預設的樣板，都把這兩個數值設定成同一個數字... 結果就是 min-width = max-width ，統統都是固定寬度。囧
彈性寬度實作的方法很簡單，只有牽涉到一組 CSS 而已，修改步驟如下：（以 Picture Window 範本為例）
在 Blogger 後台的「設計 Design」的「編輯原始碼 Edit HTML」頁面中，按 Ctrl + F 搜尋 這段文字，會找到像這樣的東西：
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 了，難怪版面會變成固定寬度。
把上面這段文字修改成這樣：（紅色代表有修改的部份）
body {
min-width: 800px;
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 800px;
max-width: $(content.width);
width:100%;
}
大功告成！
說明：
第一處修改 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 樣板彈性寬度的實作方法，是不是很簡單呢？
沒有留言:
張貼留言