블로그를 시작한 지 얼마 안 되었지만, 지금까지 글을 작성해 오면서 포스팅한 글에 대해서 마음에 안 드는 부분을 발견했습니다. 그것은 바로 글 목록 옆에 나타나는 섬네일(thumbnail) 이미지입니다. 대표이미지로 지정한 이미지가 글 목록 옆에 섬네일로 나타납니다.
먼저 대표이미지를 설정하는 방법부터 알아보겠습니다. 참고적으로 제가 사용하고 있는 스킨은 '북 클럽(Book Club)' 스킨입니다.
대표이미지 설정하기
글 작성 시, 업로드한 이미지 또는 사진 중에서 대표이미지로 하고 싶은 이미지를 하나 선택하면 이미지 오른쪽 위에 '대표'라고 표시가 나타납니다. 클릭해서 선택하면 대표이미지가 됩니다. 만약 대표이미지를 지정하지 않으면, 작성한 글의 첫 번째 이미지가 대표이미지로 자동 지정됩니다.
내 블로그의 글 목록을 보면, 위의 이미지와 같이 대표이미지로 선택한 이미지가 메인 섬네일로 나옵니다. 하지만, 상하좌우로 잘리거나 작성한 글 내용 또는 제목과 직접적으로 연관성이 떨어지는 이미지가 나타납니다.
그래서, 스킨 편집의 CSS 항목에 들어가서 수정도 해보았습니다.
또, 스킨 편집의 HTML 항목에 들어가서도 수정을 해보았지만, 이상하게 수정이 제대로 이루어지지 않았습니다.
그래서, 어차피 수정이 안 된다면, 섬네일 크기에 맞게 따로 대표이미지를 만들어서 업로드하기로 했습니다. 여러 가지 테스트를 통해서 섬네일로 올라오는 이미지의 특성을 알았습니다.
글 목록 위에 나타나는 섬네일은 위의 빨간색 영역만 표시가 됩니다. 그래서 대표이미지로 지정할 이미지를 수정해서 테스트해 보았습니다.
이렇게 1080×1080픽셀의 정사각형 모양을 만들어서 대표이미지로 설정해 보았습니다.
그리고 글 목록의 섬네일을 통해 수정 전과 수정 후를 비교해 보았습니다. 이제야 직사각형 안으로 들어왔네요. 그럼, 이번에는 대표이미지 위에 텍스트를 넣어보겠습니다.
대표이미지 만들기
그림판에는 외곽선 기능이 없기 때문에 대표이미지 위에 텍스트를 넣기 위해서 저작권 걱정 없는 무료 디자인툴 미리캔버스를 이용해 보겠습니다. 아래 링크를 클릭하면 미리캔버스 사이트로 이동합니다.
디자인 플랫폼 미리캔버스
디자인 작업이 필요한가요? 5만개 이상의 무료 템플릿으로 간편하고 편하게 원하는 디자인을 만들 수 있어요.
www.miricanvas.com
위의 사이트 링크를 클릭해서 들어가면 다음과 같은 화면이 나옵니다.
회원가입 절차는 생략하겠습니다. '바로 시작하기' 버튼을 클릭합니다.
왼쪽 위에 있는 '파일' 메뉴를 클릭한 다음, '새 디자인 만들기'를 클릭합니다.
'직접 입력'을 클릭한 다음, 숫자를 입력합니다. 저는 1080×1080으로 하겠습니다. 입력을 하고 '새 디자인 만들기'를 클릭합니다.
왼쪽에 있는 '업로드' 메뉴를 선택하고 다시 '업로드' 버튼을 클릭해서 대표이미지로 사용할 이미지를 선택합니다.
불러온 이미지를 레이아웃에 적당히 맞추고, 왼쪽 메뉴 중에서 '텍스트' 메뉴를 선택하고 '제목 텍스트 추가'를 클릭합니다.
글꼴을 풀다운 메뉴 중에서 선택해 줍니다.
글꼴 크기를 대표이미지 안으로 들어가게 끔 줄여 줍니다.
이번엔 글꼴에 '그라데이션'을 적용해 줍니다.
글꼴에 '외곽선'을 적용합니다.
이번엔 '행간'을 수치를 입력하여 적용합니다.
글꼴 박스를 '중간'으로 정렬시킵니다.
텍스트 입력이 완성된 이미지를 다운로드합니다. 오른쪽 위에 있는 '다운로드' 메뉴를 선택하고, '빠른 다운로드' 버튼을 클릭합니다.
이미 발행한 글이든지 발행하려고 하는 글은 기존 대표이미지가 대표이미지 박스 안에 표시가 될 것입니다. 오른쪽 위에 마이너스(-) 아이콘을 클릭해서 삭제합니다.
다시 '대표이미지 추가' 아이콘을 클릭해서 조금 전에 작업해서 다운로드한 이미지를 불러옵니다.
'공개 발행' 버튼을 클릭합니다.
글 목록에서 변경된 대표이미지의 섬네일을 확인할 수 있습니다. 현재로서는 이 방법밖에 없는 것 같습니다.
오늘은 대표이미지 수정하는 방법에 대해 알아보았습니다. 북클럽 스킨에서 대표이미지의 크기를 변경해서 사용하시는 분도 계신 것으로 알고 있습니다만, 제 경우에는 적용되지 않는 것 같습니다. HTML과 CSS 값이 달라서 스킨마다 다르게 해 줘야 될 것 같습니다.
오늘은 여기까지 하겠습니다.
다음 시간에 뵙겠습니다.
감사합니다.
'블로그로 돈벌기' 카테고리의 다른 글
| 티스토리 블로그, 글감검색 기능에 대해서 (2) | 2023.01.18 |
|---|---|
| 티스토리 블로그, 글 제목 크기 변경하는 방법 (0) | 2023.01.17 |
| 인공지능 ChatGPT에게 질문을 해보았습니다 (0) | 2023.01.13 |
| 구글 애널리틱스 통계에서 내 접속 기록을 제외시키는 방법 (0) | 2023.01.12 |
| 구글 애널리틱스 설정 방법. 티스토리 블로그 연동하기 (0) | 2023.01.11 |
댓글