티스토리/Book Club스킨 메인&관련글 썸네일 수정편집

 

티스토리/BookClub스킨 메인&관련 글 썸네일 수정 편집

티스토리 반응형 스킨 중 Book Club 스킨이 광고를 붙이기에 깔끔할 것 같아서 선택해서 사용 중인데 썸네일이 마음에 안 들어서 수정하는 방법을 함께 소개하려고 합니다. 지난번 포스팅에서는 글 제목과 글 설명 편집 방법을 소개해드렸어요. 

<메인화면 썸네일 편집>

썸네일 수정 전

북클럽 스킨의 기본 상태인 썸네일은 위 사진처럼 위아래로 긴 직사각형 모습입니다.

스킨 편집에서 CSS로 들어가 주세요.

2259번째 줄의 list-type-thumbnail .post-item .thum img 부분을 수정할 겁니다.

Ctrl+f로 list-type-thumbnail을 검색하면 편합니다.

 2261과 2262번째 줄의 width와 height를 각각 150px로 수정해주세요.

썸네일 첫 번째 수정

그러면 바로 위 사진처럼 썸네일이 정사각형으로 바뀝니다.

그런데 썸네일 사진이 전부 담기지 않기 때문에 한 단계 더 수정해야 합니다.

이번엔 HTML 쪽으로 넘어가 주세요.

스킨이 초기 상태라면 391줄에 있겠지만 최적화를 위한 코드를 삽입하였다면 Ctrl+f로 article_rep_thumbnail을 검색해서 이동해주세요.

중간쯤에 있는 C230X300을 C200X200으로 수정해줍니다.

여기서 한 가지 팁이 있습니다.

C200X200과 R200X200 둘 중에 선택할 수 있는데요.

만약 아래 사진을 썸네일로 할 경우

C로 입력하면 사진에서 가운데 부분만 썸네일로 나타나고 R로 입력하면 사진을 썸네일 크기로 축소하여 나타납니다.

저는 C로 선택해서 사용 중이지만 이건 각자의 선택에 맡기겠습니다.

자, 결과적으로 이렇게 정사각형에 내용이 전부 담기는 썸네일이 완성되었습니다.

모바일 화면도 자동 적용됩니다.(꾸미기-모바일 탭에서 모바일 웹 자동연결 안 하신 분만)

<관련 글 썸네일 편집>

그리고 본문 글 하단에 있는 관련 글의 썸네일은 좌우로 긴 직사각 형태라서 이것도 정사각형으로 수정해줄 거예요.

관련글 썸네일 수정 전

HTML의 440번째 줄입니다.

마찬가지로 최적화 소스코드 삽입 시 줄 위치가 다르기 때문에 Ctrl+f로 related_rep_thumbnail을 검색해주세요.

여기서 중간에 있는 C176X120을 C150X150으로 수정해줍니다.

관련글 썸네일 첫 번째 수정

그러면 썸네일이 정사각형으로 변합니다.

그런데 글 제목의 위치가 이상하죠?

CSS로 이동해주세요.

1385번째 줄의 related-articles ul li figure 부분입니다.

이제는 말 안 해도 Ctrl+f로 찾고 계시리라 믿습니다.

여기서 height를 0에서 3rem으로 수정해주세요.

관련글 썸네일 수정 후

짠! 그러면 글제 목도 제자리를 찾았습니다.

모바일 화면도 자동 적용됩니다.(꾸미기-모바일 탭에서 모바일 웹 자동연결 안 하신 분만)

저는 살짝 아쉬워서 글 제목을 두 줄로 늘렸는데요.

이전 포스팅에 올렸던 글제목 수정 방법을 응용하시면 됩니다. → Click!

응용방법을 모르시겠다면 댓글로 남겨주세요.