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

圖2

[ 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 屬性。

搜尋此網誌

數位便利貼