다음 몇 가지 안내에 따라 블로그 템플릿의 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 코드는 블로그에 표시되지 않습니다.
여기에는 '글꼴 및 색상' 탭에서 각 글꼴 또는 색상을 수정할 수 있는 변수 목록이 제공됩니다. 각 변수에는 위 예에 표시된 정보와 다음에 설명된 정보가 있어야 합니다.
- 이름 – 문자 또는 숫자를 사용할 수 있습니다. 템플릿에서 각 이름은 고유해야 합니다.
- 설명 – '글꼴 및 색상' 섹션에 표시되는 설명을 추가합니다.
- 유형 – '글꼴' 또는 '색상'입니다.
- 기본값 – 기본값입니다. 색상의 경우 이 값은 16진수 색상 코드여야 합니다(예: #FF0066). 글꼴의 경우 양식 글꼴 스타일, 글꼴 두께, 글꼴 크기, 글꼴 모음 목록입니다.
변수 사용
변수가 설정된 후에 변수 값을 사용하려고 할 때 b:skin css에 $variable_name을 입력합니다.
변수 유형
템플릿 디자이너에는 특정 유형의 CSS 변수 집합을 수정할 수 있는 기능이 있습니다. 변수 유형을 설정하려면 다음 단계를 따르세요.
- 색상 변수는 템플릿 디자이너에서 색상을 선택할 수 있는 색상 팔레트를 제공합니다.
- 글꼴 변수는 템플릿 디자이너에서 크기 옵션 및 굵게 또는 기울임꼴 옵션과 함께 글꼴을 선택할 수 있는 선택 항목을 제공합니다.
위 예에서 bgcolor라는 변수는 흰색(#fff)으로 설정되어 있습니다. 다음 코드에서는 background: $bgcolor로 되어 있습니다. 따라서 백그라운드는 흰색이며 '글꼴 및 색상' 섹션에서 이 색상을 변경할 수 있습니다 .
참고: 기타 유형의 CSS 속성에 대한 변수는 만들 필요가 없습니다. 위 예의 margin: 및 padding: 속성에서와 같이 이러한 변수는 일반적으로 CSS에 포함될 수 있습니다.