又一時手癢，趁假日的時候把網誌的「皮」換掉。據說是 Windows 8 風格，但經過我東改西改，已經不是那麼回事了....
我用的樣板是這個：Windows 8 Concept Blogger Template。 該樣板的作者後來又推出了第二版：Windows 8 v2 Blogger Template，似乎又更好看些。
一如往常，套用新的樣板之後，免不了有一堆東西跑掉，需要手動修改樣板的原始碼。於是，又得再複習一遍 Google Blogger 的樣板結構和語法。這一來，幾個小時又飛了.... Orz
修改背景、字型、和超連結的顏色
我不喜歡太亮的背景，看久了眼睛容易疲勞。所以把背景色從 #FFFF 改成 #F0F0F0：
文章內容的字型顏色，則由原先的淺灰色 #666666 改為純黑色 #000000。
超連結的樣式，原本的顏色很接近內文，不明顯。於是也修改了一下：
結果像這樣：
修改側邊攔的標題樣式
我參考了 Windows 8 v2 Blogger Template 裡面的側邊欄樣式，用 Paint.NET 做了一個透明背景的視窗圖示，然後一邊修改，一邊用線上 CSS 編輯器調整到自己滿意為止。修改之後的側邊欄樣式：
其中的 background-position-x 和 background-position-y 是特別為 IE 加上去的，因為實際測試的結果， IE 10 似乎還是不認識 background-position 屬性。結果：
讓內文右邊留白，避免與側邊欄靠太近
原本的樣板，內文跟側邊欄靠得太近，閱讀時會產生干擾。這個部分，我修改了 .post-outer 樣式，利用 padding-right 屬性來增加內文右邊的留白區域。結果如下圖：
版面寬度
版面寬度原本是 960px，我改成了 1140px。這個部分可能有好幾個地方要改，可搜尋 "960px"，再逐一替換之。其中比較重要的是「content.width」這個變數，它定義了內容寬度。寫的比較好的樣板，會盡量使用此變數來控制版面的寬度，以減少每次變動頁面寬度時要搜尋替換多處樣式的麻煩。
另外，.content-outer 樣式的 width 屬性是 800px，也一併改為 1140px。這裡如果不跟著改，似乎不會影響網誌最終呈現的版面結構，而只會影響 Blogger 的「版面配置」這個管理頁面中呈現的網誌寬度。
加快 SyntaxHighlighter 的載入速度
先前是把 SyntaxHighlighter 的 .css 和 .js 檔案放在 hinet 空間，現在把這些檔案改放到 Google 伺服器上，載入速度似乎有比較快。
其他零碎的修改就不列出來了。
Blogger 樣板客製化的相關文章
我用的樣板是這個：Windows 8 Concept Blogger Template。 該樣板的作者後來又推出了第二版：Windows 8 v2 Blogger Template，似乎又更好看些。
注意：此樣板似乎有 bugs。套用之後，某些標準元件無法正常顯示，例如社群分享的按鈕。還好有備份原先的樣板，對照著修改，倒不至於太困難，就是花時間。
一如往常，套用新的樣板之後，免不了有一堆東西跑掉，需要手動修改樣板的原始碼。於是，又得再複習一遍 Google Blogger 的樣板結構和語法。這一來，幾個小時又飛了.... Orz
修改背景、字型、和超連結的顏色
我不喜歡太亮的背景，看久了眼睛容易疲勞。所以把背景色從 #FFFF 改成 #F0F0F0：
.content-fauxcolumns .fauxcolumn-inner {
background: #f0f0f0 repeat-x scroll top left;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
文章內容的字型顏色，則由原先的淺灰色 #666666 改為純黑色 #000000。
超連結的樣式，原本的顏色很接近內文，不明顯。於是也修改了一下：
a:link, a:visited {
text-decoration: none;
color: #000055;
}
a:hover {
color: #CF274B;
}
結果像這樣：
修改側邊攔的標題樣式
我參考了 Windows 8 v2 Blogger Template 裡面的側邊欄樣式，用 Paint.NET 做了一個透明背景的視窗圖示，然後一邊修改，一邊用線上 CSS 編輯器調整到自己滿意為止。修改之後的側邊欄樣式：
.main-inner .sidebar .widget h2 {
border-bottom: 0px solid #CFCFCF;
width:100%;
font-family: 微軟正黑體, Open sans,sans-serif;
font-size: 18px;
text-transform: uppercase;
background:#464646;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
border-top-left-radius:3px;
border-top-right-radius:3px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
text-indent: 30px;
padding-top: 7px;
padding-left: 6px;
margin-top:5px;
color:#FFFFFF;
background-image: url(https://dl.dropbox.com/u/12063392/Images/window_30x31.png);
background-repeat:no-repeat;
background-size: 24px 24px;
background-position: 0 50%;
background-position-x: 3px;
background-position-y: 50%;
background-origin: content-box;
}
其中的 background-position-x 和 background-position-y 是特別為 IE 加上去的，因為實際測試的結果， IE 10 似乎還是不認識 background-position 屬性。結果：
讓內文右邊留白，避免與側邊欄靠太近
原本的樣板，內文跟側邊欄靠得太近，閱讀時會產生干擾。這個部分，我修改了 .post-outer 樣式，利用 padding-right 屬性來增加內文右邊的留白區域。結果如下圖：
版面寬度
版面寬度原本是 960px，我改成了 1140px。這個部分可能有好幾個地方要改，可搜尋 "960px"，再逐一替換之。其中比較重要的是「content.width」這個變數，它定義了內容寬度。寫的比較好的樣板，會盡量使用此變數來控制版面的寬度，以減少每次變動頁面寬度時要搜尋替換多處樣式的麻煩。
另外，.content-outer 樣式的 width 屬性是 800px，也一併改為 1140px。這裡如果不跟著改，似乎不會影響網誌最終呈現的版面結構，而只會影響 Blogger 的「版面配置」這個管理頁面中呈現的網誌寬度。
加快 SyntaxHighlighter 的載入速度
先前是把 SyntaxHighlighter 的 .css 和 .js 檔案放在 hinet 空間，現在把這些檔案改放到 Google 伺服器上，載入速度似乎有比較快。
其他零碎的修改就不列出來了。
Blogger 樣板客製化的相關文章
- Blogger: make your blog fluid
- How To Add Gadgets Above Or Below The Header In Blogger （關鍵：section 元素的 maxwidgets 屬性）
- Add A Full Lenght Gadget Or Adsense Leaderboard Below Your Blog Header （關鍵：section 元素的 showaddelement 屬性）
- Page Elements Tags for Layouts
沒有留言: