티스토리 블로그 개시 후 이틀! 열정으로 다섯 개의 글을 올렸더랬지요. 그런데......... 제가 애정을 담아서 한 땀 한 땀 만들었던 썸네일이 잘려서 보이는 것이 아닙니까?!!!! (좌절) (충격) (공포)
올린 건 오른쪽 이미지인데, 왼쪽의 이미지처럼 위&아래가 잘려서 보임. 심지어 어떤 경우에는 위&아래가 잘린 정도가 아니라 특정 부분 일부만 보여서 글자조차 다 보이지 않는 상태로 뜨기도 하더라고요... 내 소중한 썸네일이.... 이 문제부터 빠르게 해결해 봅시다. 진짜 이거 해결하려고 하루 종일 씨름했답니다. 서칭, 서칭 또 서칭... 300*300 사이즈의 정사각형 이미지를 올리면 해결된다는 글도 보았지만 전혀 아니었어요. 온갖 방법 다 해보고 제가 정리한 (제 기준에) 가장 간단한 방법 공유합니다. 이건 사실 저를 위한 기록이기도 합니다. 추후 또 다른 서브 블로그를 개설할 수도 있으니...
목차
이 방법은 티스토리에서 기본으로 제공하는 Book Club 스킨을 기준으로 합니다.
저는 북클럽 스킨을 사용하고 있습니다. 티스토리에서 기본으로 제공하는 스킨 중에서 가장 인기 있는 스킨이 아닐까 싶어요. 좋은 유료 스킨들도 많다고 하던데... 저 기본 무료 스킨을 계속해서 사용할 예정이랍니다. (돈 아껴야죠.) 다른 스킨의 경우에도 적용해 보실 수 있지만, 완벽하게 일치하지 않을 수 있어요.
1. 대표 이미지(썸네일) 정사각형으로 변경하기
"블로그관리 홈"에서 "꾸미기"의 "스킨 편집"에 들어가 줍니다.
"Book Club" 스킨이 적용되어 있는 것이 보이네요. 오른쪽 창을 아래로 스크롤해 줍니다.
"리스트"의 "리스트 타입"이 "북리뷰"로 되어 있는 것을 볼 수 있습니다. 이게 아마 북클럽 스킨의 초기 기본 세팅값인가 봅니다.
①"리스트 타입"을 "뉴북"으로 바꾸고 ②"새로고침"을 눌러주세요. 왼쪽의 미리 보기 화면이 전과 달라진 것을 볼 수 있습니다. 훨씬 깔끔해졌죠? ③"적용"을 눌러줍니다.
여기서 잠깐!
현재 썸네일은 가로보다 세로가 조금 더 긴 상태입니다. 이게 뉴북 리스트 타입의 썸네일 사이즈 기본 세팅값인가 봐요. 지금 이 상태로도 만족하시는 분은 여기까지 진행해 주시면 됩니다. 그러나 저는 여기서 만족할 수 없습니다! 썸네일의 가로가 잘리는 것 없이 다 나오면 좋겠다고요!!! 저처럼 다른 이미지 비율의 썸네일을 원하시는 분들은 이어서 계속 진행해 주시면 됩니다.
오른쪽 창을 위로 스크롤해서 올라온 뒤, "html 편집"을 눌러줍니다.
소스코드 창! 후들후들... 개발 공부를 해보시지 않았다면 많이 낯설죠... 그렇지만 우린 할 수 있습니다!!!!
오른쪽 창 아무 곳이나 클릭을 해준 뒤, 키보드로 "command(커맨드)"+"F"를 눌러주세요. 저는 맥이라 커맨드입니다! 윈도우 PC를 사용하시는 분은 "컨트롤(control)"+"F" 키를 눌러주시면 될 겁니다. "s_article_rep_thumbnail"을 입력합니다.
<s_article_rep_thumbnail>
↘여기서 복사 가능합니다.
<s_article_rep_thumbnail> 바로 밑에 있는 줄이 썸네일 이미지의 사이즈입니다! 기본값은 "C230x300"으로 되어 있었어요! 이 값을 원하는 사이즈로 변경해 주시면 됩니다. 저는 정사각형을 원하기 때문에 ①"C300x300"으로 변경해 주었습니다. 원하시는 숫자로 변경 후 ②"새로고침"을 눌러주세요. 왼쪽의 미리 보기 화면의 썸네일이 내가 원하는 정사각형으로 변경되어 있는 것을 볼 수 있습니다. 오른쪽 상단의 ③"적용" 버튼을 눌러주면 끝입니다.
2. 대표 이미지(썸네일) 사이즈
그렇다면 업로드할 때 대표 이미지(썸네일) 사이즈는 어떻게 하는 게 좋을까요? 썸네일 사이즈가 너무 크다면 화면에서 썸네일이 차지하는 비중이 너무 커져버리겠죠? 수익을 원하는 저는 썸네일보다 광고가 더 중요하답니다. 따라서 저의 경우에는 HTML에 적용했던 것과 같은 사이즈인 "300x300" 사이즈로 썸네일을 올리고 있습니다. 작은 사이즈의 정사각형 이미지가 다른 포탈의 검색창에 노출됐을 때도 잘리는 글씨 없이, 내가 원하던 썸네일 그대로 올라간답니다. 이제 썸네일 걱정 없이 마음껏 글 올려 보자고요!
※ 검색 엔진 최적화(SEO) 수익형 블로그 만들기
이외에도 검색 엔진 최적화에 도움이 되는 다른 방법들은 아래 글에 정리해 두었습니다.