'클릭할 수 있는 요소가 서로 너무 가까움' 해결 방법, 구글 서치콘솔 모바일 사용 편의성 문제

구글 서치콘솔에서 온 메일, 모바일 사용 편의성 문제가 감지됐다는 것입니다. 클릭할 수 있는 요소가 너무 가까움과 콘텐츠 폭이 화면 폭보다 넒음에 대해서 해결 방법을 알아보겠습니다.

 

반응형

1. 문제 확인하기

 

메일을 열어서 문제를 확인해 보니 클릭할 수 있는 요소가 너무 가깝다는 내용과 콘텐츠 폭이 화면 폭보다 넓다는 내용이었습니다. 실제로 이 두 가지 문제는 줄 간격에 관한 내용입니다. 모바일에서 사용하기 쉽게 조정을 하라는 것입니다.

 

2. CSS에서 간격 조정하기

 

먼저 PC에서 ①블로그 설정 화면으로 들어 갑니다. 사이드의 옵션 중 ②스킨편집으로 들어가서 오른쪽 상단의 ③html 편집을 눌러줍니다. 그중 ④CSS 를 눌러 줍니다. 화면을 조금만 아래로 내리면 ⑤line-height 목록이 나옵니다. 기존 수치를 보면 1.25라고 되어 있는데 이것을 ⑥2.25로 바꿔 주기만 하면 됩니다. 

 

 

수정이 끝나고 구글 서치콘솔의 모바일 편의성 화면으로 가면 유효성 검사가 '시작됨'으로 표시되어 있습니다. 콘텐츠 폭 문제는 그냥 놔둬도 됩니다.

 

반응형

3. 유효성 검사 확인하기

 

그리고 다시 이메일로 돌아가서 수정 결과 확인을 누르면 유효성 검사가 시작됨을 알 수 있습니다.

 

 

그 다음날 바로 메일이 왔습니다. 두 가지 문제가 해결되었다면서 왔는데 구글 서치콘솔로 들어가서 확인해 보니 유효성 검사가 통과 됐다는 것을 볼 수 있습니다. 

line-height 수치만 바꿔 주는 것으로 두 가지 문제가 바로 해결된 것입니다.

반응형