網頁

Blogger Template 的 CSS 外觀說明 (Variable definitions)

[ 前言 ]
Google Blogger 是一個自由且擴充容易的部落格(Blog),可惜的是 Blogger 預設的模板樣式 (template) 太單調,選擇性不多,想自己修改又看不懂,雖然網路上很多免費的模板,可是套用了又有一定的風險,例如編輯鉛筆的圖示不見,原本該有的功能失效,甚至跳出一堆錯誤訊息視窗等等,而且規格似乎沒有統一,每套用一次就要重新了解模板內容,真的很讓人頭痛。

為了解決上述問題,最好的方法就是自己動手修改模板 (template) ,或許你會說:「我都看不懂,要如何改?」那麼你不仿繼續往下閱讀,或許會對 Blogger 有更進一步了解哦。

[ CSS 的 Variable definitions 說明 ]
我們以 Blogger 範本的 Minima 來說明,首先在 Blogger 管理頁面 -> 版面配置 -> 修改 HTML,搜尋<b:skin>,接著在搜尋</b:skin>,在<b:skin>...</b:skin>之間放的就是變數定義CSS 程式碼,如下列程式碼所示。

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Minima
Designer: Douglas Bowman
URL:      www.stopdesign.com
Date:     26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions
   ====================
  變數定義...
*/

CSS 程式碼...

]]></b:skin>
其中只要在 /* ... */ 之間的任何文字都屬於註解不會被執行,那你會問:「這樣變數定義的部份不就沒用了嗎?」問的很好,因為變數定義的部份僅供 Blogger 內部使用,但是又不想讓它顯示於 Blogger 上,所以才加上 /* ... */ 註解掉,變數定義的部份是用來調整 Blogger 管理頁面 -> 版面配置 -> 字型和顏色,稍後會再做說明,先來看看變數定義區的部分,如下列程式碼所示。
<Variable name="bgcolor" description="Page Background Color"
          type="color" default="#fff" value="#ffffff">

   略...

<Variable name="bodyfont" description="Text Font"
          type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">

   略...
在 [字型和顏色] 標籤中編輯的字型或顏色都有一個變數。 要讓上述範例能夠顯示資訊,每個變數都不可或缺,以下針對每個變數加以說明:
  • name:此名稱只能包含字母或數字,而且範本中的每一個名稱必須是獨一無二的。
  • description:可以是較具描述性的名稱,且可包含空格。 此變數會出現在 [字型和顏色] 標籤中。
  • type:可以是「字型(font)」或「顏色(color)」。
  • default:預設值。 針對顏色,此變數應包含十六進位顏色代碼,例如 #FF0066。 針對字型,此變數會是 font-style font-weight font-size font-family 格式的清單,配合圖1。
  • value:目前的顏色或字型,配合圖1和圖2。
圖1
Blogger 模板顏色

圖2
Blogger 模板字型

[ CSS 變數使用範例 ]
未使用變數:
body {
  background:#ffffff;
  color:#ffffff;
  margin: 0;
  padding: 40px 20px;
}
使用變數:
/*
<Variable name="bgcolor" description="Page Background Color"
          type="color" default="#fff" value="#ffffff">
*/

body {
  background:$bgcolor;
  color:$bgcolor;
  margin: 0;
  padding: 40px 20px;
}
設定變數後,CSS 程式碼的其他部分看起來就像一般的 CSS,除了 background 和 color 例外。不論何時,當您想要使用已設定變數的顏色或字型時,您需要輸入 $name,name 就是你設定的變數名稱,例如已經設定好 bgcolor 的變數,所以就輸入 $bgcolor 而不是實際的顏色或字型。

總結來說,不使用變數的 background (背景顏色) 和 color (字型顏色) 如果要設定白色,就要加上 #ffffff,如果使用變數就改成 $bgcolor,你可能會問:「這樣做有什麼好處,感覺好麻煩還要多設定變數。」這樣做的好處就是當你使用多個相同顏色的字型或是背景時,只要更改變數的 value 值就好,不需要逐一更改其他的 CSS 屬性。

沒有留言:

張貼留言

1. 文章如有錯誤,歡迎指正。
2. 請勿打廣告,違者一律刪。
3. 歡迎您提供寶貴的意見。