이미지가 마음에 드는 스킨을 찾았어도 본문의 너비라든지 사이드의 너비가 마음에 들지 않아

스킨 사용을 포기하는 경우가 적지 않더군요.

이번에는 본문의 너비를 넓히는 방법에 대해 알아 볼게요.


★본문의 너비

스킨편집의 html/css편집 화면으로 들어가서

CTRL+F 찾기를 이용해  " #content  "라는 부분을 찾는다.

#content {
  float:left;
  width:/*@post-width=30*/ 640px /*@*/;
  overflow:hidden;
  border : solid 1px #aaa;
  padding : 5px 25px 30px;
  margin : 0;
  background-color:#fff;        

※스킨의 종류(스킨 만든사람)에 따라 차이가 있으니 꼭 저런 모양이라고 볼수는 없다.

빨간부분이 본문의 너비 입니다.

 640(스킨에 따라 다릅니다 참고만 하세요)을 원하는 너비로 조정해주세요.



★본문기사의 너비

본문의 너비가 바뀌었으니 본문기사의 너비도 바꿔보겠습니다.

마찬가지로 CTRL+F 찾기 기능으로 " .article "을 찾습니다.

.article                 { width:/*@post-width=*/ 630px /*@*/; margin:5px 5px 30px 5px; overflow:hidden; color:/*@post-body-color=#333*/ #333 /*@*/; /*@post-body-font-family=font-family:;*/ font-family: inherit; /*@*/ /*@post-body-font-size=font-size:;*/ font-size: inherit; /*@*/}
.article a:link          { color:#5a5194;  text-decoration:none;}
.article a:visited       { color:#5a5194;  text-decoration:none;}
.article a:hover         { color:#7870ab;  text-decoration:underline;}
.article a:active        { color:#5a5194;  text-decoration:none;}
.article dt              { text-decoration:underline;}
.article dd              { margin-left:20px;  padding-bottom:10px;}


※스킨의 종류(스킨 만든사람)에 따라 차이가 있으니 꼭 저런 모양이라고 볼수는 없다.

빨간부분이 본문 기사의 너비 입니다. 원하는 너비로 바꿔주시면 됩니다.




ps. 아참 사이드바도 위와 같은 방법으로 너비 변경하면 될 것 같네요. 다음에 해보고 글 올릴게요











 




skin.html /CSS에 가서 Ctrl+F로 다음 중 " category " OR  " 카테고리 "를 검색

아래와 비슷한 것을 찾는다.



<!-- 카테고리 모듈 -->
     <div id="category">
      <h3>카테고리</h3>        
 
     </div>

※ 스킨 종류에 따라 위의 형식은 다릅니다. 
    <h3>  </h3>라고 된부분이 자신이 선택한 스킨의 사이드바의 카테고리 이름입니다.
     예를 들어서 선택한 스킨의 사이드바가 한글로 "카테고리" "최근 글 목록" "태그 클라우드" 등
     한글로 되어 있다면 <h3>  </h3> 안의 글자는 한글 일 것이며
     사이드바가 "category" "recent article" "tag cloud" 등
     영어로 되어 있다면 <h3>  </h3> 안의 글자는 영어 입니다.

</div>  위에
<script language="JavaScript">try{expandTree();}catch(e){}</script>
를 복사하여 붙입니다.(첨부파일 열고 카피해 주세요)


자바스크립트부분 밑의 파일 다운로드하셔서 카피페 하세요~▼



제 스킨의 html 은 이런 식으로 되어 있더군요. 참고하세요

 <!-- 카테고리 모듈 -->
     <div class="category">
      <h3>Categories</h3>
     

전체 all (89)
JLPT (50)
Sports (8)
COM오류수정 (3)
MEDIA (11)
취미 (8)
티스토리설정 (3)
SC (1)
... (3)
여행 (1)
韩语练习 (1)

 <script language="JavaScript">try{expandTree();}catch(e){}</script>

     </div>
    </s_sidebar_element>
   
    <s_sidebar_element>
    <!-- 태그목록 모듈 -->
     <div class="tagbox">
      <h3>Site Tags</h3>
      <ul>
       <s_random_tags>
        <li><a href="" class=""> </a></li>
       </s_random_tags>
      </ul>
     </div>
    </s_sidebar_element>

    <s_sidebar_element>
    <!-- 최근 포스트 모듈 -->
     <div class="recentPost">
      <h3>recent Article</h3>
      <ul>
       <s_rctps_rep>
        <li>
         <a href=""> </a>
         <span class="cnt"></span>










 

+ Recent posts