2010年12月23日 星期四

-步驟-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 樣板彈性寬度的實作方法,是不是很簡單呢?