티스토리 북클럽(Book Club) 스킨 세팅! 홈 설정 커버 아이템 뉴스레터 섬네일 크기 직사각형에서 정사각형으로 변경하기( 썸네일 사진 가로로 늘어짐 해결 )

티스토리에서는 다양한 무료 스킨들을 제공하고 있습니다. 무료 스킨임에도 불구하고 감각적이면서 비교적 심플한 디자인을 제공해 처음 시작하는 블로거들에게 많은 도움이 됩니다. 아쉬운 점은 종종 기본적인 기능에서 버그가 발견된다는 것인데 그래도 다행히 고치기 어려운 것들이 아니라서 차근차근 고쳐가며 나만의 블로그를 만들어가는 중입니다. 저와 같은 문제를 겪는 분들에게 제 경험을 바탕으로 해결책을 공유하고 스스로도 기억하기 위해 기록을 남기기로 했습니다.

 

북클럽 스킨 썸네일 크기 변경

 

다양한 스킨 중 제가 발행하고자 하는 글들을 보여주기에 제일 적합해 보이는 북클럽이라는 스킨을 선택 후 홈 화면(커버) 초기 세팅을 시작했습니다. 스킨 편집으로 가면 다음과 같이 홈 설정에서 다양한 커버 아이템을 추가할 수 있습니다.

 

스킨 편집 메뉴바에서 커버 아이템 추가하기

 

티스토리 북클럽 스킨은 도서 콘텐츠를 제공하는 출판사용으로 디자인된 스킨이라 몇몇 설정에서 기본 이미지 모양이 책 표지처럼 세로로 긴 직사각형입니다. 직사각형 모양을 잘 활용할 수 있는 책, 영화 포스터, 미술 작품 등에 대해 주로 연재하는 블로그라면 더할 나위 없이 좋지만 아닐 경우 섬네일(썸네일의 바른 표기)의 모양을 내가 자주 올리는 형태로 바꾸고 싶은 마음이 들기 마련입니다.

 

다양한 커버 아이템 종류

 

저는 대표 이미지와 설명이 약간 보이는 뉴스레터를 추가했습니다. 뉴스레터를 적용하면 다음과 같이 직사각형의 섬네일 이미지가 등장합니다. 

책 모양의 기본 섬네일

섬네일 사이즈 조정하기 

저는 글 대표사진으로 주로 정사각형 이미지를 쓰기 때문에 정사각형으로 바꿀 예정입니다. 스킨 편집에서 기본으로 제공되는 기능에는 사진 크기 변경 기능이 없어서 HTML/CSS를 조금 건드려야 합니다. 

 

1. html 편집모드로 들어가기

스킨 편집 > html 편집 > CSS로 들어갑니다. 

html 편집 버튼

CSS 모드로 들어가기

2. CSS에서 이미지 사이즈 변경

Ctrl+F를 이용해서 cover-thumbnail-2를 찾습니다. 혹은 대략 655번 줄 근처를 찾아봅니다. 아래의 사진과 같이 figure에 해당되는 항목의 넓이(width)와 높이(height)를 박스 안에 들어있는 값으로 바꿔줍니다.

**나중에 다시 찾기 쉽도록 주석 처리한 설명 안에 THUMB라는 단어를 넣어주었습니다. 이렇게 하면 언제든지 THUMB를 검색하면 제가 바꿔준 부분들만 모아서 검색할 수 있습니다.  

이미지 넓이 높이 조정

 

새로고침을 눌러봅니다. 짜잔! 섬네일이 정사각형으로 바뀌었습니다.

정사각형으로 변한 섬네일

이상한 점이 있습니다. CSS만을 이용해서 강제로 넓이와 높이만 지정해주었더니 위와 같이 섬네일의 모양은 정사각형으로 바뀌지만 이미지가 잘리거나 아래와 같이 가로로 늘어진 모습으로 왜곡되어 보입니다. 사소한 차이일 수도 있지만 저처럼 대표 이미지에 글을 넣는 분들의 경우 상당히 거슬리는 문제입니다. 다시 편집 모드로 돌아갈 차례입니다. 

 

HTML 이미지 업로드 사이즈 조정하기

정사각형 이미지가 가로로 늘어나 보이는 것은 이미지가 초반에 올라갈 때 HTML에서 북커버 모양으로 인식하도록 받아져서 생긴 문제입니다. 우리는 HTML 코드를 고쳐서 정사각형으로 이미지를 받아들이는 작업을 해주도록 하겠습니다.

 

1. HTML 탭으로 이동하기

html 탭으로 이동

2. HTML에서 이미지 사이즈 변경

Ctrl+F를 이용해서 cover-thumbnail-2를 찾습니다. 혹은 198번 줄 근처를 찾아봅니다. 아래의 사진과 같이 <img src= 로 시작하는 부분의 C128x166을 C166x166으로 바꿔줍니다. 

이미지 업로드 사이즈 수정

새로고침을 눌러봅니다. 드디어 이미지 왜곡이 없는 정사각형 섬네일을 완성했습니다. 둘러보고 다른 문제가 없으면 우측 상단의 적용을 눌러 블로그에 적용해줍니다. 뉴스레터 섬네일 편집은 완료입니다. 

이미지 왜곡 없는 정사각형 섬네일 완성