블로거 테마로 "Emporio Technica"를 사용하고, 레이아웃의 사이드바에 "가장 많이 본 글" 또는 링크 테그가 많은 가젯을 추가한 경우, 모바일 사용 편의성에서 "클릭할 수 있는 요소가 너무 가까움", "컨텐츠 폭이 화면 폭보다 넓음" 오류가 발생합니다.
오류 원인은 "Emporio" 테마에서 사이드바를 숨기지 않고, 보이지 않게 위치만 이동하기 때문입니다.
작업 순서
1. 모바일버전 페이지 로드시 사이드바 숨기기- 사이드바(<div id="sidebar_feed">) class에 invisible 추가
2. 숨겨진 사이드바를 보여주기 위한 이벤트 추가
- 햄버거 버튼 클릭시 사이드바 컨테이너(<aside class="sidebar-container">) class에 sidebar-invisible가 제거됨
- MutationObserver를 이용해 사이드바 컨테이너 class 변경시 사이드바 class에 invisible 토글
위와 같이 수정했다면 모바일 친화성 테스트 도구 사이트로 이동하여 테스트 수행하고, 정상적으로 처리된 경우 아래와 같이 표시됩니다.
그리고 Google Search Console의 모바일 사용 편의성 페이지에서 오류 항목 클릭 후, "수정 결과 확인" 버튼을 클릭하면, 유효성 검사가 시작되었다고 표시됩니다.
3일 후 유효성 검사가 완료되었습니다.
이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.
댓글
댓글 쓰기