TISTORY 메뉴

검색

가이드 본문

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

스킨 가이드

  1. 1. 준비단계
  2. 2. 디자인 구상
  3. 3. 스킨구조
  4. 4. 치환자
  5. 5. 스타일
  6. 6. 마무리
4. 치환자
시작하기전에
  • 브라우저에 블로그 타이틀과 현재 보고 있는 페이지 제목을 나타내 주려면 다음과 같은 코드를 <head> </head> 태그 안에 넣어주면 됩니다. <title>[##_title_##] :: [##_page_title_##]</title>
  • 브라우저에 RSS 버튼을 활성화시키기 위해서는 다음과 같은 코드를 <head> </head> 태그 안에 넣어주면 됩니다. <link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />
  • 자바스크립트를 지정해줄 영역을 선언하기 위해서 <body>안에 <s_t3></s_t3>를 넣어줘야 합니다.
A. header 영역

<div id="header"> ... </div>

header 영역 1-1. 블로그 제목
사용 치환자
[##_blog_link_##] : 블로그 주소
[##_title_##] : '관리자 > 환경설정 > 기본설정'에서 입력된 블로그 제목
사용 예시
<h1><a href="[##_blog_link_##]">[##_title_##]</a></h1>
1-2. 블로그 메뉴
사용 치환자
[##_blog_menu_##] : 메뉴편집을 사용할 수 있는 치환자

[##_localog_link_##] : 위치로그로 이동할 수 있는 주소
[##_taglog_link_##] : 태그로그로 이동할 수 있는 주소
[##_guestbook_link_##] : 방명록으로 이동할 수 있는 주소
사용 예시
<div class="blogMenu">
[##_blog_menu_##]
</div>

<div class="blogMenu">
<ul>
<li class="tab_localog"><a href="[##_localog_link_##]">위치로그</a> </li>
<li class="tab_taglog" ><a href="[##_taglog_link_##]">태그</a></li>
<li class="tab_guestbook" ><a href="[##_guestbook_link_##]">방명록</a></li>
</ul>
</div>
TOP
B. content 영역

<div id="content"> ... </div>

2-1. 검색 결과 리스트
사용예
search
사용 치환자
<s_list>, </s_list> : 검색시 보여줄 글목록을 출력할 영역입니다
<s_list_rep>, </s_list_rep> : 글목록을 반복하여 출력하는 기능을 수행합니다
[##_list_conform_##] : 검색어
[##_list_count_##] : 검색된 글의 갯수
[##_list_rep_link_##] : 글의 고유 주소
[##_list_rep_regdate_##] : 글이 작성된 날짜
[##_list_rep_title_##] : 글의 제목
[##_list_rep_rp_cnt_##] : 댓글 수
[##_list_rep_author_##] : 작성자 이름 (*팀블로그용 치환자)
사용 예시
<s_list>
<div class="searchList">
<h3>'[##_list_conform_##]'에 해당되는 글 [##_list_count_##]건</h3>
<ol>
<s_list_rep>
<li>
<span class="date">[##_list_rep_regdate_##]</span>
<a href="[##_list_rep_link_##]">[##_list_rep_title_##]</a>
<span class="cnt">[##_list_rep_rp_cnt_##]</span>
</li>
</s_list_rep>
</ol>
</div>
</s_list>
TOP
2-2. 검색 결과 댓글 리스트
이미지 보기
search reply
사용 치환자
<s_rplist>, </s_rplist> : 검색시 보여줄 댓글목록을 출력할 영역입니다
<s_rplist_rep>, </s_rplist_rep> : 글목록을 반복하여 출력하는 기능을 수행합니다
[##_rplist_conform_##] : 검색어
[##_rplist_count_##] : 검색된 댓글의 갯수
[##_rplist_rep_link_##] : 댓글의 고유 주소
[##_rplist_rep_regdate_##] : 댓글이 달린 날짜
[##_rplist_rep_body_##] : 댓글 내용의 일부
[##_rplist_rep_name_##] : 댓글을 쓴 사람의 이름
사용 예시
<s_rplist>
<div class="searchRplist">
<h3>'[##_rplist_conform_##]'에 해당되는 댓글 [##_rplist_count_##]건</h3>
<ol>
<s_rplist_rep>
<li>
<span class="date">[##_rplist_rep_regdate_##]</span>
<a href="[##_rplist_rep_link_##]">[##_rplist_rep_body_##]</a>
<span class="cnt">[##_rplist_rep_rp_cnt_##]</span>
<span class="name">[##_rplist_rep_name_##]</span>
</li>
</s_rplist_rep>
</ol>
</div>
</s_rplist>
TOP
2-3. 위치 로그
이미지 보기
local log
사용 치환자
<s_local>, </s_local> : '위치로그'메뉴를 클릭시 보여줄 위치로그를 출력할 영역입니다
<s_local_spot_rep>, </s_local_spot_rep> : '위치로그'의 위치 반복열입니다
[##_local_spot_depth_##] : 왼쪽부터의 깊이
[##_local_spot_##] : 장소 이름
<s_local_info_rep>, </s_local_info_rep> : '위치로그'의 글의 반복열입니다
[##_local_info_depth_##] : 왼쪽으로부터의 깊이
[##_local_info_link_##] : 글의 고유 주소
[##_local_info_title_##] : 글의 제목
[##_local_info_author_##] : 작성자 이름 (* 팀블로그용 치환자)
사용 예시
<s_local>
<div class="localog">
<h3>위치로그</h3>
<s_local_spot_rep>
<div class="spot" style="margin-left: [##_local_spot_depth_##]px">
[##_local_spot_##]
</div>
</s_local_spot_rep>
<s_local_info_rep>
<div class="info" style="margin-left: [##_local_info_depth_##]px">
<a href="[##_local_info_link_##]">[##_local_info_title_##]</a>
</div>
</s_local_info_rep>
</div>
</s_local>
TOP
2-4. 태그 클라우드
이미지 보기
tag log
사용 치환자
<s_tag>, </s_tag> : '태그'메뉴를 클릭시 보여줄 태그를 출력할 영역입니다
<s_tag_rep>, </s_tag_rep> : '태그'의 반복열입니다
[##_tag_link_##] : 개별 Tag 들에 관련된 글을 출력하기 위한 URL
[##_tag_class_##] : Tag Cloud 의 크기나 색깔을 설정할 수 있도록 해줍니다. 총 5단계의 레벨을 가지고 있으며, cloud1 ~ cloud5 까지 큰 것에서 작은 순서를 나타냅니다. 이 기능을 가지고 style 을 조정하시여 원하시는 스타일의 Tag Cloud 를 만드실 수 있습니다
[##_tag_name_##] : 태그의 이름
사용 예시
<s_tag>
<div class="taglog">
<h3>태그</h3>
<ul>
<s_tag_rep>
<li>
<a href="[##_tag_link_##]" class="[##_tag_class_##]">[##_tag_name_##]</a>
</li>
</s_tag_rep>
</ul>
</div>
</s_tag>
TOP
2-5. 방명록

<div class="guestbook"> ... </div>

이미지 보기
guestbook
사용 치환자
<s_guest>, </s_guest> : '방명록'메뉴를 클릭시 보여줄 방명록을 출력할 영역입니다
사용 예시
<s_guest>
<div class="guestbook">
<h3>방명록</h3>
<div class="guestWrite">15-1 글쓰기</div>
<div class="guestList">15-2 리스트 </div>
</div>
</s_guest>
TOP
2-5-1. 방명록 글쓰기
사용 치환자
<s_guest_input_form>, </s_guest_input_form> : 방명록을 달기 위한 입력폼을 출력합니다
<s_guest_member>, </s_guest_member> : 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
<s_guest_form>, </s_guest_form> : 로그인을 하지 않았을경우 보여지는 영역
[##_guest_input_name_##] : 이름입력 박스 이름
[##_guest_name_##] : 이름
[##_guest_input_password_##] : 비밀번호 입력 박스 이름
[##_guest_password_##] : 비밀번호
[##_guest_input_homepage_##] : 홈페이지 입력 박스 이름
[##_guest_homepage_##] : 홈페이지
[##_guest_textarea_body_##] : 글 내용 입력박스 이름
[##_guest_onclick_submit_##] : 입력 완료 온클릭 이벤트
사용 예시
<s_guest_input_form>
<div class="guestWrite">
<s_guest_member>
<s_guest_form>
<p>
<input type="text" name="[##_guest_input_name_##]" value="[##_guest_name_##]" /> <label for="name"> : 이름 </label>
</p>
<p>
<input type="password" maxlength="8" name="[##_guest_input_password_##]" value="[##_guest_password_##]" /> <label for="password"> : 패스워드 </label>
</p>
<p>
<input type="text" name="[##_guest_input_homepage_##]" value="[##_guest_homepage_##]" /> <label for="homepage"> : 홈페이지 </label>
</p>
</s_guest_form>
</s_guest_member>
<p>
<textarea name="[##_guest_textarea_body_##]" cols="50" rows="6"></textarea>
</p>
<p>
<input type="submit" value="안부 남기기" onclick="[##_guest_onclick_submit_##]"/>
</p>
</div>
</s_guest_input_form>
TOP
2-5-2. 방명록 리스트
사용 치환자
<s_guest_container>, </s_guest_container> : 등록된 '방명록' 리스트를 출력할 영역입니다
<s_guest_rep>, </s_guest_rep> : '방명록' 리스트의 반복열입니다
<s_guest_reply_container>, </s_guest_reply_container> : '방명록'의 댓글 리스트를 출력할 영역입니다.
<s_guest_reply_rep>, </s_guest_reply_rep> : '방명록' 댓글 리스트의 반복열입니다
[##_guest_rep_id_##] : 방명록의 고유 ID
[##_guest_rep_class_##] : 방명록의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘
[##_guest_rep_name_##] : 글쓴사람 이름
[##_guest_rep_date_##] : 글쓴 날짜
[##_guest_rep_desc_##] : 글 내용
[##_guest_rep_onclick_delete_##] : 답글 삭제 온클릭 이벤트
[##_guest_rep_onclick_reply_##] : 답글 수정 온클릭 이벤트
사용 예시
<s_guest_container>
<div class="guestList">
<ol>
<s_guest_rep>
<li id='[##_guest_rep_id_##]'>
<div class="[##_guest_rep_class_##]">
<span class="name">[##_guest_rep_name_##]</span>
<span class="date"> [##_guest_rep_date_##]</span>
<span class="control">
<a href="#" onclick="[##_guest_rep_onclick_delete_##]">MODIFY/DELETE</a>
<a href="#" onclick="[##_guest_rep_onclick_reply_##]">REPLY</a>
</span>
<p>[##_guest_rep_desc_##]</p>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id='[##_guest_rep_id_##]'>
<div class="[##_guest_rep_class_##]">
<span class="name">[##_guest_rep_name_##]</span>
<span class="date"> [##_guest_rep_date_##]</span>
<span class="control">
<a href="#" onclick="[##_guest_rep_onclick_delete_##]">
MODIFY/DELETE </a>
</span>
<p>[##_guest_rep_desc_##]</p>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ol>
</div>
</s_guest_container>
TOP
2-6. 공지사항 글
이미지 보기
notice
사용 치환자
<s_notice_rep>, </s_notice_rep> : '공지사항'이 출력되는 영역입니다
[##_notice_rep_link_##] : '공지사항'에 등록된 글의 고유 주소
[##_notice_rep_title_##] : 글 제목
[##_notice_rep_date_##] : 글쓴 날짜
[##_notice_rep_desc_##] : 본문 내용
[##_notice_rep_author_##] : 작성자 이름 (*팀블로그용 치환자)
사용 예시
<s_notice_rep>
<div class="entryNotice">
<div class="titleWrap">
<h2><a href="[##_notice_rep_link_##]">[##_notice_rep_title_##]</a></h2>
<span class="date"> [##_notice_rep_date_##]</span>
</div>
<div class="article">
[##_notice_rep_desc_##]
</div>
</div>
</s_notice_rep>
TOP
2-7. 보호 글
이미지 보기
protected
사용 치환자
<s_article_protected>, </s_article_protected> : '보호글'이 출력되는 영역입니다
[##_article_rep_link_##] : 보호글의 고유 주소
[##_article_rep_title_##] : 보호글의 제목
[##_article_rep_category_link_##] : 카테고리 링크
[##_article_rep_category_##] : 카테고리 명
[##_article_rep_date_##] : 글쓴 날짜
[##_article_password_##] : 보호글의 비밀번호 텍스트 박스의 Id값(label 사용 용도)
[##_article_dissolve_##] : 보호글의 비밀번호를 입력하고 엔터키나 확인버튼을 눌렀을 때 실행될 자바스크립트 코드가 들어갑니다.
[##_article_rep_author_##] : 작성자 이름 (*팀블로그용 치환자)
사용 예시
<s_article_protected>
<div class="entryProtected">
<h2><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h2>
<span class="date">[##_article_rep_date_##]</span>
<p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
<p><label for="[##_article_password_##]">비밀번호 ::</label>
<input type="password" maxlength="16" id="[##_article_password_##]" name="[##_article_password_##]" value="" onkeydown="if (event.keyCode == 13)[##_article_dissolve_##]" />
<input type="button" class="submit" value="submit" onclick="[##_article_dissolve_##]" />
</p>
</div>
</s_article_protected>
TOP
2-8. 페이지
이미지 보기
protected
사용 치환자
<s_page_rep>, </s_page_rep>: '페이지'가 출력되는 영역입니다.
(스킨에 페이지치환자가 존재하지 않는 경우 글 치환자에 페이지가 표시됩니다.)
[##_article_rep_link_##] : 고유 주소
[##_article_rep_title_##] : 제목
[##_article_rep_date_##] : 작성 날짜
[##_notice_rep_desc_##] : 본문 내용
[##_article_rep_author_##] : 작성자 이름 (*팀블로그용 치환자)
사용 예시
<s_page_rep>
<div>
<h2><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h2>
<div>
[##_article_rep_desc_##]
</div>
</div>
</s_page_rep>
TOP
2-9. 글
해당영역
<div class="entry"></div>
사용 치환자
<s_article_rep>, </s_article_rep> : 블로그 글이 출력되는 영역입니다
사용 예시
<s_article_rep>
<div class="entry"> 18. 글
<div class="titleWrap">18-1. 글 제목 | 카테고리 | 작성일 | 글 관리 </div>
<div class="article">18-2. 본문 </div>
<div class="tagTrail">18-3. 글 관련 태그 </div>
<div class="actionTrail">18-4. 트랙백 | 댓글 </div>
<div class="trackback">18-5. 트랙백 리스트 </div>
<div class="comment">18-6. 댓글
<div class="commentList">18-6-1. 댓글 리스트 </div>
<div class="commentWrite">18-6-2. 댓글 쓰기 </div>
</div>
</div>
</s_article_rep>
TOP
2-9-1. 글 관련 정보 : 글제목, 카테고리, 날짜, 관리자
이미지 보기
title
사용 치환자
[##_article_rep_link_##] : 블로그 글의 고유 주소
[##_article_rep_title_##] : 블로그 글의 제목
[##_article_rep_category_link_##] : 카테고리 링크
[##_article_rep_category_##] : 카테고리 명
[##_article_rep_date_##] : 글쓴 날짜
[##_article_rep_author_##] : 작성자 이름 (*팀블로그용 치환자)
<s_ad_div>, </s_ad_div> : 관리자 로그인시 글 관리 메뉴가 출력되는 영역입니다.
[##_s_ad_m_link_##] : 수정
[##_s_ad_m_onclick_##] : 수정 온클릭 이벤트
[##_s_ad_s1_label_##] : 글의 현재 상태
[##_s_ad_s2_onclick_##] : 상태 변경 온클릭 이벤트
[##_s_ad_s2_label_##] : 이후 상태
[##_s_ad_t_onclick_##] : 트랙백 온클릭 이벤트
[##_s_ad_d_onclick_##] : 삭제 온클릭 이벤트
사용 예시
<div class="titleWrap">
<h2><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h2>
<div class="category"><a href="[##_article_rep_category_link_##]">[##_article_rep_category_##]</a> </div>
<div class="date">[##_article_rep_date_##]</div>
<s_ad_div>
<div class="admin">
<a href="[##_s_ad_m_link_##]">수정</a> :
<a href="#" onclick="[##_s_ad_m_onclick_##]">수정(창으로)</a> |
([##_s_ad_s1_label_##])→<a href="#" onclick="[##_s_ad_s2_onclick_##]">[##_s_ad_s2_label_##]</a> |
<a href="#" onclick="[##_s_ad_t_onclick_##]">관련글(트랙백)</a> |
<a href="#" onclick="[##_s_ad_d_onclick_##]">삭제</a>
</div>
</s_ad_div>
</div>
TOP
2-9-2. 블로그 글
이미지 보기
article
사용 치환자
[##_article_rep_desc_##] : 블로그 본문 내용
사용 예시
<div class="article">
[##_article_rep_desc_##]
</div>
TOP
2-9-3. 글 관련 태그
이미지 보기
tag
사용 치환자
<s_tag_label>, </s_tag_label> : 글과 관련된 태그가 출력되는 영역입니다.
[##_tag_label_rep_##] : 태그 반복 출력
사용 예시
<s_tag_label>
<div class="tagTrail">
<span class="tagText">TAG </span> [##_tag_label_rep_##]
</div>
</s_tag_label>
TOP
2-9-4. 트랙백과 댓글 보이기/감추기
이미지 보기
article
사용 치환자
<s_tb_count>, </s_tb_count> : 트랙백의 갯수를 출력하는 영역
<s_rp_count>, </s_rp_count> : 댓글의 갯수를 출력하는 영역
[##_article_rep_tb_link_##] : 트랙백을 열고 닫는 온클릭 이벤트
[##_article_rep_tb_cnt_##] : 도착한 트랙백 수
[##_article_rep_rp_link_##] : 댓글을 열고 닫는 온클릭 이벤트
[##_article_rep_rp_cnt_##] : 답글 수
사용 예시
<div class="actionTrail">
<a href="#tb" onclick="[##_article_rep_tb_link_##]">
<s_tb_count>
트랙백 <span class="cnt">[##_article_rep_tb_cnt_##]</span>개
</s_tb_count>
</a>
,
<a href="#rp" onclick="[##_article_rep_rp_link_##]">
<s_rp_count>
댓글 <span class="cnt">[##_article_rep_rp_cnt_##]</span>개가 달렸습니다.
</s_rp_count>
</a>
</div>
TOP
2-9-5. 트랙백
이미지 보기
trackback
사용 치환자
<s_tb>, </s_tb> : 트랙백이 출력되는 영역입니다
[##_tb_address_##] : 이 글의 트랙백 주소
<s_tb_container>, </s_tb_container> : 받은 트랙백 리스트가 출력되는 영역입니다
<s_tb_rep>, </s_tb_rep> : 받은 트랙백을 반복 출력합니다
[##_tb_rep_id_##] : 각 트랙백 박스의 id로써, 별개의 트랙백을 구분하기 위해 사용합니다.(자동생성)
[##_tb_rep_url_##] : 보낸 트랙백 글의 고유 주소
[##_tb_rep_title_##] : 트랙백 제목
[##_tb_rep_site_##] : 트랙백 보낸 블로그 주소
[##_tb_rep_date_##] : 트랙백 보낸 시간
[##_tb_rep_onclick_delete_##] : 트랙백 삭제 온클릭 이벤트
[##_tb_rep_desc_##] : 트랙백 본문의 일부
사용 예시
<s_tb>
<div class="trackback">
<h3>Trackback Address :: [##_tb_address_##]</h3>
<s_tb_container>
<ol>
<s_tb_rep>
<li id="[##_tb_rep_id_##]">
<h4>Subject: <a href="[##_tb_rep_url_##]" onclick="window.open(this.href); return false" rel="external nofollow">[##_tb_rep_title_##]</a></h4>
<span class="from">Tracked from <span class="name"> [##_tb_rep_site_##] </span> </span>
<span class="date">[##_tb_rep_date_##]</span>
<a href="#" onclick="[##_tb_rep_onclick_delete_##]; return false" class="delete">&nbsp;<span>삭제</span></a>
<p>[##_tb_rep_desc_##]</p>
</li>
</s_tb_rep>
</ol>
</s_tb_container>
</div>
</s_tb>
TOP
2-9-6. 댓글
이미지 보기
comment
사용 치환자
<s_rp>, </s_rp> : 달린 댓글이 출력되는 영역입니다
사용 예시
<s_rp>
<div class="comment">
<h3>댓글을 달아 주세요 </h3>
<div class="commentList">18-6-1 리스트 </div>
<div class="commentWrite">18-6-2 글쓰기 </div>
</div>
</s_rp>
TOP
2-9-6-1. 댓글 리스트
사용 치환자
<s_rp_container> , </s_rp_container> : 달린 댓글이 출력되는 영역입니다
<s_rp_rep>, </s_rp_rep> : 댓글이 반복 출력됩니다
<s_rp2_container>, </s_rp2_container> : 댓글에 댓글이 출력되는 영역
<s_rp2_rep>, </s_rp2_rep> : 댓글에 댓글이 반복 출력됩니다
[##_rp_rep_id_##] : 전체 코멘트영역을 가리키는 아이디 - (최신 댓글을 클릭했을때 이 위치로 이동)
[##_rp_rep_class_##] : 비밀글, 관리자, 일반글에 따른 스타일을 지정하기 위한 치환자
[##_rp_rep_name_##] : 댓글작성자 이름
[##_rp_rep_logo_##] : 댓글작성자의 프로필 이미지
[##_rp_rep_date_##] : 댓글이 달린 날짜
[##_rp_rep_desc_##] : 댓글 내용
[##_rp_rep_link_##] : 댓글 주소
[##_rp_rep_onclick_delete_##] : 댓글 수정/삭제 온클릭 이벤트
[##_rp_rep_onclick_reply_##] : 댓글에 댓글 달기 온클릭 이벤트
사용 예시
<div class="commentList">
<s_rp_container>
<ol>
<s_rp_rep>
<li id='[##_rp_rep_id_##]'>
<div class="[##_rp_rep_class_##]">
<span class="image">[##_rp_rep_logo_##]</span>
<span class="name">[##_rp_rep_name_##]</span>
<span class="date"> [##_rp_rep_date_##]</span>
<span class="control">
<a href="[##_rp_rep_link_##]" class="address">&nbsp;<span>댓글주소</span></a>
<a href="#" onclick="[##_rp_rep_onclick_delete_##]" class="modify">&nbsp;<span>수정/삭제</span></a>
<a href="#" onclick="[##_rp_rep_onclick_reply_##]" class="write">&nbsp;<span>댓글쓰기</span></a>
</span>
<p>[##_rp_rep_desc_##]</p>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id='[##_rp_rep_id_##]'>
<div class="[##_rp_rep_class_##]">
<span class="image">[##_rp_rep_logo_##]</span>
<span class="name">[##_rp_rep_name_##]</span>
<span class="date"> [##_rp_rep_date_##]</span>
<span class="control">
<a href="[##_rp_rep_link_##]" class="address">&nbsp;<span>댓글주소</span> </a>
<a href="#" onclick="[##_rp_rep_onclick_delete_##]" class="modify">&nbsp;<span>수정/삭제</span></a>
</span>
<p>[##_rp_rep_desc_##]</p>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ol>
</s_rp_container>
</div>
TOP
2-9-6-2. 댓글 쓰기
사용 치환자
<s_rp_input_form>, </s_rp_input_form> : 댓글을 달기 위한 입력폼을 출력합니다
<s_rp_member>, </s_rp_member> : 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
<s_rp_guest>, </s_rp_guest> : 로그인을 하지 않았을경우 보여지는 영역
[##_article_rep_id_##] : 댓글주소: 댓글들을 구분하기위해 사용합니다. 한 화면에 있는 댓글들은 각각 고유의 값을 가지고 있습니다.
[##_rp_input_name_##] : 이름 입력 박스 이름
[##_guest_name_##] : 이름 입력
[##_rp_input_password_##] : 비밀번호 입력 박스 이름
[##_rp_admin_check_##] :
[##_rp_input_homepage_##] : 홈페이지 입력 박스 이름
[##_guest_homepage_##] : 홈페이지 입력
[##_rp_input_is_secret_##] : 비밀글 체크박스 이름
[##_rp_input_comment_##] : 댓글 입력 박스 이름
[##_rp_onclick_submit_##] : 댓글 입력 온클릭 이벤트
사용 예시
<s_rp_input_form>
<div class="commentWrite">
<s_rp_member>
<s_rp_guest>
<p>
<input type="text" name="[##_rp_input_name_##]" value="[##_guest_name_##]" />
<label for="name"> : 이름 </label>
</p>
<p>
<input type="password" maxlength="8" name="[##_rp_input_password_##]" value="[##_rp_admin_check_##]" />블로그 관리자일 경우 password field에 미리 비밀번호를 넣어놓기 위해 만들어 놓았던 치환자였으나, 지금은 사용되지 않음.. (현재는 블로그 관리자일 경우 password field가 나타나지 않음.)
<label for="password"> : 패스워드 </label>
</p>
<p>
<input type="text" class="homepage" name="[##_rp_input_homepage_##]" value="[##_guest_homepage_##]"/>
<label for="homepage"> : 홈페이지 </label>
</p>
</s_rp_guest>
<p class="secretWrap">
<input type="checkbox" name="[##_rp_input_is_secret_##]" class="checkbox" />
<label for="secret"> 비밀글 </label>
</p>
</s_rp_member>
<p>
<textarea name="[##_rp_input_comment_##]" rows="10" cols="50"></textarea>
</p>
<p>
<input type="submit" value="댓글 달기" onclick="[##_rp_onclick_submit_##]" />
</p>
</div>
</s_rp_input_form>
TOP
2-9-7. 퍼머링크 페이지 / 인덱스 페이지
이미지 보기
퍼머링크 페이지 / 인덱스 페이지
설명
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다.
(퍼머링크 페이지/인덱스 페이지 영역 밖에서 사용되는 치환자는 둘 모두에서 표시됩니다)
퍼머링크 페이지 치환자
  • <s_permalink_article_rep> ... </s_permalink_article_rep> : 퍼머링크 페이지일 때만 표시되는 영역입니다
  • (내부에서 사용하는 치환자는 <s_article_rep> 내부에서 사용하는 치환자와 동일합니다)
인덱스 페이지 치환자
  • <s_index_article_rep> ... </s_index_article_rep> : 인덱스 페이지일 때만 표시되는 영역입니다
  • [##_article_rep_link_##] : 블로그 글의 고유 주소
  • [##_article_rep_title_##] : 블로그 글의 제목
  • [##_article_rep_category_link_##] : 카테고리 주소
  • [##_article_rep_category_##] : 카테고리 이름
  • [##_article_rep_date_##] : 글쓴 날짜
  • [##_article_rep_author_##] : 작성자 이름
  • [##_article_rep_summary_##] : 글 내용 일부
  • <s_article_rep_thumbnail> ... </s_article_rep_thumbnail> : 대표 이미지 썸네일이 표시되는 영역입니다
    (대표 이미지가 없는 경우 표시되지 않음)
  • [##_article_rep_thumbnail_url_##] : 대표 이미지 썸네일 주소
  • [##_article_rep_thumbnail_raw_url_##] : 대표 이미지 원본 주소
사용 예시
<s_index_article_rep>
    <div class="list_content">
        <s_article_rep_thumbnail>
            <img src="[##_article_rep_thumbnail_url_##]">
        </s_article_rep_thumbnail>

        <a href="[##_article_rep_link_##]" class="link_post">
            <strong class="tit_post">[##_article_rep_title_##]</strong>
            <p class="txt_post">[##_article_rep_summary_##]</p>
        </a>

        <div class="detail_info">
            <a href="[##_article_rep_category_link_##]" class="link_cate">
                [##_article_rep_category_##]
            </a>
            <span class="txt_bar"></span>
            [##_article_rep_date_##]
        </div>
    </div>
</s_index_article_rep>
TOP
2-9-8. 카테고리의 다른 글
이미지 보기
카테고리의 다른 글
설명
글이 속한 카테고리의 다른 글을 보여줄 수 있습니다.
카테고리에 속하지 않은 글에는 표시되지 않습니다.
사용 치환자
  • <s_article_related> ... </s_article_related> : 카테고리 글 더보기 영역
  • [##_article_related_rep_type_##] : 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type)
  • [##_article_related_rep_link_##] : 글 주소
  • [##_article_related_rep_title_##] : 글 제목
  • [##_article_related_rep_date_##] : 글 작성시간
  • <s_article_related_rep_thumbnail> ... </s_article_related_rep_thumbnail> : 대표 이미지 썸네일이 표시되는 영역입니다 (대표 이미지가 없는 경우 표시되지 않음)
  • [##_article_related_rep_thumbnail_link_##] : 대표 이미지 썸네일 주소
사용 예시
<s_article_related>
    <div class="area_related">
        <strong class="tit_related">'[##_article_rep_category_##]' Related Articles</strong>
        <ul class="list_related">
            <s_article_related_rep>
                <li class="[##_article_related_rep_type_##]">
                    <a href="[##_article_related_rep_link_##]" class="link_related">
                        <s_article_related_rep_thumbnail>
                            <span class="thumb_related">
                                <img src="[##_article_related_rep_thumbnail_link_##]" class="img_related" alt="">
                            </span>
                        </s_article_related_rep_thumbnail>
                        <span class="txt_related">[##_article_related_rep_title_##]</span>
                        <span class="date_related">[##_article_related_rep_date_##]</span>
                        <span class="frame_related"></span>
                    </a>
                </li>
            </s_article_related_rep>
        </ul>
        <a href="[##_article_rep_category_link_##]" class="link_more">more</a>
    </div>
</s_article_related>
TOP
2-10. 페이징
이미지 보기
paging
사용 치환자
<s_paging>, </s_paging> : 페이지가 출력되는 영역입니다
<s_paging_rep>, </s_paging_rep> : 페이지가 반복 출력됩니다
[##_prev_page_##] : 이전 페이지 링크
[##_paging_rep_link_##] : 페이지 링크
[##_paging_rep_link_num_##] : 페이지 번호
[##_next_page_##] : 다음 페이지 링크
사용 예시
<s_paging>
<div class="paging">
<a [##_prev_page_##] class="[##_no_more_prev_##]">◀ PREV </a>
<span class="numbox">
<s_paging_rep>
<a [##_paging_rep_link_##] class="num">[[##_paging_rep_link_num_##]]</a>
</s_paging_rep>
</span>
<a [##_next_page_##] class="[##_no_more_next_##]">NEXT ▶</a>
</div>
</s_paging>
TOP
C. sidebar 영역

<div id="sidebar"> ... </div>

사용 치환자
<s_sidebar>, </s_sidebar> : 사이드바 영역을 나타냅니다
<s_sidebar_element>, </s_sidebar_element> : 관리자 페이지에서 블로그의 사이드바을 드래그앤 드랍으로 구성할수 있도록 각 엘리먼트를 인식시켜주는 역할을 합니다.
<!-- --> : 해당 사이드바나 사이드바 앨리먼트의 제목을 지정합니다. 이 주석은 관리자 페이지에서 각 사이드바나 사이드바 앨리먼트의 타이틀로 표현됩니다.
사용 예시
<div id="sidebar">
<s_sidebar>
<!-- 오른쪽 사이드바 -->
<s_sidebar_element><!-- 카테고리 --> ... <s_sidebar_element>
<s_sidebar_element><!--최근에 올라온 글 --> ... <s_sidebar_element>
.
.
.
<s_sidebar_element><!-- 카운터 -->... <s_sidebar_element>
</s_sidebar>
<s_sidebar>
<!-- 배너 삽입 사이드바 -->
<s_sidebar_element><!-- 배너 모듈 - 태터툴즈 --> ... <s_sidebar_element>
<s_sidebar_element><!-- 배너모듈 - 올린 --> ... <s_sidebar_element>
<s_sidebar_element><!-- 배너모듈 - RSS Feed -->... <s_sidebar_element>
</s_sidebar>
</div>
TOP
3-1. 블로그 이미지 와 블로그 설명
이미지 보기
blog information
사용 치환자
[##_image_##] : "관리자 > 환경설정 > 기본설정"의 프로필 이미지 주소를 출력
[##_blog_image_##] : "관리자 > 환경설정 > 기본설정"의 프로필 이미지를 포함한 IMG 태그 전체를 출력
[##_desc_##] : "관리자 > 환경설정 > 기본설정"의 블로그 설명을 출력
[##_blogger_##] : "관리자 > 환경설정 > 계정정보"의 필명을 출력
사용 예시
<s_sidebar_element>
<!-- 블로그 정보 -->
<div class="blogImage">
<div class="blogImage"><img src="[##_image_##]" alt="" /></div>
<div class="blogDesc">[##_desc_##] <span class="userID">[##_blogger_##]</span></div>
</div>
</s_sidebar_element>
또는
<s_sidebar_element>
<!-- 블로그 정보 -->
<div class="blogImage">
<div class="blogImage">[##_blog_image_##] </div>
<div class="blogDesc">[##_desc_##] <span class="userID">[##_blogger_##]</span></div>
</div>
</s_sidebar_element>
TOP
3-2. 공지사항 리스트
이미지 보기
notice
사용 치환자
<s_rct_notice>, </s_rct_notice> : 공지사항 리스트를 출력할 영역입니다
<s_rct_notice_rep>, </s_rct_notice_rep> : 공지사항 리스트를 반복 출력합니다
[##_notice_rep_link_##] : 공지사항의 고유 주소
[##_notice_rep_title_##] : 공지사항의 글 제목
사용 예시
<s_sidebar_element>
<!-- 공지사항 -->
<s_rct_notice>
<div class="notice">
<ul>
<s_rct_notice_rep>
<li><a href="[##_notice_rep_link_##]">[##_notice_rep_title_##]</a> </li>
</s_rct_notice_rep>
</ul>
</div>
</s_rct_notice>
</s_sidebar_element>
TOP
3-3. 관리자 메뉴
이미지 보기
notice
사용 치환자
[##_owner_url_##] : 관리자 페이지 주소
사용 예시
<s_sidebar_element>
<!-- 관리자 메뉴 -->
<div class="adminMenu">
<ul>
<li class="tab_admin"><a href="[##_owner_url_##]">관리자</a></li>
<li class="tab_write"><a href="[##_owner_url_##]/entry/post">글쓰기</a></li>
</ul>
</div>
</s_sidebar_element>
TOP
3-4. 검색
이미지 보기
search
사용 치환자
<s_search>, </s_search> : 검색 입력폼을 출력할 영역입니다
[##_search_name_##] : 검색어 입력 박스 이름
[##_search_text_##] : 검색어
[##_search_onclick_submit_##] : 검색 온클릭 이벤트
사용 예시
<s_sidebar_element>
<!-- 검색 -->
<div class="search">
<s_search>
<input type="text" name="[##_search_name_##]" value="[##_search_text_##]" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"/>
<input value="검색" type="button" onclick="[##_search_onclick_submit_##]" class="submit"/>
</s_search>
</div>
</s_sidebar_element>
TOP
3-5. 카테고리
이미지 보기
category
사용 치환자
[##_category_##] : 폴더 형식의 카테고리
[##_category_list_##] : 리스트 형식의 카테고리
사용 예시
<s_sidebar_element>
<!-- 카테고리 -->
<div class="category">
<h3>카테고리</h3>
[##_category_##]
</div>
or.............................
<div class="category">
<h3>카테고리</h3>
[##_category_list_##]
</div>
</s_sidebar_element>
TOP
3-6. 태그박스
이미지 보기
tag
사용 치환자
<s_random_tags>, </s_random_tags> : 태그를 반복 출력합니다
[##_tag_link_##] : 태그에 해당되는 주소
[##_tag_class_##] : Tag Cloud 의 크기나 색깔을 설정 (총 5단계의 레벨을 가지고 있으며, cloud1 ~ cloud5 까지 큰 것에서 작은 순서를 나타냅니다. 이 기능을 가지고 style 을 조정하시여 원하시는 스타일의 Tag Cloud 를 만드실 수 있습니다)
[##_tag_name_##] : 태그의 이름
사용 예시
<s_sidebar_element>
<!-- 태그 클라우드 -->
<div class="tagbox">
<h3>태그목록</h3>
<ul>
<s_random_tags>
<li> <a href="[##_tag_link_##]" class="[##_tag_class_##]"> [##_tag_name_##]</a></li>
</s_random_tags>
</ul>
</div>
</s_sidebar_element>
TOP
3-7. 최근에 올라온 글
이미지 보기
recent posts
사용 치환자
<s_rctps_rep>, </s_rctps_rep> : 최근에 올라온 글을 반복 출력합니다
[##_rctps_rep_link_##] : 최근글로 이동할 주소
[##_rctps_rep_title_##] : 최근글의 제목
[##_rctps_rep_rp_cnt_##] : 최근글에 달린 댓글 갯수
[##_rctps_rep_author_##] : 작성자 이름 (*팀블로그용 치환자)
사용 예시
<s_sidebar_element>
<!-- 최근에 올라온 글 -->
<div class="recentPost">
<h3>최근에 올라온 글 </h3>
<ul>
<s_rctps_rep>
<li>
<a href="[##_rctps_rep_link_##]"> [##_rctps_rep_title_##].</a>
<span class="cnt">[##_rctps_rep_rp_cnt_##]</span>
</li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>
TOP
3-8. 최근에 달린 댓글
이미지 보기
recent comment
사용 치환자
<s_rctrp_rep>, </s_rctrp_rep> : 댓글을 반복 출력합니다
[##_rctrp_rep_link_##] : 댓글로 이동할 주소
[##_rctrp_rep_desc_##] : 댓글의 본문 일부
[##_rctrp_rep_name_##] : 댓글을 쓴 사람 이름
[##_rctrp_rep_time_##] : 댓글을 쓴 시간
사용 예시
<s_sidebar_element>
<!-- 최근에 달린 댓글 -->
<div class="recentComment">
<h3>최근에 달린 댓글</h3>
<ul id="recentComments">
<s_rctrp_rep>
<li>
<a href="[##_rctrp_rep_link_##]">[##_rctrp_rep_desc_##].</a>
<span class="info_wrap">
<span class="name">[##_rctrp_rep_name_##]</span>
<span class="date">[##_rctrp_rep_time_##]</span>
</span>
</li>
</s_rctrp_rep>
</ul>
</div>
</s_sidebar_element>
TOP
3-9. 최근에 받은 트랙백
이미지 보기
recent trackback
사용 치환자
<s_rcttb_rep>, </s_rcttb_rep> : 최근에 받는 트랙백을 반복 출력합니다
[##_rcttb_rep_link_##] : 트랙백 주소
[##_rcttb_rep_desc_##] : 보내온 트랙백의 본문 일부
[##_rcttb_rep_name_##] : 트랙백을 보내온 사이트 이름
[##_rcttb_rep_time_##] : 트랙백 보낸 시간
사용 예시
<s_sidebar_element>
<!-- 최근에 받은 트랙백 -->
<div class="recentTrackback">
<h3>최근에 받은 트랙백</h3>
<ul>
<s_rcttb_rep>
<li>
<a href="[##_rcttb_rep_link_##]">[##_rcttb_rep_desc_##].</a>
<span class="info_wrap">
<span class="name">[##_rcttb_rep_name_##]</span>
<span class="date">[##_rcttb_rep_time_##]</span>
</span>
</li>
</s_rcttb_rep>
</ul>
</div>
</s_sidebar_element>
TOP
3-10. 글 보관함
이미지 보기
archive
사용 치환자
<s_archive_rep>, </s_archive_rep> : 월별 글 보관함을 출력합니다
[##_archive_rep_link_##] : 각 월별 보관함으로 이동할 주소
[##_archive_rep_date_##] : 년과 월을출력
[##_archive_rep_count_##] : 각 월별에 속한 글의 갯수
사용 예시
<s_sidebar_element>
<!-- 글 보관함 -->
<div class="archive">
<h3>글 보관함</h3>
<ul>
<s_archive_rep>
<li>
<a href="[##_archive_rep_link_##]">[##_archive_rep_date_##] </a>
<span class="cnt">([##_archive_rep_count_##])</span>
</li>
</s_archive_rep>
</ul>
</div>
</s_sidebar_element>
TOP
3-11. 달력
이미지 보기
Calender
사용 치환자
[##_calendar_##] : 달력 출력
사용 예시
<s_sidebar_element>
<!-- 달력 -->
<div class="calender">
<h3>달력</h3>
[##_calendar_##]
</div>
</s_sidebar_element>
TOP
3-12. 링크
이미지 보기
link
사용 치환자
<s_link_rep>, </s_link_rep> : 링크가 반복 출력됩니다
[##_link_url_##] : 사이트로 이동할 주소
[##_link_site_##] : 사이트 이름
사용 예시
<s_sidebar_element>
<!-- 링크 -->
<div class="link">
<h3>링크</h3>
<ul>
<s_link_rep>
<li>
<a href="[##_link_url_##]" onclick="window.open(this.href); return false"> [##_link_site_##].</a>
</li>
</s_link_rep>
</ul>
</div>
</s_sidebar_element>
TOP
3-13. 방문자 수
이미지 보기
counter
사용 치환자
[##_count_total_##] : 총 방문자수
[##_count_today_##] : 오늘 방문자수
[##_count_yesterday_##] : 어제 방문자수
사용 예시
<s_sidebar_element>
<!-- 방문자수 -->
<div class="counter">
<span class="total">Total : [##_count_total_##] </span>
<span class="today">Today : [##_count_today_##]</span>
<span class="yesterday">Yesterday : [##_count_yesterday_##]</span>
</div>
</s_sidebar_element>
TOP
3-14. 티스토리 로고, 구독하기 버튼
이미지 보기
etc
사용 치환자
[##_rss_url_##] : rss feed 주소
사용 예시
<s_sidebar_element>
<!-- 배너모듈 - 태터툴즈 -->
<div class="botton">
<a href="http://www.tattertools.com" onclick="window.open(this.href); return false">
<img src="./images/tattertools.gif" alt="Tattertools" /> </a>
</div>
</s_sidebar_element>
<s_sidebar_element>
<!-- 배너모듈 - 이올린 -->
<div class="botton">
<a href="http://www.eolin.com" onclick="window.open(this.href); return false">
<img src="http://tattertools.com/images/logo_eolin.gif" alt="Eolin" /> </a>
</div>
</s_sidebar_element>
<s_sidebar_element>
<!-- 배너모듈 - Rss Feed-->
<div class="botton">
<a href="[##_rss_url_##]" onclick="window.open(this.href); return false">
<img src="./images/rss.gif" alt="rss"/> </a>
</div>
</s_sidebar_element>
TOP
D. footer 영역

<div id="footer"> ... </div>

4-1. 메뉴
이미지 보기
footer
사용 치환자
[##_localog_link_##] : 지역로그 주소
[##_taglog_link_##] : 태그로그 주소
[##_guestbook_link_##] : 방명록 주소
[##_owner_url_##] : 관리자 주소
사용 예시
<div class="menu">
<a href="[##_localog_link_##]">위치로그</a>
<a href="[##_taglog_link_##]">태그</a>
<a href="[##_guestbook_link_##]">방명록</a>
<a href="[##_owner_url_##]">관리자</a>
</div>
4-2. 저작권 표기
사용 치환자
[##_tattertools_name_##] : 티스토리 서비스명
[##_tattertools_version_##] : 티스토리의 버전
[##_blog_link_##] : 블로그 주소
[##_blogger_##] : "관리자 > 환경설정 > 계정 정보"의 필명을 출력
사용 예시
<div class="copyright">
<a href="[##_blog_link_##]"> [##_blogger_##]</a>’s Blog is powered by <a href="http://www.tistory.com/" onclick="window.open(this.href); return false">[##_tattertools_name_##] [##_tattertools_version_##]</a> /
Designed by <a href="http://plyfly.net" onclick="window.open(this.href); return false">plyfly.net</a>
</div>
TOP