검색
검색어 지우기
검색 닫기
Google 앱
기본 메뉴
true

레이아웃에 사용할 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 코드는 블로그에 표시되지 않습니다.

여기에는 '글꼴 및 색상' 탭에서 각 글꼴 또는 색상을 수정할 수 있는 변수 목록이 제공됩니다. 각 변수에는 위 예에 표시된 정보와 다음에 설명된 정보가 있어야 합니다.

  • 이름 – 문자 또는 숫자를 사용할 수 있습니다. 템플릿에서 각 이름은 고유해야 합니다.
  • 설명 – '글꼴 및 색상' 섹션에 표시되는 설명을 추가합니다.
  • 유형 – '글꼴' 또는 '색상'입니다.
  • 기본값 – 기본값입니다. 색상의 경우 이 값은 16진수 색상 코드여야 합니다(예: #FF0066). 글꼴의 경우 양식 글꼴 스타일, 글꼴 두께, 글꼴 크기, 글꼴 모음 목록입니다.

변수 사용

변수가 설정된 후에 변수 값을 사용하려고 할 때 b:skin css에 $variable_name을 입력합니다.

변수 유형

템플릿 디자이너에는 특정 유형의 CSS 변수 집합을 수정할 수 있는 기능이 있습니다. 변수 유형을 설정하려면 다음 단계를 따르세요.

  • 색상 변수는 템플릿 디자이너에서 색상을 선택할 수 있는 색상 팔레트를 제공합니다.
  • 글꼴 변수는 템플릿 디자이너에서 크기 옵션 및 굵게 또는 기울임꼴 옵션과 함께 글꼴을 선택할 수 있는 선택 항목을 제공합니다.

위 예에서 bgcolor라는 변수는 흰색(#fff)으로 설정되어 있습니다. 다음 코드에서는 background: $bgcolor로 되어 있습니다. 따라서 백그라운드는 흰색이며 '글꼴 및 색상' 섹션에서 이 색상을 변경할 수 있습니다 .

참고: 기타 유형의 CSS 속성에 대한 변수는 만들 필요가 없습니다. 위 예의 margin:padding: 속성에서와 같이 이러한 변수는 일반적으로 CSS에 포함될 수 있습니다.

CSS에 대해 자세히 알아보기

이 도움말이 도움이 되었나요?
어떻게 하면 개선할 수 있을까요?