又一時手癢,趁假日的時候把網誌的「皮」換掉。據說是 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
沒有留言: