구글 블로그 이미지 정렬 안 되는 현상

구글 블로그 www.blogger.com이 업그레이드되었습니다. 거의 매일 구글 블로그에 접속해서 애용하고 있는 저로서는, 보다 현대적인 사용자 인터페이스와 시대에 발맞춘 기능 등으로 Blogger가 새롭게 꾸며지는 것은 정말 반가운 일입니다😀

그런데 처음 새 글을 작성하고 다시 그 글을 수정하고 업데이트하고 나서 그 글이 잘 게시되었는지 모바일 환경에서도 확인하면 가운데 정렬되어 있어야 할 이미지가 오른쪽으로 밀려, 이미지 가운데 정렬이 안 되어 있는 현상이 일어나고 있습니다. 몇 번을 반복해도 똑같습니다. 글이 잘 게시되었는지 모바일 환경에서도 확인하지 않는다면 알아차리지 못합니다.

업그레이드 과정에서의 작은 문제라고 생각하고 유저 테스트를 거쳐 시간이 흐르면 자연스럽게 고쳐질 수도 있는 부분이라고 생각하지만 이 현상이 일어나고 있는 시점에서 저만의 해결책을 공유하고자 합니다.

해결책

이미지를 삽입한 직후 HTML 모드로 코드를 확인하면 <a> 태그에 「imageanchor="1"」이 있습니다. 이 부분이 글 수정 모드를 변경하거나, 나중에 다시 그 글을 수정하고 업데이트하거나 하는 등의 경우에 나도 모르게 사라지게 되면서 <a> 태그의 「style="margin-left: 1em; margin-right: 1em;"」이 유효화되어 모바일에서 이미지가 가운데 정렬이 안 되는 것입니다.

원인을 파악하기 위해 직접 들여다보지 않으면 무슨 말인지 이해가 안 될 수도 있지만 이렇게만 하세요!

이미지 삽입 직후, HTML 모드로 변경해서 <a> 태그의 「imageanchor="1"」과 「style="margin-left: 1em; margin-right: 1em;"」부분 모두 삭제합니다. 애초에 이미지에 <a> 태그 자체가 그다지 필요하지 않다면 <a> 태그 모두를 들어내는 방법도 있습니다.

🍀구글 블로그 기본 테마인 Contempo, Soho, Emporio 등에서 확인하였습니다.

🍀이미지 크기를 애초에 작게 설정하였다면 밀리는 모습은 나타나지 않습니다.

수정 전↓↓↓ 오른쪽으로 밀린 모습

수정 후↓↓↓ 가운데로 정렬된 모습