2010年12月23日 星期四

-步驟-Blogger 動態背景圖片,首頁使用大圖,內頁使用小圖並放大文章內容字體
conditional change background image and resize post body font - my Blogger template tweak, using Picture Window

-- 2011.01.25 更新:請不要採用本文,改用更簡便的方式達成同樣的功能,參考這篇新發表的文章「-步驟-新作法!Blogger 動態背景圖片,首頁使用大圖,內頁使用小圖,並在首頁將文章內容的字體縮小 」。
2011.01.25 update: please do not use the following steps. check this latest post instead: "new method! conditional change background image and resize post body font - my Blogger template tweak, using Picture Window." 
--

延續之前整理的 Blogger TemplateBlogger Tags 筆記,我的部落格好不容易改版成功了,雖然不知道別人是否會用到,還是把步驟筆記起來吧!

Blogger 的預設樣板,不管是在網站中的首頁還是內頁,上方 header 的圖片大小,都是一模一樣的。不過,以視覺設計的觀點來看,首頁負責傳達整個網站的第一印象,最好是圖很大、資訊很豐富、給人繽紛熱鬧的感覺,而內頁的部份,主要負責顯示網站的內容,最好是文章的字又大又清楚,網頁開起來的速度夠快,其他的花花綠綠的東西則盡量減少,以免干擾閱讀。

此時,使用預設的固定版型的話,就沒辦法兼顧兩者,要不就是首頁有點單調,要不就是內頁太花太雜。為了解決這個問題,動態版型的設計還是必要的。

在 Blogger 的 Header 製造切換大小圖片的動態版型效果,有兩種做法:


  1. 把圖片放在頁首內容之中:在 Blogger 樣板的 header 區段,插入兩個 widget 小工具,其中一個放入大圖,另一個放入小圖,然後在樣板中插入 b:if 條件式,讓大圖在首頁出現,小圖在內頁出現。
     
  2. 把圖片設定成樣式的一部分:在 Blogger 的樣板中,把其中一張圖設定為頁面背景,再利用頁面元素的小工具,插入一段 javascript ,在實際瀏覽時,抽換頁面背景的圖檔。

由於我用來改造的樣板是 Picture Window,這個樣板的背景圖片,原本就是設定在 html body 標籤的樣式中,因此,我就採用第二種方法來實作這個效果。


樣板功能:header 的圖片,在首頁時用大圖,內頁時用小圖同時將文章內容的字體放大


首頁用大圖:

