본문 바로가기
블로그 관리/티스토리 블로그 관리

티스토리 블로그 초보를 위한 대표 이미지 안 잘리게 만들기

by 모바일 SW 개발자 Kibua20 2020. 6. 27.
반응형

블로그를 운영한 지 한 달 넘은 초보입니다. 

 

블로그에 글을 게시하다 보면 대표 이미지가 정렬이 되지 않거나, 좌우가 잘리거나 그림의 일부만 표시되어 현상이 있어 이에 대한 개선 방안을 찾고 있었습니다.  HTML이나 CSS를 잘 아시는 분은 티스토리에서 제공하는 스킨을 분석해서 html과 css를 수정을 가능하겠지만, 저와 같이 HTML 익숙하지 않은 분들께는 쉽지 않은 방법입니다. 블로그 스킨을 변경할 때마다 HTML과 CSS를 수정하는 것은 결코 쉬운 문제는 아닙니니다. 그래서 HTML 전문가 아닌 일반인 분들도 쉽게 대표 이미지가 잘리지 않도록 설정할 수 있는 방법을 소개드립니다. 

 

티스토리 블로그에 게시글의 작성하고 포스팅하면 대표 이미지가 설정됩니다.  대표 이미지는 해당 게시글에 올린 첫번째 이미지로 자동으로 지정되고,  또는 글 작성자가 특정 이미지를 지정할 수도 있습니다.  티스토리 블로그에서는 리스트 메뉴에서  소개글 옆에 아이콘처럼 대표 이미지가 표시되고,  트위터에 올리는 경우에도 대표 이미지를 표시하게 됩니다. 

 

블로그의 내용도 중요하지만 이미지로 좌우로 잘려 깔끔하지 못 한 인상이나 그 의미를 이해하기 어렵게 됩니다.  예를 들어 제 게시글 보면 블로그 리스트 화면에서 대표이미지의 일부만 표시되어 좌우가 잘리고,  대표 이미지가 의미 전달을 잘하지 못하고 있습니다. 트위터에 블로그 글을 올린 경우에도 티스토리 블로그와 동일하게 대표 이미지의 좌우가 잘려서 보기 좋지 않습니다.

 

 

티스토리 블로그 리스트 화면 - 대표 이미지의 좌우가 짤린다
트위터에서 대표이미지가 짤린 화면

 

개선 방안

블로그 게시글의 대표 이미지를 알 잘리게 하는 방법은 간단합니다.  대표 이미지를 게시글 본문에 이미지를 사용하지 않고 적당한 크기로 대표 이미지를 미리 만들어 놓고 게시글을 '공개'로 포스팅할 때 설정하는 것입니다.  이 과정에서는 대표 이미지를 잘리지 않도록 크기 조절하는 것이 중요합니다.  적당한 크기의 대표 이미지의 Template을 미리 만들어 놓고, 파워포인트나 이미지 에디터를 활용해서 필요한 부분만 다시 편집해서 올리면 아주 쉽게 대표이미지를 만들 수 있습니다.  대표이미지 동영상 과정을 동영상으로 올렸습니다. 

 

  1. 게시글에 대한 대표 이미지를 준비한다. : 블로그 대표이미지 Template 사용
  2. 게시글을 '공개' 포스팅할 때 미리 준비한 대표 이미지를 선택한다. 
대표 이미지 설정 방법

 

대표 이미지 template은 아래와 같이  259x239 크기의 png 파일을 미리 준비합니다.  아래 이미지 크기는 경험적으로 설정한 것으로 가로x세로 비율을 유지한 상태에서 이미지 크기를 조절해도 상관없습니다. PC, 모바일, SNS에서 각기 사용하는 이미지 크기가 다르기 때문에 '블로그 대표 이미지'의 녹색 영역만 사용하고 나머지 영역은 여백으로 사용해야 합니다. PC에서는 블로그 대표 이미지를 바탕으로로 제목을 흰색으로 표시하기 때문에 가독성을 높이기 위해서 대표 이미지에서는 가급적이면 흰색은 피하는 것이 좋습니다. 

 

블로그 대표 이미지 Template
블로그대표이미지_template.png
0.00MB

 

 

블로그 대표 이미지의 편집은 일반 이미지 edit 프로그램을 사용해도 좋고, 저 같은 경우에는 Microsoft 365의 PowerPoint를 사용해서 Template 이미지를 기준으로 설정하고자 하는 대표 이미지의 크기를 조절합니다.

 

  1. Power point에서 대표 이미지 template을 불러와서
  2. 녹색 영역으로 원하는 그림을 대체하고 별도의 파일로 저장합니다.
  3. 블로그 공개 발행 시 해당 이미지를 선택합니다. 
  4. 공개 발행합니다. 

파워포인트에서 Template 이미지 삽입

 

Template 이미지의 녹색 영역을 원하는 이미지로 변경하고 저장 (예제에서 도넛츠 그림)

 

블로그 공개 발행 시 대표 이미지를 선택

 

 

대표 이미지 설정 결과를 PC와 모바일에서 확인하면 아래와 같습니다.

PC에서 대표 이미지 설정 결과 
PC에서 대표 이미지 설정 결과
모바일에서 대표 이미지 설정 결과

 

<관련글>

[블로그 관리/티스토리 블로그 관리] - 티스토리 블로그 글을 구글 디스커버에 노출시키는 방법

[블로그 관리/티스토리 블로그 관리] - 파이썬 Selenium을 활용한 네이버 서치어드바이저 URL 입력 '자동화'

[블로그 관리/티스토리 블로그 관리] - 초보자를 위한 티스토리 블로그 애드센스 광고 설정 방법

[블로그 관리/티스토리 블로그 관리] - Adsense 승인 후 블로그 유입량 및 수익 분석 - 한달 100$ 수입 인증

[블로그 관리/티스토리 블로그 관리] - 티스토리에서 테이블 편집 방법: 가로, 세로, 외곽선, 복잡한 테이블 만들기

[블로그 관리/티스토리 블로그 관리] - 파이썬 Selenium을 활용한 블서치 백링크 등록 '자동화'

[블로그 관리/티스토리 블로그 관리] - 티스토리 검색 기능이 제목을 가리는 문제 해결 방법 (티스토리 검색 기능 삭제)

[블로그 관리/티스토리 블로그 관리] - 티스토리 블로그 초보를 위한 대표 이미지 안 잘리게 만들기

[블로그 관리/티스토리 블로그 관리] - 티스토리 블로그 메뉴 추가하기

[블로그 관리/모바일 마케팅] - [용어 정리 #7] CPC, CTR, CPM, RPM에 대한 설명

[블로그 관리/모바일 마케팅] - [용어정리 #6] 백링크 / 역링크

[블로그 관리/모바일 마케팅] - [용어 정리 #4] Android Install Referrer API

[블로그 관리/모바일 마케팅] - [용어 정리 #3] Deep link / App link

 

반응형



댓글1