eyeball's Life(Old)

현재 내 테터툴즈 블로그에 적용중인 스킨은 이로츠님의 S1T2스킨이다. 깔끔하면서도 적당히 화려한 느낌의 상당히 괜찮은 스킨이라고 생각한다.
이 스킨에 예전부터 귀차니즘에 생각만 하고있던 베너달기를 마침내 실천하게 되었는데 시작부터 다시 귀차니즘과 싸워야했다. 다른 부분은 대부분 이미지가 모듈형식의 조립식인데 반해 카운터링크 부분은 카운터부분과 링크부분이 통이미지의 완제품으로 구성되어있어 이미지 수정의 압박이 대기중이었다.
따로 베너메뉴를 추가해볼까도 생각해봤지만 베너도 몇개 없고 무엇보다 귀찮았기 때문에 카운터링크 부분을 수정하기로 했다.(서론이 너무 길다...)

적용된 샘플은 멀리 갈 필요도 없이 이 블로그 왼쪽 맨 밑 메뉴인 카운터링크부분이다. 원래 붙어있던 RSS 및 테터툴즈 베너와 이로츠님의 카피라잇(?)을 분리 시키고 그 사이에 공간을 만들었으며 이 공간은 베너의 높이에 따라 유동적으로 변할 수 있도록 해두었다.
이같이 하려면 이미지파일과 소스를 수정해야하는데 먼저 편집한 이미지 파일은 다음과 같다.


파일 이름은 미관상 이로츠님의 방식을 그대로 적용했다.
아래는 skin.html과 style.css파일의 수정부분이다.

skin.html파일 118번줄부터 {}는 []로 수정 <div id="counter">     <table cellpadding="0" cellspacing="0" width="100%" class="tl_fx">     <col width="100%" />     <tr><td class="title"></td></tr>     <tr><td class="area"><B>{##_count_today_##}</B><br />{##_count_yesterday_##}<br />{##_count_total_##}</td></tr>     <tr><td class="trbanner">         <table cellpadding="0" cellspacing="0" width="100%" class="tl_fx">         <col width="1" /><col width="57" /><col width="1" /><col width="140" /><col width="1" />         <tr><td></td><td class="link_rss"><a href="https://eyeball87.tistory.com/rss" target="_blank"><img src='./images/yrots_left_cl_image.gif' width='57' height='35' alt="RSS FEEDBACK"></a></td><td></td><td class="link_tattertools"><a href="http://www.tattertools.com/" target="_blank"><img src='./images/yrots_left_cl_image.gif' width='140' height='35' alt="TATTERTOOLS"></a></td><td></td></tr>        </table>     </td></tr>    <!-- //사용자 베너 주석 시작     <tr><td class="dvline"></td></tr>     <tr><td class="userbanner">         <table cellpadding="0" cellspacing="0" width="100%" class="tl_fx">         <!-- 원하는 형식의 표를 만들어 베너 삽입(베너 폭 제한 198) -->         이 부분에 적당히 태그 짜서 베너 넣으면 됩니다.         베너크기는 198px를 넘지 않도록 주의하세요.         <!-- 베너 삽입 끝 -->         </table>     </td></tr>    //사용자 베너 주석 끝 -->     <tr><td class="bottom">         <table cellpadding="0" cellspacing="0" width="100%" class="tl_fx">         <col width="1" /><col width="198" /><col width="1" />         <tr><td colspan="3" class="mline"></td></tr>         <tr><td></td><td class="link_yrots"><a href="http://www.yrots.com/" target="_blank"><img src='./images/yrots_left_cl_image.gif' width='198' height='32' alt="YROTS-STORY"></a></td><td></td></tr>        <tr><td colspan="3" class="mline"></td></tr>         </table>     </td></tr>     </table> </div>

style.css파일 169번줄부터 #item_left #counter .title            { width: 100%; height: 30px; background: url('./images/yrots_left_cl_title.gif') no-repeat; } #item_left #counter .area             { width: 100%; height: 81px; background: url('./images/yrots_left_cl_ground.gif') repeat; vertical-align: top; text-align: left; font: 9px tahoma, verdana; padding-left: 67px; line-height: 27px; } #item_left #counter .link_rss         { width: 57px; height: 35; } #item_left #counter .link_tattertools { width: 140px; height:35; } #item_left #counter .link_yrots       { width: 198px; height: 32px; } #item_left #counter .mline            { height: 1px; } #item_left #counter .dvline           { height: 1px; background: url('./images/yrots_left_cl_dvline.gif') no-repeat; } #item_left #counter .userbanner       { width: 100%; background: url('./images/yrots_left_cl_bannerbg.gif') repeat; padding-top: 3px; padding-bottom: 3px; } #item_left #counter .trbanner         { width: 100%; height: 35px; background: url('./images/yrots_left_cl_trbanner.gif') no-repeat; } #item_left #counter .bottom           { width: 100%; height: 34px; background: url('./images/yrots_left_cl_bottom.gif') no-repeat; }

위의 소스를 해당 파일의 해당부분에다가 있던내용 지우고 붙여넣고 주석을 제거하면 된다. 이로츠님이 소스 정리를 아이템별로 띄워놓으셔서 금방 찾을 수 있을 것이다.
위 내용은 S1T2기준으로 작성되었지만 이로츠님의 다른 스킨에도 적용될 것이라 생각한다.
혹여 본인과 같은 스킨을 사용중인 분들중에 이미지 편집이 귀찮은 사람은 위의 이미지 4개를 저장해서 그대로 이미지 디렉토리에 덮어씌워도 된다.(1px짜리 2개는... 재량껏...)