티스토리 북클럽 스킨 관리 - 썸네일 크기 변경

티스토리 북클럽 스킨 최적화하기

 

북클럽 스킨으로 변경 후, 해야 할 일이 많은 것같네요. 그 중 썸네일 크기 변경을 하게 된 이유와 방법에 대해서 정리해 볼께요.

 

우선, 북클럽의 스킨 리스트 타입을 변경해주었습니다. 스킨편집화면으로 이동한 후, 스크롤바를 밑으로 내려주세요.

 

 

 

스킨 리스트 타입에는 네 가지가 있습니다.

- 북리뷰, 베스트셀러, 뉴북, 뉴스레터

 

저는 뉴북 타입을 선택했습니다. 원하는 타입을 선택 > 스킨 적용 > 새로고침을 해보면 어떻게 변경이 되는지 확인할 수 있습니다. 가장 마음에 드는 것으로 선택하시면 될 것같네요.

 

 

북리뷰 타입이나 베스트셀러 타입의 경우에는 대표 이미지(썸네일)가 너무나도 크게 설정이 됩니다.  반면, 뉴스레터 타입의 경우에는 대표 이미지 없이 글 내용만 소개가 되는 형식입니다. 저는 글 내용 옆에 이미지가 작게 나오는 뉴북 타입을 선택했습니다. 만일, 블로그 운영자님이 대표사진이 크게 부각되는 것을 원하신다면 북리뷰나 베스트셀러를 선택하시는 것이 좋겠죠?

 

 

뉴북을 선택하시면, 블로그 메인 화면이 아래와 같은 스타일로 변경됩니다. 그런데 아마 대표 이미지 (썸네일)가 깔끔하게 뜨지 않을 거예요. 크기 조절이 필요하다는 생각이 들어서 변경해보았습니다.

 

 

썸네일 크기 변경 시작해봅니다! 

 

먼저, 스크롤바를 다시 위로 올리셔서 'Html편집'으로 들어가보세요.

 

 

CSS 편집

 

CSS를 클릭하고, 스크롤바를 내려서 대략 2260번대로 움직여보세요. 제 경우에는 2262번 줄에 이미지 높이를 변경할 수 있는 곳이 있어요.

 

 

 

 

초기 설정은  auto로 되어 있을 거예요. 반면, width(너비)는 120px로 되어 있는 것이 보이죠? height(높이)도 너비와 동일한 크기로 변경하고자 120px로 수정했습니다.

 

지금은 150px로 다시 변경했어요. 이미지가 좀 작은 듯한 느낌이 들어서요. 이 숫자는 본인이 적절하게 조절하시면 됩니다. 적용하고 새로고침을 하시면, 변경된 상태를 확인하실 수 있어요.

 

 

 

왼쪽처럼 위 아래로 길죽했던 이미지가 오른쪽과 같이 변경되었습니다. 그런데, 아직도 뭔가 옆으로 퍼져보이죠?

 

 

Html 편집

 

 

이번에는 HTML 을 선택하시고, 대략 390번대로 내려가보세요. 저는 395번에 /C230X300/ 이라고 되어 있는 부분을 찾을 수 있었어요.

 

이 부분을 R200X200 으로 바꾸어 주세요. 여기서, C와 R이 무엇을 뜻하는지는 잘 모르겠어요. R은 직사각형을 의미하는 것같은데, C는 뭘까요? ...ㅠ

 

어쨋든, 저렇게 변경하면, 이미지가 아래와 같이 바뀝니다.

 

 

옆으로 퍼져 있던 썸네일이 깔끔한 정사각형으로 변했죠?

 

최종적으로는 왼쪽 이미지에서 오른쪽 이미지로 변경이 된 겁니다.

 

 

저도 티스토리 초보자라 이것 저것 검색해보면서 배우고 있습니다. 블로그 관리 요령, 함께 공유해요. 오늘도 즐거운 하루 되셨기를 바랍니다.!