프롤로그
블로그에서도 섬네일은 방문자들이 포스팅 글에 호기심을 느끼고 클릭하는 데에 매우 중요한 요소입니다. 이 번 글에서는 티스토리 북클럽 스킨에서 섬네일을 수정하는 방법에 대해 자세히 알아보도록 하겠습니다.
티스토리 스킨 편집은 블로그 관리 모드에서 '꾸미기/스킨 편집/html 편집'을 클릭한 후 HTML 또는 CSS 파일의 해당 행 번호로 이동하거나 Ctrl+F를 누른 후 키워드 찾기 기능을 활용하여 수정할 곳으로 이동해야 합니다.수정이 잘 못되어 오류가 발생할 수 있으니 HTML, CSS 파일 원본을 백업한 후 작업하는 것이 현명합니다.
글 리스트 섬네일 수정
홈 화면이나 각 카테고리 화면의 글 리스트에 섬네일이 표시됩니다. 이 섬네일의 시인성이 좋아지도록 가로와 세로 길이가 같은 정사각형 이미지로 표시하도록 수정하는 방법입니다.
CSS 파일의 2272행 부근으로 이동하거나 아래 코드에 포함된 키워드 찾기를 통해 해당 행으로 이동합니다.
적색으로 표시된 너비 'width'와 높이 'height'를 동일한 픽셀 px 값으로 변경한 후 우측 상단의 '적용'을 클릭하면 됩니다. 개인의 취향에 따라 너비와 높이의 비율이나 크기를 다르게 설정할 수도 있습니다.
.list-type-thumbnail .post-item .thum img{
float: right;
width: 126px;
height: auto;
margin-left: 57px;
border: 1px solid #f1f1f1;
transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
}
| 글 리스트 섬네일이 정사각형으로 수정된 모습 |
조금 더 간단한 방법은 HTML 파일의 405행 부근이나 키워드 찾기 기능으로 아래 코드를 찾은 뒤 적색으로 표시된 'C230x300'을 'C230x230'으로 변경해도 글 리스트의 섬네일 이미지가 정사각형으로 변경되니 참조하시기 바랍니다.
<s_index_article_rep>
<div class="post-item">
<a href="[##_article_rep_link_##]">
<span class="thum">
<s_article_rep_thumbnail>
<img alt="" src="//i1.daumcdn.net/thumb/C230x300/?fname[##_article_rep_thumbnail_raw_url_##]" />
</s_article_rep_thumbnail></span></a></div></s_index_article_rep></span>
관련 글 섬네일 수정
티스토리 글 본문 하단에는 '관련 글'의 제목과 함께 섬네일이 표시됩니다. 이 섬네일 이미지도 직사각형인데 정사각형 이미지로 변경하고 그에 따른 관련 글 제목의 위치를 조정하는 방법도 설명하도록 하겠습니다.
|
|
| '관련 글' 섬네일 수정 방법 - 위부터 수정 전, 정사각형 섬네일, 제목 위치 변경 |
관련 글 섬네일을 정사각형으로 변경
HTML 파일의 453행 부근으로 이동하여 아래와 같은 코드를 찾아 적색으로 표시된 'C176x120'을 'C120x120'와 같이 동일한 숫자로 수정하고 '적용' 버튼을 클릭하면 됩니다.
위 그림의 중간 이미지가 수정 후 섬네일 모습이니 참조하시기 바랍니다. 제목이 겹치는 문제의 해결 방법은 다음 글에서 이어집니다. 이를 응용하면 숫자를 높여서 섬네일을 크게 할 수 있고 너비와 높이의 비율을 다르게 설정할 수도 있습니다.
<s_article_related>
<div class="related-articles">
<h3>관련글</h3>
<ul>
<s_article_related_rep>
<li>
<a href="">
<figure>
<s_article_related_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C176x120/?fname[##_article_related_rep_thumbnail_link_##]" alt=""></s_article_related_rep_thumbnail></figure>
관련 글 제목 위치 수정
앞에서 얘기한 바와 같이 관련 글의 섬네일을 정사각형으로 변경하면 관련 글의 제목이 섬네일 이미지와 겹치는 문제가 발생합니다.
이것을 해결하기 위해서는 CSS 파일의 1399행 부근으로 이동한 후 적색으로 표시된 'height: 0;'을 'height: 3em;'으로 수정하고 오른쪽 상단의 '적용' 버튼을 클릭하면 됩니다.
위 그림의 마지막 이미지가 관련 글 제목이 아래로 이동하도록 수정된 후의 모습입니다. em 앞의 숫자가 클수록 제목이 아래로 이동하니 취향에 따라 본인이 원하는 최적 값으로 변경하면 됩니다.
.related-articles ul li figure {
display: block;
width: 100%;
height: 0;
margin-bottom: 9px;
padding-bottom: 68.181818181818182%;
background-color: #f8f8f8;
}
이전 포스팅 글도 참조하시기 바랍니다.
