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 Template 跟 Blogger Tags 筆記，我的部落格好不容易改版成功了，雖然不知道別人是否會用到，還是把步驟筆記起來吧！
Blogger 的預設樣板，不管是在網站中的首頁還是內頁，上方 header 的圖片大小，都是一模一樣的。不過，以視覺設計的觀點來看，首頁負責傳達整個網站的第一印象，最好是圖很大、資訊很豐富、給人繽紛熱鬧的感覺，而內頁的部份，主要負責顯示網站的內容，最好是文章的字又大又清楚，網頁開起來的速度夠快，其他的花花綠綠的東西則盡量減少，以免干擾閱讀。
此時，使用預設的固定版型的話，就沒辦法兼顧兩者，要不就是首頁有點單調，要不就是內頁太花太雜。為了解決這個問題，動態版型的設計還是必要的。
在 Blogger 的 Header 製造切換大小圖片的動態版型效果，有兩種做法：
- 把圖片放在頁首內容之中：在 Blogger 樣板的 header 區段，插入兩個 widget 小工具，其中一個放入大圖，另一個放入小圖，然後在樣板中插入 b:if 條件式，讓大圖在首頁出現，小圖在內頁出現。
- 把圖片設定成樣式的一部分：在 Blogger 的樣板中，把其中一張圖設定為頁面背景，再利用頁面元素的小工具，插入一段 javascript ，在實際瀏覽時，抽換頁面背景的圖檔。
由於我用來改造的樣板是 Picture Window，這個樣板的背景圖片，原本就是設定在 html body 標籤的樣式中，因此，我就採用第二種方法來實作這個效果。
樣板功能：header 的圖片，在首頁時用大圖，內頁時用小圖同時將文章內容的字體放大
首頁用大圖：
內頁用小圖，同時把下方文章內容的字體放大：
（另外，左側邊欄也消失了，不過側邊欄消失的功能實作起來比較複雜，另外所以寫一篇文章來介紹：Blogger 動態版型，瀏覽文章時讓左/右側邊欄消失，以文章區塊填滿側邊欄）
實作方式：使用 html / javascript 小工具，插入自製的 javascript 程式碼。
- 準備兩張圖，一大一小。
我是用慣用的 Adobe Illustrator 製作。
- 在 Blogger 後台的 Template Designer 的 Backgrounds 裡面，將大圖設定為底圖，取代 Picture Window 原本設定的底圖。
原本，我是想要用小圖當預設的底圖的。因為，如果小圖當作預設，大圖只有首頁出現的話，那麼只需要在首頁一頁加上額外的語法，其他全部的內頁，就不需要額外加東西修改了，這樣一來，整個網站的速度，應該可以比較快。
可是，我用來切換大小底圖的功能，是用 javascript 和 jQuery 實作的。不知道為什麼，這段 javascript 在首頁沒有作用，但在其他地方通通都可以有作用... 囧。
所以，最後只好改成「在首頁之外的地方切換圖片」，也就是說，首頁的大圖，必須是預設的圖，總之最後就是這樣啦。
- 把小圖的檔案，上傳到某個可以公開存取的地方。
我因為自己有架工作室網站，所以，是上傳到自己的智邦虛擬主機。一般網友可以上傳到 Picasa 或 Dropbox 等免費空間，上傳後，它們應該都有相關的選項，可以把圖片的資料夾設定成 public 公開存取。
- 在 Blogger 後台的 Page Elements 頁面元素裡面，在 footer 的區段，按下「新增小工具」，小工具的類型選擇 html / javascript。
因為，footer 也就是頁尾，位於原始碼的靠近後面的地方，也就是說，讀取網頁的時候，會比較慢才讀到它，如此一來，就可以讓最重要的部落格的內容，優先秀出來，而這個比較不重要的花俏小功能，等其他重要的東西都讀取完以後，再慢慢出現就可以了。
- 新增小工具時，會跳出 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 也要改成相同的顏色。
- 儲存後，在頁尾區段，新增另一個 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 的記號，才會產生作用。
- 到了這個步驟，目前產生的效果，應該會是「不管瀏覽哪一頁，header 的底圖都會變成小圖，而文章內容的字體都設定為large」，這是因為，剛才加入的兩個小工具，不管在哪個頁面都會產生作用的關係。所以，接下來要做的是，「讓這兩個小工具，只有在首頁以外的地方，才產生作用」。
- 接著把「展開小工具範本 」打勾，讓小工具內的詳細設定跑出來。
- 按 Ctrl + F 搜尋 keroro ，也就是我們剛才設定的小工具標題名稱。 這樣可以在落落長的樣板裡面，直接跳到我們要修改的程式碼附近。
- 然後，應該會找到像下面這段文字：
<b:widget id='HTML2' locked='false' title='keroro' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
... ... ...
- 在 < 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'>
... ... ...
- 然後把原本的 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'>
... ... ...
- 到這裡，keroro 的任務就完成了，把這個暫時性的名稱刪掉：（紅色字代表要刪除的部份）
<b:widget id='HTML2' locked='false' title='keroro' type='HTML'>
<b:includable id='main'>
... ... ...
- 如此，便完成了第一個 html / javascript 小工具的設定，在首頁的時候，小工具不會產生作用，但只要在首頁以外的地方，就會產生作用。
由於，剛才總共插入 2 個小工具，所以第二個小工具也要如法炮製，再按一次 Ctrl + F 搜尋 kururu ，然後把步驟 13 到步驟 15 重複做一遍。
- 到這裡，首頁用大圖、內頁用小圖的功能，應該就完成了。
- 首頁雖然用了大張的圖片，但圖片的下半部，大多都被網誌內容遮住了，導致視覺效果打折扣。所以，接下來要調整首頁的 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 的上下空間變大，以免首頁的大圖的下半段被網誌內容遮住。
- 搜尋 header-inner，在原本的 CSS 段落之後，多加入一段，把 padding-top 設定成 180px ，或者任何適合你圖片的高度。
.header-inner {
padding-top:180px;
}
這會讓部落格的 title 和 description 的位置往下移，以免 header 部份空間很大，部落格名稱和敘述卻擠在上面小角落，讓畫面不平衡。
- 再來是字體大小變化的細部設定，內頁的字體已經設定為 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"/>
- 再按 Ctrl + F 搜尋 .content-outer { ，會出現像這樣的文字：
.content-outer {
font-size: 90%;
}
把它改成 100% ，讓字體大小不要在 content-outer 層級被改變大小：
.content-outer {
font-size: 100%;
}
- 再按 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% 大小。
- 現在，首頁的文章內容的字體，就會變成預設的 80% 了，離開首頁後，則會由 javascript 將文章內容的字體變為 large ，這也是我的網誌的字體的預設設定。如果用 Template Designer 設定預設字體大小的話，並沒有 large / medium / small 可以選，只能用 OOpx 來設定，總之，你可以用你自己的預設字體大小，去取代上面的 large，或者，要另外設定一個跟預設字體不相干的大小，也是 ok 的。
- 到這邊，切換大小圖片、切換大小字體的功能，就大功告成囉。
沒有留言:
張貼留言