블로그스팟에서 원하는 이미지로 대표 썸네일 만드는 방법과 업로드한 이미지의 품질을 보존하는 방법입니다.
Blogger에서 글쓰기를 할때 가장 불편한 점을 꼽으면 다음 목록과 같이 이미지와 관련된 모든 것입니다.
- 썸네일은 가장 처음 업로드된 이미지로 자동 설정됩니다.
- 업로드된 이미지의 화질이 마치 디지털 풍화를 한 것처럼 흐릿합니다.
- 또 업로드 시 원본 크기를 선택하면 이미지가 본문 밖으로 탈출합니다.
이 문제를 해결하려면.... 편집기에서 클릭 몇 번으로 해결하는 방법? 놉 없습니다. HTML 편집 모드에서 직접! 수동으로 수정해야 합니다.🤣
썸네일 내 마음대로 지정하기
- 게시물 편집기에서 가장 왼쪽에 있는 '아이콘을 클릭합니다.
- HTML 보기'를 선택합니다.
- 썸네일로 사용할 이미지를 상단에 업로드 합니다.
- 이미지는 아래 형식으로 업로드 되었을 것입니다. HTML 편집 모드에서 업로드하면 너비와 높이 속성이 표시되지 않지만 썸네일은 실제 본문에서 보이지 않게 할 것이기 때문에 이미지의 너비와 높이는 크게 중요하지 않습니다.
<div class="separator" style="clear: both;"><a href="https://이미지경로/s1280/image.webp" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="1280" data-original-height="720" data-original-width="1280" src="https://이미지경로/s1280/image.webp"/></a></div>
-
위 코드
style="display: block; padding: 1em 0; text-align: center;뒤에display: none;을 추가합니다.
<div class="separator" style="clear: both;"><a href="https://이미지경로/s1280/image.webp" style="display: block; padding: 1em 0; text-align: center;display:none; "><img alt="" border="0" width="1280" data-original-height="720" data-original-width="1280" src="https://이미지경로/s1280/image.webp"/></a></div>
- 끝! 이제 글을 저장한 후 본문과 글 목록 페이지를 확인합니다.
조금 더 간단한 방법을 사용할 수도 있습니다.
- Blogger 대시보드에서 테마를 클릭합니다.
- 맞춤 설정 버튼을 클릭합니다.
- 고급 - CSS 추가로
.hidden{display:none;}을 추가하고 저장합니다. - 게시물 편집기에서 이미지를 업로드를 할 때 생성되는
div에 아래 형광펜으로 표시된 부분처럼hidden을 추가합니다.
<div class="separator hidden" style="clear: both;"><a href="https://이미지경로/s1280/image.webp" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="192" data-original-width="192" src="https://이미지경로/s320/image.webp"/></a></div>
업로드한 이미지 화질 보존
블로그스팟은 좋은 품질의 이미지를 업로드해도 저화질로 리사이즈되어 출력됩니다. 원본의 품질 그대로 리사이징되어 보여질 수 있도록 조치를 해야합니다. 물론 수동으로요! 이 작업이 썸네일 작업을 하는 것 보다 훨씬 귀찮습니다. 품질을 포기하는 가장 빠른 방법이 있지만 전 그럴 수 없었어요.😭
- 게시물 편집기에서 가장 왼쪽에 있는아이콘을 클릭합니다.
- 'HTML 보기'를 선택합니다.
- 이미지를 업로드 합니다. '새 글 작성 보기' 상태에서 업로드해도 괜찮지만 어차피 다시 HTML 편집 모드로 돌아와야 하기 때문에 저는 HTML 편집 모드에서 작업합니다.
<div class="separator" style="clear: both;"><a href="https://이미지경로/s320/image.webp" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="192" data-original-width="192" src="https://이미지경로/s320/image.webp"/></a></div>
- 이미지 URL이 두 개인 것을 확인할 수 있습니다.
<a>태그가<img>태그를 감싸고 있습니다.<a>태그를 지우고<img>태그만 남겨 놓았더니 라이트박스가 작동하지 않았습니다. 라이트박스를 이용하려면 두 개의 URL을 그대로 두면 됩니다. - 다음,
<img>태그 URL에서 형광펜으로 표시된 부분을s0으로 수정합니다. - 이미지의 너비가 320px로 아주 작게 출력될 것입니다. 노란색 형광펜으로 표시된
width="320"의 값을 원본과 같거나 본문 너비 정도로 값을 변경해주세요. - 이제 미리보기로 이미지의 품질과 크기를 확인하세요.
며칠간 블로그스팟을 경험하면 '어라? 이것도 되네?!', '아니, 이건 왜 이래!?'를 반복 중입니다. 코딩에 지식이 어느 정도 있는 사용자라면 정말 재밌을 것 같다고 생각해요. (저는 코.알.못이라서ㅠ) 구글이 언젠가 대대적인 업데이트를 해 준다면 티스토리와 네이버에 버금가는 에디터를 꼭!! 만들어 줬으면 좋겠습니다.