[티스토리 블로그 꾸미기] 썸네일 크기 쉽게 바꾸기

안녕하세요! 이번 글에서는 썸네일 이미지 크기를 아주 쉽게 조절하는 방법을 알려드리겠습니다. 썸네일의 크기를 조절하면 카테고리나 홈(커버)에 이미지가 꽉 차 보이도록 할 수 있고, 통일성 있게 만들어 블로그가 깔끔해 보이도록 할 수 있습니다.

 

잘 모르는 코드가 있거나, 필요한 코드는 자주 쓰는 CSS 속성 총정리 게시글에서 확인하세요! 따라 하기 쉽도록 단계별로 설명해 드릴 테니, 걱정하지 마세요. 이제 시작해볼까요?

이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다.

 

스킨 편집 들어가기

1. 관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.
2. 새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다.

'꾸미기' 탭에서 '스킨 편집'을 클릭하면 새로운 창이 열립니다. 이 창의 오른쪽 상단에 'html 편집'을 클릭합니다.

홈(커버) 썸네일 크기 바꾸기

홈(커버) '뉴스레터'의 썸네일 기본 설정을 확인합니다. 아래에 다른 홈(커버) 코드가 있으니 코드만 바꿔서 진행하시면 됩니다.

홈(커버) 썸네일의 기본 설정을 확인합니다.

HTML 변경

HTML에서 코드 있는 곳 아무 곳이나 클릭 후 Ctrl+F를 눌러 검색창에 'cover-thumbnail-2'를 검색합니다.

cover-thumbnail-2

HTML에서 'cover-thumbnail-2'를 검색합니다.

중간에 보면 '<img src="//il.daumcdn.net/thumb/' 뒤에 'C126x166'을 블로그에 맞게 수정합니다. 제 블로그는 광고를 고려해서 144x144로 진행했습니다.

홈(커버) 썸네일 크기를 알맞게 조절합니다.

미리보기로 홈(커버) 썸네일의 크기가 알맞게 적용되었는지 확인합니다.

변경된 사이즈로 적용되었는지 확인합니다.

CSS 변경

우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다.

'HTML ❘ CSS ❘ 파일업로드' 옵션 중 'CSS'를 클릭합니다.

CSS 파일에서 코드 있는 곳 아무 곳이나 클릭 후 Ctrl+F를 눌러 검색창에 '.cover-thumbnail-2 ul li figure'를 검색합니다.

.cover-thumbnail-2 ul li figure

CSS 파일에서 '.cover-thumbnail-2 ul li figure'를 검색합니다.

이미지와 같이 홈(커버) 썸네일 코드 2개를 아래 코드로 교체합니다. 

.cover-thumbnail-2 ul li figure {
  float: right;
  width: 144px; /* 너비 조절 */
  margin-left: 20px; /* 요소 왼쪽 여백 */
}

.cover-thumbnail-2 ul li figure img {
  width: 144px; /* 너비 조절 */
  height: 144px; /* 높이 조절 */
  border: none; /* 테두리 없음 */
  box-sizing: border-box;
}

코드를 복사하여 교체하거나 수정합니다.

미리보기로 홈(커버) 썸네일 크기가 적용되었는지 확인합니다.

썸네일 크기가 적용되었는지 확인합니다.

 

다른 커버 사용 시

홈(커버) '뉴스레터'를 적용하지 않았다면, 아래 커버 중 맞는 커버에서 수정하면 썸네일 크기가 바뀝니다. 아래 코드는 CSS로, HTML에 검색할 때는 .을 빼고 검색합니다.

.cover-list /* 기본 리스트 */

.cover-thumbnail-1 /* 썸네일 리스트 */

.cover-thumbnail-3 /* 커버 갤러리1 */

.cover-thumbnail-4 /* 커버 갤러리2 */

.cover-event /* 이벤트 배너 */

 

카테고리 썸네일 크기 바꾸기

카테고리의 썸네일 기본 설정을 확인합니다.

카테고리의 썸네일 기본 설정을 확인합니다.

HTML 변경

HTML에서 코드 있는 곳 아무 곳이나 클릭 후 Ctrl+F를 눌러 검색창에 'post-item'을 검색합니다. 두 번째 검색 결과로 이동합니다.

HTML 파일에서 'post-item'을 검색합니다.

중간에 보면 '<img src="//il.daumcdn.net/thumb/' 뒤에 'C230x300'을 블로그에 맞게 수정합니다. 제 블로그는 홈(커버)과 통일성 있게 144x144로 진행했습니다.

카테고리 썸네일 크기를 알맞게 조절합니다.

미리보기로 카테고리 썸네일 크기가 적용되었는지 확인합니다.

변경된 사이즈로 적용되었는지 확인합니다.

우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다.

html 편집 창에서 우측 상단에 'HTML ❘ CSS ❘ 파일업로드' 옵션 중 'CSS'를 클릭합니다.

CSS 파일에서 코드 있는 곳 아무 곳이나 클릭 후 Ctrl+F를 눌러 검색창에 '.list-type-thumbnail .post-item .thum img'를 검색합니다.

.list-type-thumbnail .post-item .thum img

CSS 파일에서 '.list-type-thumbnail .post-item .thum img'를 검색합니다.

아래 코드를 복사해서 기존 코드와 교체하거나 수정합니다.

.list-type-thumbnail .post-item .thum img {
  float: right;
  width: 144px; /* 너비 조절 */
  height: 144px; /* 높이 조절 */
  margin-left: 20px; /* 요소 왼쪽 여백 */
  border: none; /* 테두리 없음 */
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
}

카테고리 썸네일 크기 조절 코드로 교체하거나 수정합니다.

미리보기로 카테고리 썸네일 크기가 적용되었는지 확인합니다.

썸네일 크기가 적용되었는지 확인합니다.

 

결론

이번 글에서는 홈(커버)과 카테고리 썸네일 크기를 쉽게 바꾸는 방법을 알아보았습니다. 썸네일 크기 조절을 통해 블로그의 이미지가 잘리지 않고, 꽉 차 보이게 하여 더 깔끔하고 일관된 느낌을 줄 수 있습니다.

다음 글에서는 홈(커버) 아이템 종류를 알려드리겠습니다. 궁금한 점이나 문제가 있으면 댓글로 알려주세요!