티스토리 블로그 : 스킨 편집(썸네일) 초기 설정

티스토리 블로그 가입 완료되었고, 초기 설정과 세팅까지 완료하였습니다. 그럼에도 불구하고 티스토리 블로그는 뭔가 가독성이 떨어져 보이는 건 나만의 느낌적 느낌에 불과할까요? 너무 네이버 블로그에 익숙한 탓인지 티스토리 블로그는 아직 낯설기만 합니다. 그래서 약간의 정리·정돈을 위해 준비했습니다. 스킨 편집 (썸네일) 초기 설정!! 두둥!!

 

---

 

 

 

너무 비장했나요? 그랬다면 쏴리~(사과는 빨리하라고 했습죠.)

 

 

거두절미하고 가독성을 높이기 위해 스타일 변경을 시도해봅시다. 현재로서도 큰 불편함이 없다면 굳이 할 필요는 없는 작업이지만 블로그 글이 차곡차곡 쌓일수록 예상하지 못했던 욕심이 마구 솟구칠 것입니다. 처음에는 잘 모르니까 그냥 글쓰기에 급급했는데 쓰다 보니 썸네일도 신경 쓰이고 가독성을 높일 수 있는 방법은 없을까 고민하게 되는 시기가 옵니다. 원래 고민하는 스타일은 아닌데... 수익형 블로그라는 책임감 때문인지 욕심이 생기기 시작하더군요.

 

 

 

 

티스토리 스킨 편집 초기 설정

 

1. 관리 → 블로그 관리 홈 → 꾸미기 → 스킨 편집 바로 가기 선택합니다.

 

 

2. 제목+내용이 보이면서 썸네일 이미지가 보이는 스타일 스킨 편집 → 리스트 → 리스트 타입에서 "뉴북" 선택

그럼 메인 화면에 (제목+내용+썸네일)까지 보이게 됩니다.

 

 

사용하고 있는 Book club 스킨은 기본적으로 북리뷰 형식으로 세팅되어 북리뷰 형식은 썸네일이 타일처럼 나옵니다. 대표 이미지만 부각되어 보이고, 일정하지 않다 보니 깔끔해 보이지 않는 부분을 보완하기 위해 리스트 타입 변경을 결정하였습니다.

 

 

아래 왼쪽 썸네일이 정사각형이 아닌 긴 직사각형으로 깔끔해 보이지 않습니다. 이 점을 보완하기 위해 어렵진 않지만 지금부터 섬세한 작업이 필요합니다. HTML 코드에 익숙하지 않는 경우라면 더더욱 조심해야 합니다. 그렇다고 너무 긴강하진 마세요. 누구나 할 수 있는 작업입니다.

 

 

3. 스킨 편집 → html 편집 클릭합니다.

 

 

4. HTML / CSS / 파일 업로드 중 "CSS"를 선택합니다. 알 수 없는 글들이 촤라락 뜹니다. HTML 코드인데 긴장하지 말고 쭉- 내리다 보면 2259번 라인에 썸네일 설정 부분이 보입니다. 그 밑 2261, 2262번에 있는 픽셀 사이즈를 조정할 것입니다. 현재 블로그는 126px / auto로 설정되어 있습니다. 스킨마다 또는 블로그에 따라 치수는 천차만별일 것으로 예상됩니다.

 

 

네이버 블로그 또는 티스토리 블로그 등 대부분의 썸네일의 가장 최적화된 사이즈는 정사각형 200px×200px입니다. 하지만 단순히 이미지 파일을 200px×200px로 맞추어도 보이는 이미지가 늘어져 보이거나, 일부가 잘려나간 듯 전부를 담아내지 못한다는 문제점이 나타납니다. 그것을 보완하기 위한 작업입니다. 이러한 문제점으로 고민하는 분이라면 이 글이 적합할 것으로 조심스럽게 예상해 봅니다.

 

 

5. 2261, 2262번을 임의로 150px / 150px로 바꿉니다.(정사각형)

 

6. 변경 후 상단의 "적용"을 반드시 선택합니다.

 

 

7. 150px×150px 적용한 후 새로 고침을 하면 정사각형은 되었지만 이미지가 전체적으로 늘어난 것을 볼 수 있습니다. 이 작업을 하기 전에 어느 정도 이미지를 맞춘 상태이지만 이미지 사이즈를 맞추지 않은 상태라면 다 채워지지 않는 경우도 발생됩니다.

 

 

 

8. 그 부분을 보완하기 위해 이제는 CSS가 아닌 HTML 탭을 선택합니다.

 

9. 역시 알 수 없는 글들이 나와도 덤덤히 392번 라인을 찾아갑니다. 그럼 썸네일 사이즈 C230×300이라고 써져 있는 부분이 있죠? 찾으셨나요? 그럼 이제 다 왔습니다.

 

 

10. 이 부분을 R200×200으로 바꿔 주도록 합니다.

 

11. 그리고 꼭!! 반드시 "적용"하기 눌러주는 것을 잊지 말기로 합니다.

 

 

12. 그럼 C230×300과 R200×200 변경했을 때 차이를 알 수 있겠죠? 이미지도 정사각형이면서 이미지가 늘어지지 않고 전부 들어오는 것을 볼 수 있습니다.

 

 

이것으로 정성 들여 만든 썸네일 이미지에 생기를 불어 넣었습니다. 비록 정성이 없었다고 한들 어떠하겠습니까? 아무렇게나 첨부한 이미지이더라도 다 보이지 않거나 늘어나 보인다면, 어렵게 블로그를 방문해 주신 분께 조금이남아 가독성을 안겨드리기 위한 스타일 변경을 해 보았습니다. 자신이 아닌 다른 누군가를 위해 꾸미기 설정을 해 주었습니다. 또한, 이것으로 초기 설정 및 세팅이 완료된 것은 아닙니다. 기타 부수적인 설정들은 도장 깨기 또는 퀘스트 정복하는 방식으로 하나씩 진행해 보도록 합시다.