23. 티스토리 스킨 만들기 본문 태그, 트랙백

2014.02.21 12:26
저자 : Kurien

이번에는 본문 하단에 있는 태그와 트랙백 부분을 수정해보겠습니다.

간단한 수정만 할거니 대충 보셔도 됍니다.



먼저 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">&nbsp;<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란 색이 마음에 드는 것 같아요 ㅋ

링크는 전부 저 색으로 바꿔주고 있네요.

오늘은 간단한 것만 수정했기 때문에 크게 어렵진 않으실꺼에요~!