티스토리 블로그 미넴 스킨 썸네일 포스팅 본문에 자동 출력 설정

티스토리 자체광고와 거리를 두기 위해서 블로그 상단광고를 포스팅 제목 위로 이동시켰지만 아직도 광고와 광고 간의 거리가 가까운 것 같아서 포스팅 시 사용하는 썸네일을 티스토리 광고보다 높은 위치에서 블로그 자동 목차와 함께 자동으로 출력되도록 설정해 보았습니다.

 

썸네일을 자동으로 출력되도록 설정하고 보니 워드프레스 느낌도 나고 블로그 운영자가 설정한 광고와 티스토리 광고 간의 거리가 상당히 멀어지는 효과가 있어서 상단광고를 다시 제목 밑으로 이동시켜도 되지 않을까 싶은 생각도 드네요.

 

내용추가 : 티스토리 블로그 썸네일 자동으로 추가하는 경우 썸네일 이미지로 인해서 CLS가 0.1 넘어가는 현상이 발생해서 기존에 배포한 파일은 삭제하고 수정된 버전을 다시 업로드했습니다.

 

 

✔ 상단광고 포스팅 제목 위로 이동시키는 방법 ✔

 

 

 

티스토리 블로그 미넴 스킨 썸네일, 자동목차를 티스토리 광고보다 위쪽에서 출력되도록 설정

 

 

 

티스토리 블로그 미넴 스킨 썸네일 포스팅 본문에 자동 출력 설정

 

현재 사용 중인 미넴스킨과 많이 사용하는 #1 스킨, 북클립 스킨에도 적용해 보니 티스토리 광고보다 높은 자리에서 출력되어서 블로그 운영자가 설정한 광고와 티스토리 광고 간의 거리가 떨어지는 효과가 있었습니다.

 

 

사용한 코드의 내용은 해당 포스팅의 썸네일을 자동으로 출력하면서, 구글 SEO을 위해서 포스팅 제목을 ALT 속성과 썸네일에 블로그 포스팅 링크 주소를 가지도록 설정했습니다.

 

티스토리 블로그 미넴 스킨 썸네일 포스팅 본문에 자동 출력하도록 설정하는 코드

 

내용추가 : 티스토리 블로그 썸네일 자동으로 추가하는 경우 썸네일 이미지로 인해서 CLS가 0.1 넘어가는 현상이 발생해서 기존에 배포한 파일은 삭제하였으며, 아래쪽에 수정된 버전을 해결방법과 함께 다시 업로드합니다.

 

✔ 썸네일 포스팅 본문에 자동으로 출력하도록 설정하는 HTML 코드 ✔

 

저의 경우에는 썸네일에 링크를 적용했지만 링크 없이 썸네일만 출력하고 싶은 분은 아래에 있는 파일을 이용해 주세요.

 

✔ 썸네일 포스팅 본문에 자동으로 출력하는 설정하는 코드 HTML 코드 - 썸네일 링크 제거 ✔

 

 

 

썸네일 자동 출력 적용 전 주의해야 될 점

 

저의 경우에는 구글의 중요지표인 CLS 문제로 때문에 본문 상단에 썸네일을 사용하는 것을 자제하고 포스팅 작성이 완료되면 대표이미지를 추가해서 포스팅하는 편입니다.

 

기존에 블로그 포스팅에 썸네일이 있는 경우에는 아래의 그림처럼 썸네일이 연속적으로 2개가 보이는 경우가 생길 것입니다.

 

티스토리 블로그 포스팅 시 썸네일 지정하는 방법은 아래에서 설명해 드릴 테니 참고해 주세요.

 

포스팅 본문에 기존 썸네일이 있는 경우 적용하면 썸네일이 연속적으로 보이는 경우가 발생합니다.

 

 

티스토리 블로그 포스팅 시 썸네일 지정하는 방법

 

티스토리 블로그는 포스팅 시 사용자가 지정하지 않을 경우에 포스팅 시 가장 먼저 사용된 이미지가 대표이미지 썸네일이 되며, 블로그 운영자가 다음과 같은 방법으로 썸네일을 지정할 수 있습니다.

 

 

티스토리 블로그 썸네일 지정하는 방법 #1 - 본문에 있는 이미지 지정

 

본문에 있는 이미지를 썸네일로 사용하고 싶은 경우에는 이미지를 클릭하면 이미지 우측 상단에 [대표]라는 글씨가 보이게 됩니다.

 

이 글씨를 선택하면 해당 이미지가 썸네일로 지정할 수 있으며, 이렇게 지정된 이미지는 본문에서 삭제하더라도 썸네일로 남아 있습니다.

 

