05. 티스토리 블로그 글 하단 관련글 썸네일 크기 변경

Contents

 

북클럽 뉴북 리스트 썸네일 모양 문제

안녕하세요. 미나캣입니다.

 

저번 포스트에서는 북클럽 스킨의 뉴북 리스트 썸네일 모양을 직사각형에서 정사각형으로 수정했습니다.

포스팅 하자마자 눈에 보이는 것은 글 하단의 "관련글"의 썸네일이 이번에는 가로로 긴 모습입니다.

 

깔끔한 통일을 위해, 글 하단 관련글의 썸네일을 정사각형으로 수정하겠습니다.

 

HTML 수정

 

1. 스킨 편집으로 이동

"블로그관리 홈" 페이지에서 "꾸미기 - 스킨 편집"으로 이동합니다.

 

2. HTML 편집으로 이동

오른쪽 상단의 "html 편집" 버튼을 이용하여 수정 페이지로 이동합니다.

이동한 페이지에서는 "HTML | CSS | 파일업로드" 탭을 이용할 수 있습니다.

 

3. HTML 수정

검색 기능(Ctrl + F)를 이용하여 "s_article_related_rep_thumbnail" 코드를 찾습니다.

<s_article_related_rep_thumbnail> 바로 아랫줄에 "C176x120"이 보이실 겁니다. "C176x176"으로 수정합니다.

수정전 :

<s_article_related_rep_thumbnail>
	<img src="//i1.daumcdn.net/thumb/C176x120/?fname=" alt="">
</s_article_related_rep_thumbnail>

수정후 :

<s_article_related_rep_thumbnail>
	<img src="//i1.daumcdn.net/thumb/C176x176/?fname=" alt="">
</s_article_related_rep_thumbnail>

 

중간결과

"HTML 편집"에서 숫자 하나만 수정해 주었는데, 원하던 대로의 썸네일의 모양이 변경되었습니다.

 

하지만, 글 제목이 썸네일 위에 겹쳐져 버렸습니다. 이번에는 "CSS 수정"을 통해 해결해 보겠습니다.

 

CSS 수정

 

1. 스킨 편집으로 이동

"블로그관리 홈" 페이지에서 "꾸미기 - 스킨 편집"으로 이동합니다.

 

2. HTML 편집으로 이동

오른쪽 상단의 "html 편집" 버튼을 이용하여 수정 페이지로 이동합니다.

이동한 페이지에서는 "CSS" 탭을 선택합니다.

 

3. CSS 수정

검색 기능(Ctrl + F)를 이용하여 "related-articles ul li figure" 코드를 찾습니다.

.related-articles ul li figure { 아랫줄의 height 와 padding-bottom 값을 각각 "100%"와 "0px"로 수정합니다.

수정전 :

.related-articles ul li figure {
	display: block;
	width: 100%;
	height: 0;
	margin-bottom: 9px;
	padding-bottom: 68.181818181818182%;
	background-color: #f8f8f8;
}

수정후 :

.related-articles ul li figure {
	display: block;
	width: 100%;
	height: 100%;
	margin-bottom: 9px;
	padding-bottom: 0px;
	background-color: #f8f8f8;
}

 

썸네일 모양 수정 결과

"HTML 및 CSS 수정" 이후, 원하던 대로 썸네일의 모양이 변경되었습니다.