網誌改用 Windows 8 風格的樣板

又一時手癢,趁假日的時候把網誌的「皮」換掉。據說是 Windows 8 風格,但經過我東改西改,已經不是那麼回事了....

我用的樣板是這個: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 樣板客製化的相關文章

Post Comments

技術提供:Blogger.