티스토리 썸네일 이미지 본문에서 안보이게 하기

블로그 포스팅 시 여러 사진 중 대표 사진 1개를 선택하면 그 사진은 썸네일 이미지가 되어 내 블로그 메인 화면에 표시가 되고, 다음이나 구글 등에서 검색 시 대표 이미지로 노출이 됩니다.

 

썸네일 이미지는 대부분 본문 상단에 위치하게 되는데, 애드센스나 애드핏 광고까지 본문 상단에 배치할 경우 블로그 초입 부분이 상당히 산만할 수가 있습니다. 이러한 문제를 해결하기 위해 썸네일 이미지를 본문에서 안 보이게 하는 방법에 대해 알아보도록 하겠습니다.

 

티스토리 [구]에디터에서 적용법

티스토리 에디터는 신형 및 구형 두 가지가 있는데 먼저 [구] 에디터부터 설명드리면, 우선 대표 썸네일로 표시할 이미지를 본문에 업로드 후 글쓰기 창 오른쪽 HTML에 체크를 합니다.

 

HTML 모드에서 썸네일 이미지로 지정한 이미지 코드를 찾아야 되는데, 찾기 어려운 경우 단축키 ctrl +F 후 “썸네일 이미지명” 입력하여 찾습니다. 그리고 썸네일 이미지가 있는 코드명은 아래와 같은 형식으로 되어 있습니다.

 

썸네일 이미지명은 각자 다를 것이며, 저는 이미지명을 “사진1.png”로 하였습니다.

 

대표 이미지가 있는 코드를 찾으셨으면 1번 코드의 float: none; 뒤에 2번처럼 display:none; 입력 후 HTML 체크를 해제하고 글쓰기 창으로 돌아가 보면 본문에서 썸네일 이미지가 사라진 것을 확인하실 수 있습니다.

 

다음으로 [신] 에디터에 적용하는 방법에 대해 알아보겠습니다.

 

티스토리 [신]에디터에서 적용법

대표 썸네일로 표시할 이미지를 본문에 업로드 후 편집창 오른쪽의 기본모드 클릭 후 하단 HTML을 선택합니다.

 

[구] 에디터와 마찬가지로 HTML 모드에서 썸네일 이미지로 지정한 이미지 코드(ctrl +F 후 “썸네일 이미지명”) 를 찾습니다.

 

저는 썸네일 이미지명을 “사진1.png”로 하였습니다.

 

썸네일 이미지가 있는 코드를 찾았다면 1번 코드의 data-filename="사진1.png" 뒤에 2번럼 style="display:none;" 입력 후 기본모드를 선택하여 글쓰기 창으로 돌아가 보면 썸네일 이미지가 사라진 것을 확인할 수 있습니다.