티스토리 관련글 썸네일의 제목이 길어 잘리거나 썸네일 이미지가 정사각형으로 제대로 표시되지 않아 디자인적으로 아쉬움을 느끼는 경우가 종종 있습니다. 관련글 썸네일 제목 잘림, 정사각형 썸네일 설정 그리고 제목과 이미지 겹침 문제까지 해결하는 방법을 알아보겠습니다.
티스토리 북클럽 스킨 관련글 부분 예쁘게 만드는 방법
썸네일 정사각형으로 만들기
북클럽 스킨의 기본 관련글 썸네일은 직사각형 형태로 제공됩니다. 이를 정사각형으로 변경하면 더욱 깔끔하고 통일감 있는 디자인을 연출할 수 있습니다. 다음 단계를 따라 썸네일을 정사각형으로 수정해 보세요.
- 티스토리 관리자 페이지 접속: 먼저 티스토리 관리자 페이지로 이동합니다.
- 스킨 편집 메뉴 이동: 좌측 메뉴에서 [꾸미기] > [스킨편집]을 클릭합니다.
- HTML 편집 창 열기: 스킨 편집 화면 우측 상단의 [HTML 편집] 버튼을 클릭합니다.
- 관련글 영역 검색: 관련글 영역을 찾았다면 해당 코드 블록 내에 다음 속성을 수정합니다.
관련글 영역에서 C176x120 부분을 정사각형 사이즈로 수정합니다. 예를 들어 C176x176, C200x200, C300x300 등으로 사이즈를 수정 후 적용 버튼을 클릭하여 관련글 썸네일이 수정이 잘됐는지 확인합니다.
정사각형 썸네일 수정 후 제목이 이미지와 겹치는 문제 해결
정사각형 썸네일로 변경한 후 제목이 이미지와 겹쳐 보이는 문제는 주로 제목 요소의 위치나 마진 패딩 값 때문에 발생합니다. 다음 방법을 통해 이 문제를 해결할 수 있습니다.
CSS 코드 검색: HTML 편집 창에서 썸네일과 제목 관련 CSS 속성을 다시 검색합니다.
| ctrl + f 키를 이용하여 검색하면 편리합니다 | .related-articles ul li figure 검색 |
검색하셨다면 height: 0; 부분에 0을 4 rem; 으로 수정합니다.
| 수정 전 | 수정 후 |
| height:0; | 4rem; |
수정을 완료했다면 우측 상단의 [적용] 버튼을 클릭합니다. 적용한 후 수정이 잘 되었는지 확인해 봅니다.
썸네일 제목 잘리지 않게 수정하기
썸네일 제목이 길어 잘리는 문제는 주로 제목을 감싸는 요소의 너비가 제한되어 있기 때문에 발생합니다. 다음 방법을 통해 제목이 잘리지 않도록 수정할 수 있습니다.
| ctrl + f 키를 이용하여 검색하면 편리합니다 | .related-articles ul li .title 검색 |
검색 후 white-space: nowrap; ▶ normal;로 수정 합니다. 수정을 완료했다면 우측 상단의 [적용] 버튼을 클릭합니다.
| 수정 전 | 수정 후 |
| nowrap; | normal; |
주의사항:
- CSS 코드를 수정하기 전에 반드시 현재 스킨의 [백업]을 해두시는 것을 권장합니다. 오류 발생 시 복구할 수 있습니다.
- 각 스킨마다 HTML 구조와 CSS 클래스명이 다를 수 있으므로 위 코드들이 정확히 적용되지 않을 수도 있습니다. 이 경우 해당 요소의 클래스명을 찾아 코드를 수정해야 합니다.
- CSS 속성 값은 블로그 디자인과 개인적인 취향에 따라 적절하게 조절해야 합니다.
- 변경 사항을 적용한 후에는 반드시 블로그 페이지를 확인하여 수정 결과가 의도한 대로 나타나는지 확인하십시오.
수정하는 방법들을 통해 티스토리 북클럽 스킨의 관련글 썸네일 제목 잘림, 정사각형 썸네일 설정 그리고 제목과 이미지 겹침 문제를 효과적으로 해결하고 더욱 보기 좋은 블로그를 만들 수 있기를 바랍니다.