自訂版面配置的 CSS 標記

如要在範本設計工具中使用網誌範本的 CSS,請遵守以下規範。

設定變數

您必須在程式碼的 <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 程式碼不會顯示在您的網誌上。

此處會有一份變數清單,您要在「字型和顏色」分頁中編輯的每個字型或顏色都有一個變數。每個變數都不可或缺,才能傳達上述範例中顯示的資訊,說明如下:

  • name:可包含字母或數字。在範本中使用的名稱不得重複。
  • description:新增要在「字型和顏色」部分中顯示的說明。
  • type:「字型」或「顏色」。
  • default:預設值。針對顏色,此變數必須是十六進位顏色代碼 (例如 #FF0066)。針對字型,此變數則是 font-style font-weight font-size font-family 格式的清單。

使用變數

變數設定完成後,如要使用使用某一個變數值,請在 b:skin CSS 中輸入 $variable_name

變數類型

範本設計工具可協助您編輯特定的 CSS 變數類型組合。如何設定變數類型:

  • 在範本設計工具中,顏色變數會提供調色盤,供您選擇顏色。
  • 在範本設計工具中,字型變數會提供字型大小、粗體或斜體等相關設定選項。

在上述範例中,有一個名稱為 bgcolor 的變數設為白色 (#fff)。下一段程式碼中的 background: $bgcolor 會將背景設定為白色,而您可以在「字型和顏色」部分中進行變更。

注意:您不需要為其他類型的 CSS 屬性建立變數。一般來說,這些變數可包含在 CSS 中 (如上述範例中的 margin:padding: 屬性)。

進一步瞭解 CSS

這篇文章實用嗎?