티스토리 블로그를 운영하시는 분들 중에 북클럽 스킨을 사용하시는 분들이 많이 계시죠? 저도 이 스킨, 저 스킨으로 계속 옮겨다니다가 북클럽 스킨에 정착하게 되었는데요. 아마도 코딩에 어려움을 느끼는 분들도 부담없이 레이아웃을 손쉽게 바꿀 수 있고 애드센스를 비롯한 광고를 게재하기에 적합해서 많이 사용하지 않을까 생각이 됩니다.
저도 최근에 애드센스 승인을 받아서 광고를 게재하기 위해 이것저것 많이 알아보게 되었는데, 덕분에 티스토리 북클럽 스킨의 단점 중 하나를 발견하게 되었습니다.
바로 썸네일의 크기인데요. 스킨의 이름인 북클럽에 맞게 기본 썸네일의 크기가 책 표지에 적합하게 직사각형으로 되어있습니다. 하지만 저는 책을 주제로 하는 블로그가 아니기 때문에 이 직사각형 썸네일이 은근히 거슬렸습니다.
그래서 검색을 해서 CSS의 해당 값을 가로 세로 1:1 비율로 맞춰서 수정을 했는데요. 안타깝게도 이 수정 사항이 카테고리 안으로 들어갔을 때 나오는 썸네일에만 적용이 되더라구요. 검색으로 들어오는 방문자가 보게될 일은 잘 없겠지만 그래도 통일성을 맞추고 싶은 욕구를 누를 수가 없었습니다.
그러던 중 문득 파이어폭스 브라우저의 요소 확인 기능을 사용해 보면 고쳐야 할 태그 위치를 알 수 있지 않을까 하는 생각이 들었습니다. 그래서 바로 시험해봤습니다.
썸네일을 보시면 직사각형으로 되어 있습니다. 아무래도 책이 아니다보니 시각적으로 위화감이 듭니다.
파이어폭스 브라우저를 사용해야 합니다. 다른 브라우저에 이런 기능이 지원되는지는 모릅니다.
사진에 마우스 포인트 대고 우클릭하여 요소 검사를 클릭합니다.
그러면 브라우저 하단에 코드나 표시되는 창이 나타납니다. 왼쪽 창에서 마우스 포인트를 HTML 구성 요소에 올려놓으면 브라우저에서 시각적으로 확인할 수 있습니다. 참 편한 기능이네요. 썸네일이 강조 표시되고 소스 코드에서 thumb/C126x166이라는 부분을 찾을 수 있습니다.
thumb/C126x166을 잘 기억해둡니다. 다음 과정에서 써먹어야 하거든요.
설정 페이지로 가서 스킨 편집의 HTML 수정으로 들어갑니다. 그런 다음 아무 곳이나 클릭을 한 번 하고 Ctrl + F로 검색 창을 띄우고 앞서 말한 thumb/C126x166을 입력한 다음 엔터 키를 칩니다. 그러면 제 스킨을 기준으로 219행에 해당 부분이 있는 것을 찾을 수 있습니다. 이 부분을 예를 들어 150x150 등 1:1 비율로 수정하고 적용, 새로고침을 클릭합니다.
그러면 직사각형이었던 홈 화면의 썸네일이 이렇게 정사각형으로 바뀝니다. 이러면 애드센스 승인을 받으신 분들은 인피드를 게재해도 레이아웃이 자연스러울 것 같습니다. (다만 저는 홈 화면에 인피드 넣는 방법을 아직 못 찾았네요...)
코딩을 전혀 몰라도 파이어폭스 요소 확인 기능 덕분에 스킨을 편집할 수 있게 되었네요. 어렵지 않죠? 여러분도 한 번 맘에 안드는 크기의 썸네일이 있으면 저처럼 변경해보시길 바랍니다.
이만 이번 글을 마치도록 하겠습니다.