티스토리 블로그 포스팅시 본문에 있는 이미지를 썸네일로 지정하는 방법

 

 

티스토리 블로그 썸네일 지정하는 방법 #2 - 발행 전 썸네일 이미지 추가

 

저의 경우 주로 사용하는 방법으로 포스팅을 발행을 위해서 [완료] 버튼을 누르면 아래에 있는 그림처럼 썸네일을 지정할 수 있습니다.

 

티스토리 블로그 포스팅 발행 전에 썸네일을 추가하는 방법

 

 

 

포스팅 본문 출력하는 코드 찾는 방법

 

티스토리 스킨마다 약간의 차이가 있지만 본문을 출력하는 티스토리 기본 코드는 " _article_rep_desc_"이며, 이 코드를 감싸고 있는 DIV 코드가 각 스킨마다 차이가 있습니다.

 

" _article_rep_desc_" 코드를 찾으면 여러 개 나올 수 있는데 " _article_rep_desc_" 코드 위쪽에 "수정", "삭제"라는 문구가 있는지 확인해 주세요.

 

포스팅을 수정할 수 있는 문구가 있고 아래쪽에 " _article_rep_desc_" 코드가 있는 곳이 본문을 출력하는 코드가 있는 자리입니다.(미넴스킨, #1 스킨, 북클립 스킨 등)

 

티스토리 본문을 출력하는 코드 찾는 방법, _article_rep_desc_ 코드 위쪽에 "수정", "삭제"가 있어요

 

 

카카오톡을 비롯한 SNS 공유 기능을 추가하고 싶은 분은 아래에 링크되어 있는 포스팅을 참고해 주세요. 사용하는 스킨이 다르더라도 동일한 방식으로 적용이 가능합니다.

 

✔ 카카오톡 네이버 카페 밴드 등 SNS 공유 기능 추가하는 방법 ✔

 

 

 

 

썸네일 자동 출력 코드 추가

 

주의사항 : HTML 편집이 서툰 분이라면 블로그 스킨을 백업받아두고 작업하시거나 테스트용 블로그에서 적용해 본 다음 적용하시길 추천드립니다.

 

" _article_rep_desc_" 코드를 이용해서 본문을 출력하는 자리를 찾았다면 썸네일을 자동으로 추가하는 HTML 코드를 " _article_rep_desc_" 코드 위쪽에 추가하시면 됩니다.

 

티스토리 블로그 #1 스킨에서 본문을 출력하는 코드를 찾아서 썸네일 자동 출력 코드 추가한 모습

 

 

현재 보고 계신 블로그에서 사용되고 있는 CSS 버튼 스타일이 필요하신 분은 아래에 있는 링크되어 있는 포스팅을 참고해 주세요.

 

✔ CSS 버튼이 필요하신 분은 참고해 주세요. ✔

 

 

 

 

 

내용 추가 : 티스토리 블로그 썸네일 자동으로 추가 시 발생되는 CLS 문제 해결

 

기존에 배포한 티스토리 블로그에 썸네일을 자동으로 추가되도록 한 코드를 사용해 보니 역시 CLS가 0.1을 넘어가는 현상이 발생해서 앞서 배포한 코드는 삭제했습니다.

 

CLS 문제 해결을 위해 열심히 구글에서 검색해보니 고정된 이미지를 사용하는 경우 종횡비를 잡아주는 코드를 추가하면 해결이 된다고 해서 가로, 세로의 폭이 1:1인 썸네일이라서 CSS에 aspect-ratio을 1:1로 설정해서 사용해보니 간단하게 문제가 해결되었습니다.

 

✔ 썸네일에 링크가 있는 버전 ✔

티스토리 본문 썸네일 자동 출력.txt

0.00MB

 

✔ 썸네일에 링크를 제거한 버전 ✔

티스토리 본문 썸네일 자동 출력 링크제거.txt

0.00MB

 

 

 

맺음말

 

지금까지 블로그 운영자가 설정하는 광고와 티스토리 광고 간의 거리를 확보하기 위해서 티스토리 광고보다 높은 자리에서 블로그 운영자 광고가 출력한 다음 썸네일을 이용해서 자동으로 출력하는 방법에 대해서 알아보았습니다.

 

 

부족한 글이지만 끝까지 읽어주셔서 감사합니다. 다음에는 더 좋은 내용으로 뵙겠습니다.

 

 

출처 및 저작권 표시

 

자료 출처

 

저작권 표시

썸네일 디자인 : 미리캔버스에서 제작되었습니다.

본문 글꼴(폰트) : Google Noto Sans Korean - OFL(Open Font Licese)