티스토리 북클럽 스킨(뉴북) 썸네일 정사각형으로 변경하기

안녕하세요. 지난 포스팅에 북클럽 스킨 초기 세팅 방법에 대해서 알아보았습니다. 오늘은 북클럽 스킨 썸네일을 직사각형에서 정사각형 만들고 썸네일 크기를 조정하는 방법에 대해서 알아보도록 하겠습니다. 썸네일은 대부분 정사각형 만드는데 PC 버전 및 모바일 버전에서 잘려나오지 않게 가독성이 좋은 설정 화면으로 만들기 위해서 작업을 해보도록 하겠습니다. 제 블로그를 보면 썸네일이 리사이징되지 않고, 이미지의 가운데만 보이고 나머지는 잘리게 되는 문제가 나타납니다. 썸네일 대표이미지 픽셀을 줄여서 만들면 되는데, 그렇게 되면 포스팅의 화질이 너무 떨어져서 잘 보이지가 않더라구요.

썸네일 문제

썸네일은 CSS에서 정사각형으로 편집해주시면 됩니다. 지금까지 해왔던 것을 참고해 보시면 그리 어렵지 않을 것입니다. 

 

 

썸네일 정사각형 편집

1) 관리자 → 꾸미기 → 스킨 편집 → html 편집 클릭

스킨편집 / html 편집

2) CSS 클릭 

css 편집

▲ CSS 편집 화면으로 이동합니다. 

 

3) 썸네일 크기 변경 : 이미지 width/height 조절

CSS 편집 화면에서 마우스 클릭 한 후에, 'Ctrl + F' 단축키를 이용하여 'list-type-thumbnail'을 검색합니다. 

css 코드 수정전

▲ 코드를 보면 크기가 '126px, auto' 로 고정되어 있습니다. 썸네일 크기를 변경하려면 이 부분을 수정하면 됩니다.  저는 width 126px 부분을 150px 로 수정하였습니다. 

width height 수정

▲ width : 150px, height : 150px 로 수정을 합니다. 이 값에 ㄸ라 화면에 보여지는 썸네일의 크기가 픽셀로 정해집니다. 원하시는 크기에 맞춰서 입력하시면 됩니다. 썸네일이 너무 커도 안되니 150 픽셀로 맞추겠습니다. 

 

css width 150px height 150px 수정

▲  썸네일 크기를 변경하였더니 위와 같은 화면이 나옵니다. 썸네일은 정사각형이 되었지만 비율이 안 맞습니다. 150픽셀 크기 안에 우겨 넣어진 모습입니다. 이미지도 여전히 짤리구요. 이미지의 비율을 변경해보도록 하겠습니다. 비율 변경을 위해 html 코드를 수정해보도록 하겠습니다. 

 

 

 

4) 이미지 비율 변경 : Html 코드 수정

html 편집으로 이동합니다. 's_article_rep_thumbnail'을 검색합니다. 

html 코드 변경

▲ 위와 같이 'C230x300'을 정사각형의 이미지 비율인 'C200x200'으로 변경해줍니다. 

 

▲  썸네일 이미지가 우겨진 부분이 없이 정상적으로 잘 나옵니다. 썸네일 이미지 정말 만족스럽게 변했습니다.

 

이제 점점 더 블로그가 잘 꾸며지고 있습니다. 이쁜 스킨이나 서식은 블로그의 콘텐츠를 더욱 돋보이게 합니다. 블로그 스킨을 직접 수정해가면서 최적화를 위해 노력하면 좋은 결과가 있을 것입니다. 많은 도움이 되었기를 바랍니다.

 

코드 수정할 때 한가지 팁을 드리도록 하겠습니다. 인터넷 웹브라우저는 가상으로 html을 수정하는 제공하고 있습니다. 실제로 수정되지 않고, 보여주기만 합니다. 개발자 도구 기능입니다. 원하는 페이지를 띄워놓고 Ctrl + Shift + C를 눌러서 개발자 도구를 활성화합니다. 우측에 html 관련 코드들이 나타납니다. 

개발자 도구 기능 html 수정

▲ 개발자 도구를 활성화하여 우측 썸네일 크기를 수정해보시면 가상으로 썸네일이 변경되는 것을 알 수 있습니다. 혹시나 다른 부분을 변경하고자 할 때에도 이 개발자 도구를 활용하시면 정말 도움이 됩니다. 웹페이지에서 변경을 원하는 부분에 마우스를 가져다대면 우측에서 코드 위치를 알 수 있습니다. 티스토리 자체 스킨 편집을 하지 않고도 가상으로 변경할 수 있으니 정말 편리한 기능입니다.