티스토리 북클럽(bookclub) 스킨 섬네일 수정하기

티스토리를 다시 운영하기로 하고 가장 먼저 한 것은 스킨 변경이었다. 원래 새로운 기분 내는 데에는 옷 바꿔 입는게 최고다. 카테고리가 숨어있지 않고 계속 보여지길 원했고, 되도록이면 군더더기 없이 심플하고 새하얀 느낌이었으면 했다. 다행히도 내가 원하는 조건들을 충족시키는 스킨이 제공되고 있어 선택하기 쉬웠다.

티스토리에서는 여러가지 레이아웃의 스킨을 제공하고 있어 직접 소스를 수정하지 못하는 사람들도 반응형 블로그를 손쉽게 운영할 수 있다. html, css를 이용한 편집 기능도 제공하기 때문에 공부를 통해 내 입맛에 맞게 디자인을 변경하여 사용할 수 있다는 점도 티스토리의 매력 중의 하나이다. 나는 티스토리 스킨 중에 북 클럽(book club) 스킨이 마음에 들었다.

북리뷰 스킨을 선택한 후에 "관리자 > 꾸미기 > 스킨 편집 > 리스트"의 북리뷰 방식을 뉴북 방식으로 변경했다. (더 보기 방식은 페이징으로 유지) 

그리고는 첫 페이지로 돌아와 보니 대표사진(섬네일) 부분이 세로로 길쭉한 거다. 아마도 이 스킨이 북클럽(book club)이다 보니 책표지 비율에 최적화 되어있는 것 같았다. 나는 정사각형 섬네일을 원했기 때문에 스킨 편집을 이용해서 섬네일 비율을 수정했다. 아마도 북클럽 스킨을 선택한 후에 나와 비슷한 고민을 하는 분들이 있을 것이라 생각되어, 이제부터 섬네일 비율 변경하는 방법을 설명하려고 한다.

티스토리 북클럽(bookclub) 스킨 섬네일 비율 수정하기 - pc의 경우

html 스킨 편집 경로는 "관리자 > 꾸미기 > 스킨 편집"에서 오른쪽 상단의 html 편집 버튼을 클릭하면 된다.

그러면 새로운 창이 뜨는데, 페이지가 미리보기 페이지 / 소스 수정 페이지로 분할되어 있을 것이다.

우측 상단의 html 옆에 있는 css를 선택하자. css 탭에서 2259번째 줄에 있는 .list-type-thumbnail .post-item .thum img 사이즈를 변경해야 한다. 이전에 소스를 추가/수정/삭제한 적이 있다면 2259번째 줄보다 위에 있을 수도 아래에 있을 수도 있다. 그럴 때는 검색 기능을 이용하여 해당 단어를 검색한 후 위치를 찾는다. width: 126px;이라고 되어있는 부분을 150px;로 변경하고, height: auto;라고 되어있는 부분을 동일하게 150px;로 변경한다. 변경 후 적용 버튼을 꼭! 클릭한다.

그 다음  html 탭에서 392번째 줄에 있는 C230x300 수치를 200x200으로 바꾸어 준다. 숫자 앞의 알파벳 대문자는 C 혹은 R로 변경할 수 있는데 본인이 대표 사진을 정사각형 비율로 제작하여 삽입한다면 R200x200으로 하고, 그렇지 않다면 C200x200을 추천한다. 알파벳과 수치를 변경한 후에 적용 > 미리보기 버튼을 누르면 변경되는 부분을 실시간으로 확인할 수 있기 때문에 하나씩 천천히 해보고 마음에 드는 것으로 결정하면 된다. 마음에 드는 섬네일 비율을 결정했으면 반드시 적용 버튼을 클릭하여 결과를 저장하도록 하자!

위와 같이 섬네일 비율이 정사각형으로 바뀌었다. (만족)  그런데... 브라우저 사이즈를 줄여보니 어라? 모바일에서는 섬네일 비율이 그대로인 거다 OTL 미디어쿼리가 적용되어 있는 모양이다. 다시 css를 편집하러 가야 한다.

티스토리 북클럽(bookclub) 스킨 섬네일 비율 수정하기 - mobile의 경우

모바일 편집 경로도 "관리자 > 꾸미기 > 스킨 편집"으로 동일하다. 오른쪽 상단의 css 탭을 클릭해 준다.

2878줄에 있는 width: 96px; 이라고 되어 있는 부분을 120px;로 변경해주었다. 그리고 정사각형 비율을 유지하기 위해 width 아래에 height: 120px;을 추가했다. 섬네일을 좀 더 작게 만들고 싶다면 120px; 보다 작은 숫자를 넣으면 된다. 수정을 마쳤으면 적용 버튼 클릭!

모바일도 pc와 마찬가지로 정사각형 섬네일을 갖게 되었다. (대만족) 

메인 섬네일을 바꾸었으니 이번에는 포스팅 안에 들어갔을 때의 타이틀을 좀 더 예쁘게 다듬어 볼까? 다음 포스팅에 계속...