안녕하세요. 아이텔입니다. 이번에 쓸 내용은 티스토리 스킨인 북클럽에 대한 내용인데요. 북클럽을 쓴지 얼마되지않았지만 사이드바가 있는 깔끔한 반응형 스킨이라 마음에드는데 한가지 걸리는게 있었습니다.
글쎄 썸네일이 이미지 리사이징없이 가운데만 확대를 해서 도대체 뭔 제품인지 알 수 없게 표시를 하는 문제였죠. 분명히 이 스킨을 만든제작자분도 손쉽게 수정을 하실 수 있었을텐데 기본적으로 설정이 여러개다보니까 신경을 못쓰셨는 모양입니다. 이 리스트형태는 "북리뷰"라는 형태인데요. 이걸 손쉽게 바꾸려고 구글에 검색해봤지만 제가 쓰는 북리뷰 형태에 대한 썸네일 수정법은 찾을 수가 없었습니다. 대부분 블로그들은 썸네일 수정방법을 복붙이라도 하듯 리스트형태를 "뉴북"으로 바꾸라고 강요하고 있어서 할 수 없이 방법을 찾아야했습니다.
아시는분은 아시겠지만, 이미 인터넷브라우저는 html을 가상으로 수정해보는 기능을 제공하고 있습니다. 개발자도구라는 것인데요. 이렇게 특정 페이지를 띄워놓고 ctrl+shift+C를 눌러서 선택을 활성화 한 후에 웹페이지에서 알고 싶은 부분을 클릭하면 아래쪽에 html관련 코드들이 쫙 뜹니다. 여기서 썸네일을 찍어보면 위와 같이 오른쪽에 관련코드들이 뜨는데 여기서 바꾸면 티스토리 스킨자체를 안바꾸고 가상으로 변경해볼 수 있습니다. 어메이징한 기능이죠. 이 기능을 사용해서 북클럽 스킨을 저는 꽤나 많이 수정했습니다.
1. 썸네일 이미지 추출 크기 변경
스킨변경 HTML탭에 가셔서 위의 부분을 찾아서 똑같이 바꿔주시면 됩니다. 검색어는 thumbnail이나 c230x300을 찾으시면됩니다. C420x300이 바꾼 부분이고 나머지는 건드린거 없어요. 썸네일 이미지를 생성하는 크기를 변경하는 곳입니다. 행은 기본으로 173으로 되어있으니 참고하세요. 그리고 위 수치가 썸네일 이미지추출 최대크기입니다.
2. 썸네일 위치 및 비율 변경
위와 같이 CSS 1157행 부분에 있는 항목을 위와 같이 바꿔주시면됩니다. 코드는 첨부된 메모장 파일에 써놓겠습니다. (모바일페이지에 문제가 있어서 수정됨. 20-12-04)
원리는 썸네일을 추출한 크기와 그 추출한 이미지의 축소, 위치 변경입니다.
첫번째 단계에서 진행한 작업은 스킨이 썸네일을 추출할때 원래 사진에서 어느정도까지 추출을 할 것인지 크기를 묻는 것입니다. 최대한의 크기로 가져오니까 원래모습이 최대한 보여지는 것이죠. 첫번째 단계를 실행하지않으면 썸네일 추출사진자체가 이미지 중앙부 밖에 없어서 아무리 두번째단계를 실행해도 풀이미지가 보이지않습니다. 최대 이미지크기를 설정하면 썸네일 오류가 걸리기 때문에 약간 잘리는 부분은 있지만 이 방법을 사용하면 강제로 "뉴북" 리스트타입을 쓰지않아도 썸네일을 온전하게 사용할 수가 있어요.
아쉽게도 다른 블로그에서는 이걸 소개하지않아서 한시간동안 머리싸매면서 조정했답니다. 도움이되셨다면 하트하나 눌러주고 가세요~ 방문 감사합니다.
댓글