본문 바로가기
초보 마케터/티스토리 블로그

티스토리 html에서 티에디션 썸네일 이미지 테두리 없애기

by Anchou 2018. 6. 11.

오늘은 티스토리 블로그 스킨 중 Square 스킨에 티에디션을 입힐 때 유용한 편집을 한 가지 소개하려고 한다.

이 스퀘어 스킨은 내 블로그들에서 가장 많이 사용하는 스킨인데 메인 페이지에 그냥 최신 포스팅글만 나와서 카테고리를 한 눈에 보기 어려운 단점이 있다. 처음엔 티스토리 블로그 디자인이 더 커스터마이징하기에 자유롭겠구나... 싶었지만 지금은 네이*이 더 낫겠다 싶다.

서론은 여기까지.



스퀘어 스킨 뿐만 아니라 다른 스킨에도 적용될 수 있는 이야기인데 메인 페이지에 티에디션을 적용할 경우, 썸네일 이미지에 테두리가 생기는 것을 볼 수 있다.



만약 내가 본문에 사용한 이미지 비율이 정해진 썸네일 비율과 다를 경우 위와 같이 밉상으로 박스 테두리가 생기는 것을 발견하게 된다. 오늘은 이 테두리를 아예 없애서 깔끔한 메인 페이지로 만들어주려고 한다.



먼저, 꾸미기 - 스킨편집 - (우측)티에디션 - 티에디션 편집 순으로 들어간다.

지우고싶은 썸네일 테두리가 있는 프레임을 선택한 후 디자인 - HTML 으로 들어가면 thumb-link라고 쓰여있는 줄에 -border이라는 단어가 나온다.

요 단어만 삭제해주면 끝!



만약 선택한 프레임에 썸네일 이미지가 2개라면 -border 단어가 2개 있을 것이고, 썸네일 이미지가 6개라면 지워야할 곳이 6군데가 있을 것이다. 일일이 이 보더 단어를 찾아내기 어렵다면 Ctrl + F 키를 사용하면 보다 쉽게 찾을 수 있다. Ctrl + F 키를 누르면 우측 상단에 찾고 싶은 단어를 검색할 수 있는 창이 뜬다. 그곳에 border을 입력하면 해당 부분마다 형광펜 효과가 나타나서 쉽게 수정할 수 있다.



짜짠! -border를 삭제 후 적용시켰더니 이렇게 지저분한 테두리가 사라졌다.

연재식이 아닌 자유로운 크기의 이미지를 사용하는 사용자들에게 유용하게 사용되길 바라며 이만 뿅!

댓글