TISTORY 메뉴

검색

가이드 본문

티스토리에 대해서 알려드립니다.

스킨 가이드

  1. 1. 준비단계
  2. 2. 디자인 구상
  3. 3. 스킨구조
  4. 4. 치환자
  5. 5. 스타일
  6. 6. 마무리
6. 마무리
스킨제작 마무리하기

스킨을 제작했다면 다음 상황을 점검해 봐야 합니다. 아래 두 가지 파일이 없어도 스킨의 구성에는 크게 문제는 없지만,
자신이 제작한 스킨의 완성도롤 높이려면 꼭 필요한 파일입니다.

  • 사용중인 스킨 미리보기 이미지파일인 preview256.jpg 파일 (size : 256 X 192)
  • 스킨 목록 미리보기 이미지파일인 preview560.jpg 파일 (size : 560 X 420)
  • 스킨 상세 미리보기 이미지파일인 preview1600.jpg 파일 (size : 1600 X 1200)
  • 스킨의 디자인에 맞춘 출력을 설정해주는 index.xml 파일
A. 스킨 정보 파일 설명(index.html)
Information (스킨 관련 정보)
  • name : 스킨 이름
  • version : 스킨 버전
  • description : 스킨에 대한 설명
  • license : 스킨의 저작권
Author (제작자 정보)
  • name : 제작자 이름
  • homepage : 제작자 홈페이지
  • email : 제작자 이메일
Default (스킨에 맞춘 기본 출력값)
  • recentEntries : 사이드바의 최근글 표시 갯수
  • recentComments : 사이드바의 최근 댓글 표시 갯수
  • recentTrackbacks : 사이드바의 최근 트랙백 표시 갯수
  • itemsOnGuestbook : 한페이지에 표시될 방명록 갯수 ***
  • tagsInCloud : 사이드바에 표시될 태그 갯수
  • sortInCloud : 태그 클라우드 표현 방식 (1:인기도순, 2:이름순, 3:랜덤)
  • expandComment : 댓글영역 표현 방식 (0:감추기, 1:펼치기)
  • expandTrackback : 트랙백영역 표현 방식 (0:감추기, 1:펼치기)
  • lengthOfRecentNotice : 최근 공지 표현될 글자수
  • lengthOfRecentEntry : 최근 글 표현될 글자수
  • lengthOfRecentComment : 최근 댓글에 표현될 글자수
  • lengthOfRecentTrackback : 최근 트랙백에 표현될 글자수
  • lengthOfLink : 링크에 표현될 글자수
  • showListOnCategory : 카테고리 클릭시 리스트 표현(0:숨김, 1:보임)
  • showListOnArchive : 글보관함 클릭시 리스트 표현(0:숨김, 1:보임)
  • commentMessage : 댓글 표현 방법
    none : 댓글이 하나도 없을때
    single : 댓글이 하나 있을때
  • trackbackMessage : 트랙백 표현 방법
    none : 트랙백이 하나도 없을때
    single : 댓글이 하나 있을때
  • tree : 카테고리
    color : 카테고리 글자색
    bgColor : 카테고리 배경색
    activeColor : 선택시 글자색
    activeBgColor : 선택시 배경색
    labelLength : 표현될 카테고리 글자 수
    showValue : 카테고리 글 수 표현(0:숨김, 1:보임)
  • contentWidth : 콘텐츠영역 가로 사이즈, 이 사이즈에 맞춰 에디터의 위지윅이 제대로 구현된다.
TOP B. 샘플 보기 : 티스토리 기본 스킨의 예
<?xml version="1.0" encoding="utf-8"?>
<skin>
<information>
<name>기본 스킨</name>
<version>1.1</version>
<description>
<![CDATA[ 웹표준을 준수한 XHTML 기반의 Tistory 기본 스킨입니다.
시맨틱한 웹을 유지하기 위해 디자인 부분을 style.css 파일에 독립시켜 적용하였으며
자유롭게 디자인을 수정하실 수 있습니다.
블로그 이미지 사이즈 190px, 콘텐츠의 가로 사이즈 500px에 최적화되어 있습니다.
]]>
</description>
<license>
<![CDATA[자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.]]>
</license>
</information>
<author>
<name>tistory</name>
<homepage>http://notice.tistory.com</homepage>
<email>tistory@daum.net</email>
</author>
<default>
<recentEntries>5</recentEntries>
<recentComments>5</recentComments>
<recentTrackbacks>5</recentTrackbacks>
<itemsOnGuestbook>10</itemsOnGuestbook>
<tagsInCloud>30</tagsInCloud>
<sortInCloud>3</sortInCloud>
<expandComment>0</expandComment>
<expandTrackback>0</expandTrackback>
<lengthOfRecentNotice>25</lengthOfRecentNotice>
<lengthOfRecentEntry>27</lengthOfRecentEntry>
<lengthOfRecentComment>30</lengthOfRecentComment>
<lengthOfRecentTrackback>30</lengthOfRecentTrackback>
<lengthOfLink>30</lengthOfLink>
<showListOnCategory>1</showListOnCategory>
<showListOnArchive>1</showListOnArchive>
<commentMessage>
<none>댓글이 없습니다.</none>
<single>댓글 &lt;span class="cnt"&gt;하나&lt;/span&gt; 달렸습니다.</single>
</commentMessage>
<trackbackMessage>
<none>받은 트랙백이 없고</none>
<single>트랙백이 &lt;span class="cnt"&gt;하나&lt;/span&gt;이고</single>
</trackbackMessage>
<tree>
<color>000000</color>
<bgColor>ffffff</bgColor>
<activeColor>000000</activeColor>
<activeBgColor>eeeeee</activeBgColor>
<labelLength>27</labelLength>
<showValue>1</showValue>
</tree>
<contentWidth>500</contentWidth>
</default>
</skin>
C. 샘플 이미지 스킨정보파일 설명 이미지로 보기