바탕 글꼴과 최근 코멘트 옆에 넣기

2011. 4. 15. 15:52
모든 분들에게 다 답변을 못해드리는 점 양해 바랍니다. 이 스킨은 직접 커스터마이징해서 블로그 스킨 꾸미는 것을 배워보고자 하시는 분들에게 도움이 되고자 만들었습니다. 때문에 부족한 점이 많습니다. 이 스킨을 그대로 사용하셔도 좋습니다만, 이 스킨을 커스터마이징하는데 답변을 다 드릴 수 없는 사정을 이해해주시기라 믿습니다.

직접 커스터마이징하는 초보자의 방법은 html 소스 보기를 하신 후 해당 사항의 html 태그와 관련된 css 선택자를 찾는 것입니다. 그 후 css에 관한 검색을 해보시면 어렵지 않게 정보를 얻으실 수 있을 겁니다.

예를들자면 본문의 글꼴을 바꾸고 싶을 경우, html 소스보기를 해셔서 본문 전체를 감싸고 있는 html 태그를 찾아보세요. 그것이 <div class="entry">일 것입니다. 그리고 css에서 entry라는 선택자를 찾은 후 속성을 수정해주시면 됩니다. 아래와 같습니다.

1.글꼴 변경하는 방법은 쉽습니다.

css에서 .entry { ... } 부분과 .entry-title { ... } 부분을 찾으신 후 font-family에 "바탕"을 넣어주시면 됩니다. 그대로 font-family:... 부분을 복사해서 넣어보세요.


.entry {
    position: static;
    clear: both;
    display: block;
    padding:5px 0 5px 0;
    border-bottom:1px solid #ccc;
    color:#808080;
    font-family: "바탕", verdana,Georgia;
    font-size: 8pt;
    text-align:justify;
    line-height: 1.5em;
}


.entry-title h2 a { 
    float:left;
    padding:5px;
    background-color:#ffff00;
    color: #999; 
    font-size: 1.5em;
    font-weight: bold;
    font-family: "바탕", Arial, Verdana;
    text-align:justify;
}

2. 메뉴 옆에 최근 코멘트 넣는 방법입니다.

css에서 ul li에 해당되는 css 스타일을 따로 찾아서 커스터마이징 해보시길 바랍니다.
우선 티스토리 스킨가이드를 참고하세요.
http://www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin&page=4#3-8

<s_sidebar_element>
<!-- 최근에 달린 댓글 -->
<div class="recentComment">
<h3>최근에 달린 댓글</h3>
<ul id="recentComments">
<s_rctrp_rep>
<li>
<a href="">.</a>
<span class="info_wrap">
<span class="name"></span>
<span class="date"></span>
</span>
</li>
</s_rctrp_rep>
</ul>
</div>
</s_sidebar_element>


위의 코드가 티스토리 공식 최근 댓글이라고 보시면 됩니다. 크게 바뀌는 것은 없구요. 이 스킨의 카테고리 메뉴와 동일하게만 안내를 해드리겠습니다.

html에서 beta 부분에는 카테고리 메뉴만 있으니 추가를 해야겠죠.

<div class="beta">
  <div class="beta-inner">

     ....

  </div>
</div>


카테고리 메뉴 끝나는 </s_sidebar_element> 태그 아래에 다음의 코드를 넣어주세요.

<s_sidebar_element>
<!-- 최근에 달린 댓글 -->
    <div class="menu">
<h2>최근 댓글</h2>
<ul>
<s_rctrp_rep>
<li>
<a href="">. <span class="c_cnt"></span></a>
</li>
</s_rctrp_rep>
</ul>
</div>
</s_sidebar_element>

그리고 css에서 <h2>최근 댓글</h2> 제목 부분만 맞춰주면 될 것 같습니다. 앞서 말씀드린 대로 카테고리 메뉴와 크게 다르지 않다는 조건입니다.


#beta .menu h2 {
    font-size: 15px;   
    padding: 4px 6px;
}



'Customize' 카테고리의 다른 글

헤더에 이미지 넣는 방법  (0) 2010.11.06
Layout Project 소개  (0) 2010.09.02
본문 사이즈 넓히기  (0) 2010.06.30
폰트 색상 변경 방법  (0) 2010.06.15
관리자 로그인시 글 관리 메뉴가 출력  (0) 2010.05.09