티스토리 #2스킨을 보면 카테고리의 다른 글에 썸네일 이미지가 나옵니다.
#2스킨 뿐만 아니라 다른 스킨에도 적용할 수 있는데요 티스토리 스킨 가이드에 보면 치환자에 대해 설명이 되어 있습니다.
티스토리 설명 가이드: http://www.tistory.com/guide/skin/step3#2-9-8
치환자에 대한 가이드는 있지만, 스타일에 대한 가이드는 없습니다. 초보분들은 적용하기가 어려울 수도 있을 것 같아 간단하게 티스토리 #1스킨에 #2스킨에 있는 카테고리의 다른 글 스타일을 가져와서 적용해 보도록 하겠습니다.
우선 티스토리 관리자 페이지로 갑니다. 오른쪽에 보면 메뉴들이 있습니다.
스킨편집으로 갑니다. 스킨편집으로 가면 오른쪽에 html 편집 버튼이 있지요.
Html 편집 창으로 이동하셨다면 편집창 아무 데나 마우스 클릭해서 커서를 편집창안에 넣고 키보드 Ctrl + F 키를 누릅니다.
Ctrl + F키를 누르면 아래 이미지처럼 노란색 레이어가 나타납니다. 검색 부분에 아래처럼
s_tag_label 이라고 타이핑 하시고 엔터키를 누릅니다.
검색어 s_tag_label를 넣고 엔터키를 치면 아래 처럼 노란색으로 표시된 곳으로 이동 됩니다.
노란색으로 표시된 아래를 보시면 /div> 있지요. 이거 밑에 카테고리의 다른 글 치환자가 있는 html코드를 넣으면 됩니다.
html 코드는 티스토리 가이드에도 있지만, 편의상 아래에 있는 코드를 복사해서 넣으시고 편집창 상단에 저장 버튼을 눌러 저장합니다.
<!-- 카테고리의 다른 글 -->
<s_article_related>
<div class="area_related">
<strong class="tit_related">'' Related Articles</strong>
<ul class="list_related">
<s_article_related_rep>
<li class="">
<a href="" class="link_related">
<s_article_related_rep_thumbnail>
<span class="thumb_related">
<img src="//i1.daumcdn.net/thumb/C185x200/?fname=" class="img_related" alt="">
</span>
</s_article_related_rep_thumbnail>
<span class="txt_related"></span>
<span class="date_related"></span>
<span class="frame_related"></span>
</a>
</li>
</s_article_related_rep>
</ul>
<a href="" class="link_more">more</a>
</div>
</s_article_related>
마지막으로 스타일을 입히기 위해서 CSS 편집 창으로 이동합니다. 상단에 보시면 CSS라고 있습니다.
#2스킨에 스타일 시트를 보면 관련 기사라고 되어 있는데요 이 부분이 카테고리의 다른 글 보기입니다.
#2스킨에서 해당 부분만 가져와서 #1스킨에 넣으면 #1스킨에도 카테고리의 다른 글 보기에 이미지가 나타납니다.
아래 코드를 복사해서 CSS 편집 창 가장 아래에 붙여넣기를 하시면 되겠습니다.
/* 카테고리의 다른 글 */
/* 관련기사 */
.area_related {position:relative;width:820px;margin-top:54px}
.area_related .tit_related {font-weight:normal;font-size:20px;color:#222}
.list_related {overflow:hidden;margin-top:15px}
.list_related li {position:relative;float:left;margin-right:20px}
.list_related li:last-child { margin-right:0}
.list_related .link_related {display:block;overflow:hidden;position:relative;width:185px;height:200px;margin:0 auto;border:1px solid #e8e8e8;background:#fafafa;font-size:13px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;color:#fff}
.list_related .thumb_type .link_related {width:185px;height:200px;border:0 none}
.list_related .frame_related {display:none;position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:.4;filter:alpha(Opacity=40)}
.thumb_type .frame_related {display:block}
.list_related .thumb_related {position:absolute;left:0;top:0;width:100%;height:100%}
.list_related .txt_related {display:block;display:-webkit-box;overflow:hidden;position:relative;left:0;top:0;z-index:10;max-height:80px;padding:27px 20px 0;color:#5c5c5c;text-overflow:ellipsis;-webkit-line-clamp:4;-webkit-box-orient:vertical;word-wrap:break-word}
.list_related .link_related:hover .txt_related {text-decoration:underline}
.list_related .date_related {position:absolute;left:0;bottom:20px;z-index:10;width:100%;color:#a7a7a7}
.list_related .thumb_type .txt_related {color:#fff}
.list_related .thumb_type .date_related {color:#fff; opacity:0.7}
.area_related .link_more {position:absolute;right:20px;top:10px;font-size:13px;color:#a7a7a7;border-bottom: 1px solid #a7a7a7;text-decoration:none}
@media only screen and (max-width:738px){
.area_related {width:100%;margin-top:47px}
.area_related .tit_related {display:block;padding:0 15px;font-size:14px}
.list_related {padding:0 10px;margin-top:1px}
.list_related li {width:50%;margin:10px 0 0;padding:0 5px;-webkit-box-sizing:border-box;box-sizing:border-box}
.list_related .link_related {width:100%;height:100%;min-width:137px;min-height:150px}
.list_related .thumb_type .link_related {width:100%;height:100%}
.list_related .thumb_related .img_related {width:100%}
.list_related .txt_related {padding:18px 10px 0;font-size:14px;line-height:17px}
.list_related .date_related {font-size:13px;bottom:14px}
.list_related .txt_related { color:#222 }
.list_related .txt_related,
.list_related .date_related { font-family:applesdgothicneo-ultralight }
.area_related .link_more {right:15px;top:0}
}
@media only screen and (min-width:738px) and (max-width:1262px){
.area_related {width:100%;margin-top:54px}
.list_related {margin:15px -10px 0}
.list_related li {width:25%;margin-right:0;padding:0 10px;webikit-box-sizing:border-box;box-sizing:border-box}
.list_related .link_related {width:100%;max-width:183px}
.list_related .thumb_type .link_related {width:100%;max-width:185px}
.area_related .link_more {top:12px;right:0}
}
여기 까지 간단하게 티스토리 #1스킨에 카테고리의 다른 글 썸네일 이미지 넣기 였습니다.
