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

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

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


★본문의 너비

스킨편집의 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. 아참 사이드바도 위와 같은 방법으로 너비 변경하면 될 것 같네요. 다음에 해보고 글 올릴게요











많은 사이트에서 트랙백에 대해 설명해 놓았는데

간단 무식하게 설명하자면

"내 블로그에 쓴글을    다른 사람이 쓴글의    댓글로 다는 형식"

그림으로 설명하자면....  (그림 안보이면 확대 하세요)

사용자 삽입 이미지



이런 글이 있다고 치자

사용자 삽입 이미지



이글의 트랙백 주소는 위의 빨간 테두리 처럼  http://anycoool.tistory.com/trackback/23 이다.
   ★주소표시줄의 주소가 아니다...  밑의 트랙백 주소임을 확인하자

당신이 이 글에 트랙백으로 댓글을 달고 싶다면

▼일단 자신이 쓰고 싶은 글을 쓴다. 요로코롬

사용자 삽입 이미지




▼글을 쓰고 저장하면 밑의 관리 들어가서 글목록 확인해보면 밑의 빨간테두리 그림처럼 요로코롬 나온다.

사용자 삽입 이미지



▼방금 쓴글에서 밑의 그림 파란색 부분을 클릭하면 트랙백 보낼 주소를 입력하라고 한다.
   ★주소표시줄의 주소가 아니다.  밑의 트랙백 주소로 보내야한다.!!  
    그럼  빨간 테두리에  자기가 트랙백 댓글을 달고자하는 주소를 복사해서 붙인다.

사용자 삽입 이미지


▼그럼 트랙백이 이렇게 달린다.

사용자 삽입 이미지



끝!!


 




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