[CSS 활용]티스토리 book club 스킨 커스텀2 (카테고리보기-썸네일 크기 및 텍스트 길이 수정)

티스토리 book club 스킨 커스텀 두번째

 

카테고리 보기 페이지
1. 썸네일 크기 및 위치 수정
2. 보여지는 설명글 텍스트 길이 수정 

 
 
 
기존

북클럽 스킨 카테고리 기존 썸네일

 
 
 
변경 후 
 

북클럼 스킨 카테고리 부분 커스텀 썸네일 

 
거의 이미지가 주를 이루는  블로그 이기에
글자보다 이미지가 더 돋보이는게 중요하므로, 
폰트가 많이 보이지 않아도 되는 방향으로 수정- 
 
방법: html 에서 썸네일 사이즈 수정 -> CSS 추가 수정 
 
 
 

 

현재 들어간 이미지 사이즈 확인 

개발자 모드로 들어가서 썸네일 속성을 보면
사이즈가 230x300으로 들어간 것을 볼 수 있다.
이 사이즈만 티스토리에서 제공하는 옵션에 맞게 설정을 바꿔 줄 예정이다. 
 
 

 
 

https://blogpack.tistory.com/167

자료 출처 : 티스토리 이미지 썸네일 치환자 완벽정리  https://blogpack.tistory.com/167
 
 
티스토리 썸네일 사이즈 옵션 중 C300x200 으로 수정
 
C230x300 ->  C300x200
 
 
 
 

1. html 편집  

 
 
 
 

2. html에서 검색하기 

html 탭에서 검색 (컨트롤+F) 눌러서 
<div class="post-item"> 아래에 있는 <img src= .....c230x300..> 을 수정해 준다
( ** c230x300검색하면 두군데가 나오는데 div class="post-item" 아래에 있는 것을 수정)  

북클럽 썸네일 이미지 사이즈 수정 전

북클럽 썸네일 이미지 사이즈 수정 후

 
숫자만 C300x200으로 변경한뒤 저장하기 
 
 
*Html 이나 CSS는 수정전에 반드시! 기존 내용을 모두 복사해서 메모장 혹은 편집기에 백업
🙈 잘못눌러서 날라가는 경우 되돌릴수가 엄씁...(스킨 백업을 해두면 괜찮지만..그래도..) 

티스토리 html 백업

 

3. CSS 수정 추가 

 
 
기존에 CSS가 적용되어서 이미지가 위로 올라간 형태가 되어 버린다.
 

html에서 썸네일 수정 후 적용 화면&nbsp;

 
개발자 모드에서 확인해 보면 transform이 적용되어 있다. 
( Y축으로 -25% 의미, 위로 25%가 올라간 상태) 

크롬 브라우저의 transform 이 적용된 상태&nbsp;

 
 
 

CSS 하단에 아래와 같이 추가하면 끗! 

 

썸네일 CSS 수정하기

/* 썸네일 위치 수정 */
.post-item .thum img {
    transform: translateY(-5%);
    -webkit-transform: translateY(-5%);
    -ms-transform: translateY(-5%);
}

/* line-clamp 글자줄 수 수정 */
.post-item .excerpt {
    line-height: 1.2rem;
    color: #aaa;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

 
 
 

#최종 적용 상태 

 
이러면 원하는 썸네일 사이즈 지정이 완료!