[BLOG/TISTORY] 티스토리 블로그 썸네일 이미지 크기 변경하고 제목 길이 조절하기 (티스토리 스킨 북클럽 베스트셀러 썸네일 정사각형으로 바꾸기)

저는 티스토리 스킨 중에

북클럽, 북클럽 중에서도

리스트 타입으로 베스트셀러를

사용합니다

베스트셀러는

보기에 깔끔하고 좋은데

썸네일 이미지가 세로로 길고

제목이 너무 짧은 게 단점이에요

북리뷰 타입으로

다시 변경을 하자니

북리뷰는 썸네일 이미지가

너무 잘리고

내용도 꽤 많이 보여서

좀 더 깔끔한 베스트셀러를

편집해서 사용해보기로 했습니다

썸네일 이미지가 정방형,

정사각형만 돼도 훨씬 좋을 것 같았거든요

알고보면 정말 간단하고

시간도 얼마 걸리지 않는데

잘못된 정보도 많고

편집 과정을 끝까지

다 올리지 않은 경우가 많아서

엄청 헤맸습니다😭

저처럼 헤매지 마시라고

제가 했던 스킨 편집 방식을

공유합니다🙃

먼저 관리에서 스킨 편집으로 들어가서

우측 상단에 있는 htlm 편집으로 들어갑니다

우측 화면이 다음과 같이 바뀔텐데요

390 전후에 있는

<img src="//i1.daumcdn.net/thumb/C230x300/?fname

=https://t1.daumcdn.net/cfile/tistory/99810B435F218D7A0C" alt="">의

C230x300을 C230x230으로 변경합니다

저는 392에 있는데

스킨 편집 정도에 따라서

번호가 달라져요

대략적인 위치를 파악하고

찾기를 통해 찾으시면 편합니다

이때 C를 R로 변경하라는 분도 계시는데

C를 R로 변경하면 이미지가

정방형으로 눌리는 방식으로

썸네일 이미지가 생성됩니다

C는 그대로 두고 숫자만 변경하면

사진이 정방형으로 잘리는 형태로

썸네일 이미지가 만들어져요

R이든 C든 숫자만 변경하면

썸네일이 정방형으로 바뀌는 건 같아요

다만 R로 변경하는 경우에는

정방 형태에 이미지가 모두 다 담지기만

비율이 바뀐다는 게 단점이고

C로 그대로 두면

이미지는 좀 잘리지만

비율이 변동이 없습니다

처음에 R230x230으로 수정했더니

이미지가 위아래로 눌려서

비율이 영 이상하길래

C230x230으로 재변경했습니다

비율이 달라져도

사진 전체가 다 보이는 게 좋으신 분은

R230x230으로 변경하세요

거의 모든 분들이

R230x230으로 변경하라고만 하고

이유를 설명해 주지 않아서

사진 비율이 바뀌는 원인을 찾는다고

이것 저것 만져보다가

C와 R의 차이를 겨우 알게 됐어요

이 차이를 알지 못 했다면

썸네일 이미지 비율 때문에

스킨 편집을 포기하고

다시 원래 스킨 상태로

돌아갔을지도 모르겠습니다😅

이미 너무 오래 헤맨 상태였거든요😭

이렇게 변경하고

적용하고나면 끝인 것 같지만

다시 블로그 홈으로 돌아가서 확인해보면

끝난 게 아니라는 걸 알게됩니다

북클럽 베스트셀러의 경우

이렇게 썸네일 이미지 하단에

회색 공백이 보여요

물론 언급한 단계까지만 변경해도

썸네일 이미지가

깔끔하게 정방형이 되는 스킨도 있는데

(북클럽 스킨 중에서도

뉴북 타입은 회색 공백이 없는 걸로 알아요)

회색 공백까지 없애 주어야

완벽한 정사각형 썸네일 이미지가 되겠죠

스킨편집 CSS로 들어갑니다

2220 전후에 있는

padding-bottom을 찾아요

130.434...%로 돼있을 텐데요

이걸 100%로 변경해줍니다

100%로 변경하고

적용을 누른 후 홈 화면으로 가면

회색 공백 없이 깔끔하게

정방형 썸네일 이미지가 보입니다

여기서 끝내려니 제목이 좀 아쉽죠

제목이 너무 짧아서

무슨 내용인지 알기가 어려워요

이왕 고생한김에

제목 길이도 변경했습니다

제목 길이 변경 역시

CSS로 들어갑니다

1170 전후에 있는

white-space: nowrap;

line-height: 1.4;

이 두 줄을 찾습니다

그리고 그 두 줄을 지워 줍니다

찾아서 지운 자리에

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

위 세 줄을 붙여넣기 해줍니다

이때 숫자 3은

제목이 몇 줄로 표시되냐 입니다

3으로 표기하면 3 줄

2 줄로 표기하면 2 줄입니다

2 줄로 변경해도

여전히 내용이 잘리는 제목이 많아서

저는 3 줄로 변경했습니다

자, 이렇게 원하는대로

스킨을 편집했습니다

저는 많이 헤매고

많은 시간을 썼지만

실은 얼마 걸리지 않는 작업이에요

제 스킨이 북클럽 베스트셀러 타입이라

제가 사용하는 스킨 기준으로 보여드렸습니다

아마 다른 스킨에도 비슷하게 적용가능할꺼에요

그래도 혹시 모르니까

스킨 편집 전에 미리 스킨을 꼭 저장해두세요

저는 결과가 어떻게 될 지 몰라서

열심히 헤매는 동안

서브 블로그를 이용했습니다

더 자세히 알려드리고 싶지만

이 이상은 제 능력 밖입니다😭

그래도 도움이 될 수 있길 바랍니다😄