23. 티스토리 스킨 만들기 본문 태그, 트랙백
이번에는 본문 하단에 있는 태그와 트랙백 부분을 수정해보겠습니다.
간단한 수정만 할거니 대충 보셔도 됍니다.
먼저 HTML을 보시죠.
<s_tag_label>
<div class="tagTrail">
<span class="tagText">TAG </span> [ ##_tag_label_rep_##]
</div>
</s_tag_label>
<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>
<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"> <span>삭제</span></a>
<p>[ ##_tb_rep_desc_##]</p>
</li>
</s_tb_rep>
</ol>
</s_tb_container>
</div>
</s_tb>
오늘 수정할 부분만 떼어 왔습니다.
.tagTrail, .actionTrail, .trackback 세가지의 클래스를 사용합니다.
그냥 태그 영역과 트랙백, 댓글이 몇개 달렸습니다라고 나오는 부분과 트랙백 부분입니다.
댓글 부분은 방명록처럼 수정하는 부분이 많으니 따로 하겠습니다.
.tagTrail {font-size:14px;margin:5px 0 5px 0;}
.tagTrail a {font-size:14px;color:#08C;}
.actionTrail {font-size:14px;margin:5px 0 5px 0;}
.actionTrail a {font-size:14px;color:#08C;text-decoration:none;}
.actionTrail a:hover {color:#000;}
.trackback {font-size:14px;margin:5px 0 5px 0;}
.trackback a {font-size:14px;color:#08C;text-decoration:none;}
많이 수정한건 없구요.
전체적으로 font-size, margin, color 정도만 수정했네요.
자세한 설명은 따로 필요없겠죠?
저는 이 #0088CC란 색이 마음에 드는 것 같아요 ㅋ
링크는 전부 저 색으로 바꿔주고 있네요.
오늘은 간단한 것만 수정했기 때문에 크게 어렵진 않으실꺼에요~!
'Project > 티스토리 스킨' 카테고리의 다른 글
25. 티스토리 스킨 만들기 페이징 및 푸터 영역 (10) | 2014.02.23 |
---|---|
24. 티스토리 스킨 만들기 본문 댓글 (13) | 2014.02.22 |
22. 티스토리 스킨 만들기 본문 수정 (7) | 2014.02.20 |
21. 티스토리 스킨 만들기 비밀 글 (0) | 2014.02.19 |
20. 티스토리 스킨 만들기 공지사항 (6) | 2014.02.18 |