티스토리 북클럽스킨 썸네일 정사각형으로 만들기외 3가지 수정

728x90

티스토리 북클럽 뉴북 스킨 썸네일 정사각형으로 만들기 외 3가지 더 수정하기

안녕하세요? 50억강사입니다.

저번 시간에북클럽 뉴북 스킨 선택/적용하는 방법을 알아보았어요. 그런데 살짝 마음에 안 드는 부분이 있습니다.

바로 썸네일이 짤려서 나오는 부분입니다.

북클럽스킨 자체가 말 그대로 책소개를 목적으로 만든 스킨이라 그런지 썸네일도 책 모양같이 직사각형으로 되어있어요.

여기서 문제는 뭐냐. 직사각형이 되면 기껏 만든 정사각형 썸네일이 짤려서 나온다는 겁니다.

그럼 바로 문제 해결 시작해 보겠습니다.

시작전 지금 사용중인 스킨을 꼭 저장하세요. 혹시나 잘못 됐을경우를 대비해서요.

1. 북클럽 뉴북 스킨 썸네일 정사각형으로 만들기

뉴북스킨 적용 시 썸네일이 직사각형인 것을 볼 수 있습니다.

● 블로그 관리 → 스킨편집 → html 편집 → 썸네일 크기 변경

HTML에서 Ctrl+F를 누르고 index_article_rep로 검색하여 빨간 네모 부분을 (C230x300 → C230x230) 으로 수정합니다.

이렇게 정사각형으로 수정된 모습을 볼 수 있습니다.

이번엔 포스팅 맨 아래에 있는 관련글을 정사각형으로 만들어 보겠습니다.

관련글은 가로로 긴 직사각 형태로 되어 있어 이역시 짤려서 나옵니다.

별로 신경이 쓰이는 부분은 아니지만 이왕 하는 거 이것까지 수정해보죠 ^^

관련글 썸네일이 정사각형으로 수정이 되었는데, 보시면 관련글 제목이 썸네일과 겹쳐있죠?

이제 이 문제를 해결할 겁니다.

관련글을 보시면 제목이 좀 긴것은 ... 으로 잘려있는 것을 볼 수 있습니다.

마지막 단계로 관련글 제목 짤리는 문제를 해결해 보겠습니다.

● 블로그 관리 → 스킨편집 → html 편집 → CSS

CSS에서 Ctrl+F를 누르고 related-articles ul li .title 로 검색하여 빨간 네모 부분을 파란 네모 부분처럼 수정합니다.

white-space: nowrap; ▷ nomal;

모든 수정 과정이 끝났습니다.

복잡한 것 같지만 천천히 읽으면서 따라 하시면 금방 수정할 수 있습니다.

다음 시간에는 또 다른 무엇이든 배울 것을 포스팅해보겠습니다.

▼함께 보면 좋은 글▼

저의 글을 읽어 주셔서 감사합니다. 저의 글이 조금이나마 도움이 되셨다면
로그인이 필요 없는 공감 ❤︎ 한번 꾹 눌러주세요 ^^

728x90