版面配置的字型和顏色標記

如果您熟知 HTML 或 CSS,您可以隨心所欲修改範本的字型和顏色。 不過,如果您想要讓範本使用 [Blogger 版面配置] 的 [字型和顏色] 功能,就需要遵循一些指南。 這麼做可讓您稍後若改變主意時能更加輕易地修改顏色。 這麼做在您與其他人共用範本,而他們想要稍微自訂其範本的情況下,也會相當有幫助。

在程式碼的 <head> 區段中,您需要有一對 <b:skin> </b:skin> 標記。 CSS 樣式宣告會插入在這些標記之間,附帶變數名稱,使您的設計能夠在 [字型和顏色] 網頁中發揮作用。 進一步討論之前,請參閱下列簡單的程式碼範例:

<head>

...
<b:skin>
  <style type='text/css'>
  /*
   * Variable definitions:
   *  <Variable name='bgcolor' description='Page Background Color' 
       type='color' default='#fff'/>
   */
  body {
    background: $bgcolor;
    margin: 0;
    padding: 40px 20px;
  }
  </style>
</b:skin>
</head>

CSS 程式碼的第一個部分包含在 /* and */ 意見標記中,使 CSS 程式碼僅供 Blogger 內部使用,而不會出現在您的 blog 上。 此處會有一份變數清單,每個您希望能在 [字型和顏色] 標籤中編輯的字型或顏色都有一個變數。 要讓上述範例能夠顯示資訊,每個變數都不可或缺,以下針對每個變數加以說明:

  • name: 此名稱只能包含字母或數字,而且範本中的每一個名稱必須是獨一無二的。
  • description - 可以是較具描述性的名稱,且可包含空格。 此變數會出現在 [字型和顏色] 標籤中。
  • type: 可以是「字型」或「顏色」。
  • default: 預設值。 針對顏色,此變數應包含十六進位顏色代碼,例如 #FF0066。 針對字型,此變數會是 font-style font-weight font-size font-family 格式的清單。

設定變數後,程式碼的其他部分看起來就像一般的 CSS,除了一項例外。 不論何時,當您想要使用您已設定變數的顏色或字型時,您需要輸入 $variable_name,而不是實際的顏色或字型。 在上述範例中,您可以看見我們建立了一個稱為 bgcolor 的變數,並將其設定為白色 (#fff)。 接著,在程式碼中,我們不會直接說將內文的背景屬性設定為白色,而是說 background: $bgcolor。 這樣仍然能夠使背景變成白色,差別在於如果我們想要的話,很容易就能在 [字型和顏色] 標籤中進行變更。

當您設計您的範本時,需要為您想要控制的所有字型和顏色新增許多變數。 不過,您不需要為其他類型的 CSS 屬性建立變數。 這些變數將如往常般包含在 CSS 中 (如同上述範例中的 margin:padding: 屬性)。

注意: 如果您需要加強您的 CSS,可以由這裡開始