內頁用小圖,同時把下方文章內容的字體放大:
(另外,左側邊欄也消失了,不過側邊欄消失的功能實作起來比較複雜,另外所以寫一篇文章來介紹:Blogger 動態版型,瀏覽文章時讓左/右側邊欄消失,以文章區塊填滿側邊欄


實作方式:使用 html / javascript 小工具,插入自製的 javascript 程式碼。
  1. 準備兩張圖,一大一小。

    我是用慣用的 Adobe Illustrator 製作。
     
  2. 在 Blogger 後台的 Template Designer 的 Backgrounds 裡面,將大圖設定為底圖,取代 Picture Window 原本設定的底圖。

    原本,我是想要用小圖當預設的底圖的。因為,如果小圖當作預設,大圖只有首頁出現的話,那麼只需要在首頁一頁加上額外的語法,其他全部的內頁,就不需要額外加東西修改了,這樣一來,整個網站的速度,應該可以比較快。

    可是,我用來切換大小底圖的功能,是用 javascript 和 jQuery 實作的。不知道為什麼,這段 javascript 在首頁沒有作用,但在其他地方通通都可以有作用... 囧。

    所以,最後只好改成「在首頁之外的地方切換圖片」,也就是說,首頁的大圖,必須是預設的圖,總之最後就是這樣啦。
     
  3. 把小圖的檔案,上傳到某個可以公開存取的地方。

    我因為自己有架工作室網站,所以,是上傳到自己的智邦虛擬主機。一般網友可以上傳到 Picasa 或 Dropbox 等免費空間,上傳後,它們應該都有相關的選項,可以把圖片的資料夾設定成 public 公開存取。
     
  4. 在 Blogger 後台的 Page Elements 頁面元素裡面,在 footer 的區段,按下「新增小工具」,小工具的類型選擇 html / javascript。

    因為,footer 也就是頁尾,位於原始碼的靠近後面的地方,也就是說,讀取網頁的時候,會比較慢才讀到它,如此一來,就可以讓最重要的部落格的內容,優先秀出來,而這個比較不重要的花俏小功能,等其他重要的東西都讀取完以後,再慢慢出現就可以了。
     
  5. 新增小工具時,會跳出 widget 小工具視窗,此時,先把小工具的標題設定成一串怪怪文字,例如 keroro(這只是暫時性的,為了等一下方便在程式碼中找到它),內容則貼上這些程式碼:

    <script type="text/javascript">
    $("body").css("background","#000000 url(http://www.etblue.idv.tw/blogs/ETBlueTheAlienNewBlogger-s.png) no-repeat scroll top center");
    $(".header-outer").css("height","auto");
    $(".header-inner").css("padding-top","0");

    $(".post-body").css("font-size","large");

    </script>


    其中,紅色的那段網址,就是之前準備的小圖上傳後的網址,改成你自己的網址就可以了。

    #000000 代表全黑,這是我的網誌背景的底色,如果你的底色跟我不同,要改成你自己的,常見的底色是全白 #ffffff 。如果,在 template designer 中改了底色,那麼這段 javascript 的這個 #000000 也要改成相同的顏色。
     
  6. 儲存後,在頁尾區段,新增另一個 html / javascript 小工具,標題暫時叫做 kururu,內容則貼上這段程式碼:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
    </script>

    這段是 jQuery,一個懶人用的 javascript framework 的外掛語法,這段語法,一定要放在上面那個小工具的「前面」,這樣一來,小工具中的 $ 錢記號,也就代表 jQuery 的記號,才會產生作用。
     
  7. 到了這個步驟,目前產生的效果,應該會是「不管瀏覽哪一頁,header 的底圖都會變成小圖,而文章內容的字體都設定為large」,這是因為,剛才加入的兩個小工具,不管在哪個頁面都會產生作用的關係。所以,接下來要做的是,「讓這兩個小工具,只有在首頁以外的地方,才產生作用」。
     
  8. 接著把「展開小工具範本 」打勾,讓小工具內的詳細設定跑出來。
     
  9. 按 Ctrl + F 搜尋 keroro ,也就是我們剛才設定的小工具標題名稱。 這樣可以在落落長的樣板裡面,直接跳到我們要修改的程式碼附近。
     
  10. 然後,應該會找到像下面這段文字:

    <b:widget id='HTML2' locked='false' title='keroro' type='HTML'>
    <b:includable id='main'>
      <!-- only display title if it's non-empty -->
    ... ... ...
     

  11. 在 < b:includable id='main'> 的上面,插入下面這段樣板程式碼:(紅色字代表要插入的部份)

    <b:includable id='main'>
    <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <b:include name='content'/>
    </b:if>
    <b:includable id='main'>
    ... ... ...

     
  12. 然後把原本的 includable id 改成 content:(紅色字代表要修改的部份)

    <b:includable id='main'>
    <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <b:include name='content'/>
    </b:if>
    <b:includable id='content'>
    ... ... ...
     

  13. 到這裡,keroro 的任務就完成了,把這個暫時性的名稱刪掉:(紅色字代表要刪除的部份)

    <b:widget id='HTML2' locked='false' title='keroro' type='HTML'>
    <b:includable id='main'>
    ... ... ...


  14. 如此,便完成了第一個 html / javascript 小工具的設定,在首頁的時候,小工具不會產生作用,但只要在首頁以外的地方,就會產生作用。

    由於,剛才總共插入 2 個小工具,所以第二個小工具也要如法炮製,再按一次 Ctrl + F 搜尋 kururu ,然後把步驟 13 到步驟 15 重複做一遍。

  15. 到這裡,首頁用大圖、內頁用小圖的功能,應該就完成了。
      
  16. 首頁雖然用了大張的圖片,但圖片的下半部,大多都被網誌內容遮住了,導致視覺效果打折扣。所以,接下來要調整首頁的 header 的空間。

    在 Blogger 後台的 Design 的 Edit html 中,按下 Ctrl + F ,打開網頁瀏覽器的頁面搜尋功能,搜尋 header-outer,找到這段 CSS 後,多加入一行,把 height 設定成 280px,或者任何適合你圖片的高度。

    .header-outer {
      height:280px;
      background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
      _background-image: none;
    .....


    這會讓 header 的上下空間變大,以免首頁的大圖的下半段被網誌內容遮住。
     
  17. 搜尋 header-inner,在原本的 CSS 段落之後,多加入一段,把 padding-top 設定成 180px ,或者任何適合你圖片的高度。

    .header-inner {
    padding-top:180px;
    }


    這會讓部落格的 title 和 description 的位置往下移,以免 header 部份空間很大,部落格名稱和敘述卻擠在上面小角落,讓畫面不平衡。
     
  18. 再來是字體大小變化的細部設定,內頁的字體已經設定為 large 了,而首頁,在 Picture Window 的樣板中,預設的文章內容字體大小應該是 15px 的 90% 的 110% ... 約莫也是等於 15px 。

    我習慣設定字體的方式,是「預設字體的百分之幾」,而我的預設字體喜歡用 large / medium / small 而不是固定像素,總之,就是要修改一下 CSS 的部份。

    文章內容字體的設定方法很直覺,在編輯 HTML 的畫面中,先按 Ctrl + F 搜尋 Variable name="body.font" ,會出現像這樣的文字:

       <group description="Page Text" selector="body">
         <variable description="Font" name="body.font" type="font">
             default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

    把它改成這樣,讓預設字體的大小變成 large:

       <group description="Page Text" selector="body">
         <variable description="Font" name="body.font" type="font">
             default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal large Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     
  19. 再按 Ctrl + F 搜尋 .content-outer { ,會出現像這樣的文字:

    .content-outer {
      font-size: 90%;
    }

    把它改成 100% ,讓字體大小不要在 content-outer 層級被改變大小:

    .content-outer {
      font-size: 100%;
    }
     
  20. 再按 Ctrl + F 搜尋 .post-body { ,會找到像下面這段文字:

    .post-body {
      line-height: 1.4;
      font-size: 110%;
      position: relative;
    }

    我把他改成這樣:(紅色是修改或插入的部份)

    .post-body {
      line-height: 1.7;
      letter-spacing:.1em;
      font-size: 80%;
      position: relative;
    }

    line-height 是行高,letter-spacing 是字與字之間的間距,我喜歡把這兩個數值調大一些,這樣可以讓文章內容的字體有呼吸的空間,看起來比較舒服。font-size 80% 意思是字體大小是預設字體的 80% 大小。
     
  21. 現在,首頁的文章內容的字體,就會變成預設的 80% 了,離開首頁後,則會由 javascript 將文章內容的字體變為 large ,這也是我的網誌的字體的預設設定。如果用 Template Designer 設定預設字體大小的話,並沒有 large / medium / small 可以選,只能用 OOpx 來設定,總之,你可以用你自己的預設字體大小,去取代上面的 large,或者,要另外設定一個跟預設字體不相干的大小,也是 ok 的。
     
  22. 到這邊,切換大小圖片、切換大小字體的功能,就大功告成囉。