안녕하세요. beingfree79입니다. 오늘은 티스토리에서 북 클럽 스킨을 사용하시는 초보분들을 위한 정보입니다. 바로 썸네일을 정사각형으로 변경하는 방법을 알려드릴게요.
썸네일을 변경하는 방법으로는 대표 사진이나 본인의 카드뉴스를 정사각형으로 만들어 주면 가장 좋긴 해요. 하지만 그렇지 않은 경우도 있을 수 있고 모든 사진을 다 정사각형으로 만들 수 도 없기 때문에 우리는 스킨 편집에 들어가서 HTML을 일부 수정해 주도록 할게요.
깔끔하게 변경된 썸네일을 사용하시면 보다 사용자 친화적인 블로그를 관리하면서 SEO 최적화 글쓰기 양식을 만들어 가실 수 있을 것입니다. 자 이제 어떻게 하는지 알려드릴게요.
우선은 블로그 스킨을 확인해 보도록 하겠습니다. 티스토리 블로그 관리에 들어가서 사용 중인 스킨을 확인해 보겠습니다.
단, html 등을 통해 스킨의 내용 일부를 수정하면 위와 같이 사용자 수정이 나오지만 Book Club 인지만 확인하시면 괜찮아요.
티스토리 북 클럽 스킨 썸네일 변경방법
북 클럽 스킨은 블로그 초보자들에게 많은 인기를 누리고 있는 스킨이라고 할 수 있어요. 저도 북 클럽 스킨을 사용하고 있는데요. 제가 올린 글을 보다 보니까 썸네일이 직사각형으로 나오기도 하고 어떤 글은 사진이 없기도 해서 뭔가 블로그를 볼 때 밸런스가 안 맞는 기분이었어요. 그래서 템플릿을 맞춰줄 방법이 없을까 해서 찾은 방법을 공유해보려고 합니다.
적용 대상
저처럼 깔끔하게 글과 썸네일을 관리하고 싶으신 블로거들에게 적합합니다. 간단한 수정만으로 바로 적용할 수 있어요.
변경 과정
단계별로 아주 쉬운 변경만 있으니 차근차근 따라 해 보시기 바랍니다. 몇 가지만 변경하면 바로 적용됩니다. 세부 조건을 변경 방법은 아래와 같습니다.
변경 순서
변경 순서는 크게 두 단계입니다. 우선 첫 번째 단계예요. 스킨 편집에서 아래의 3가지를 변경하시면 됩니다.
- 홈 설정
홈 화면에 보여줄 글의 수를 결정하는 칸이에요. 취향에 따라 개수를 선택해 주세요. 저는 1로 해볼게요.
- 기본 설정
마찬가지로 글 목록에 나타날 글의 수를 설정하는 칸이에요. 마찬가지로 1로 해볼게요.
- 리스트
마우스를 아래로 스크롤해서 내리시면 리스트라고 하는 항목이 나오는데요. 여기서 리스트 타입은 뉴북으로 설정해 주세요. 다음 단계에서 css를 편집할 건데요. 이 리스트에서 북리뷰와 같이 리스트 타입이 아닌 다른 것을 선택하시면 직사각형 형태의 사진들은 정사각형으로 나오지 않으니 주의해 주세요.
여기까지 따라 하셨다면 다음은 두 번째 단계예요. 이제 html을 편집해 보도록 하겠습니다. 스킨 편집의 맨 위의 메뉴에서 html 편집에 들어가 주세요. 우리는 썸네일을 편집할 것이기 때문에 html에서 "thum"을 찾기 기능으로 찾아볼게요.
- Ctrl + F를 누르고 "thum"을 검색 (큰 따옴표까지 같이 검색해 주세요.) 제 경우에는 2개가 검색됩니다. 그럼 어떻게 홈 화면의 썸네일에 관련된 코드를 찾을 수 있을까요? 둘 중에서 아래처럼 이미지가 있는 부분만 수정해 주시면 됩니다.
- 기본적으로는 C230X300으로 되어 있는 부분을 정사각형이 되도록 C230X230으로 변경해 주시면 됩니다.
- 검색 결과 중 다른 하나는 보호글로 발행했을 때 적용되는 내용입니다. 참고로 는 원래의 코드를 주석처리한 것이므로 혹시 원래대로 복원하시려면 아래와 같이 주석으로 막아두고 적용을 눌러주세요.
자 이제 홈페이지에서 썸네일이 자동으로 정사각형이 되는 것을 확인하 실 수 있어요. 사진을 직사각형으로 넣으셨더라도 정사각형으로 보이게 됩니다.
오늘은 티스토리 북 스킨 사용자의 썸네일 변경방법에 대해서 알아보았습니다. 다들 정사각형 썸네일을 설정하셨나요? 오늘도 유익한 정보 어떠셨나요? 다음에는 더 좋은 정보를 공유해 드릴게요.
감사합니다.