티스토리 본문(대표) 이미지 숨김 처리 후 썸네일 적용하기

2019년 새 에디터 사용자는 아래 링크로 이동 하세요!

2019/11/16 - [Blog Tip] - 티스토리 대표 이미지(썸네일) 본문에서 숨기기


본문에 이미지를 올리고 대표 이미지로 적용하면 블로그 메인 화면에 썸네일 이미지로 표시가 됩니다. 그런데 간혹 대표 이미지 썸네일로만 표시하고 싶고 본문에는 이미지를 안 보이게 하고 싶을때가 있습니다. 가장 많이 사용되는 대표 이미지 감추기 방식 2가지에 대해 알아보도록 하겠습니다.

첫 번째 파일첨부 방식

가장 많이 사용되는 이미지 파일첨부 방식은 간편하지만 내 블로그 메인 화면에서는 대표 썸네일로 표시가 되지만 다음 포털이나 네이버 검색 시 썸네일 이미지로 표시되지는 않습니다.

본문 글쓰기 창 에디터 왼쪽 파일보관함 하단에 파일첨부를 통해 이미지를 업로드 하면 본문에서는 이미지가 보이지는 않지만 대표에 체크를 하면 블로그 메인 화면에서는 썸네일 이미지로 표시가 됩니다.

두 번째 스타일 코드 삽입 방식

대표 썸네일 이미지로 사용하면서 본문에서는 숨기고 내 블로그 메인 화면과 검색포털에 썸네일로 표시하려면 html에서 스타일 코드를 수정해야 합니다.

우선 대표 썸네일로 표시할 이미지를 본문에 업로드 합니다. 이미지를 올리는 방식은 3가지가 있습니다. 각자 편한 방식으로 업로드 하면 됩니다.

대표 썸네일 이미지로 숨긴 처리할때는 항상 첫 번째 이미지로 업로드 하시는 게 찾기도 편하고 포털사이트에서 표시될 확률도 높습니다.

이미지 파일을 업로드후 편집창 왼쪽 HTML에 체크를 합니다.

1번 처럼 되어 있는 코드에 2번 처럼 display:none; 이 코드를 삽입 시켜 줍니다.

본문 편집 창으로 가서 보면 이미지가 사라진 것을 확인 할 수 있습니다.

위 와 같이하면 내 블로그 메인 화면뿐만 아니라 네이버나 다음 포털에도 대표 이미지 썸네이로 표시가 됩니다.

참고 : 검색 사이트 썸네일 표시 검색 사이트에서 썸네일이 표시되는 방식에 대해서는 100% 정확하게는 알 수는 없습니다만 대체로 본문 첫 번째 이미지가 확률이 가장 높았습니다.

반응형
Comment 2
  • 프로필 이미지
    꿍스뿡이
    2018.11.22 22:12 신고

    글 잘 읽었습니다.
    저도 대표 썸네일만 남기고 싶었는데, 방법을 몰라 항상 게시물에 넣었었는데 이런 방법이 있었네요!
    알려주셔셔 감사합니다~!^^

    • 프로필 이미지
      원더바웃
      2018.11.23 09:57 신고

      방문 까지 해주시고 감사합니다. 좋은 하루 되세요!