티스토리 북클럽 스킨을 이것저것 수정하다 보면 '클릭할 수 있는 요소가 서로 너무 가까움'과 같은 오류 메시지가 구글 서치 콘솔로부터 오는 경우가 있습니다.
이 번 글에서는 이와 같은 '모바일 편의성' 관련 경고가 뜰 때 모바일 화면의 서치 아이콘과 사이드 바 메뉴 아이콘 위치를 조정하여 해결할 수 있는 요긴한 방법을 알려드리도록 하겠습니다.
모든 스킨 편집은 블로그 관리 모드에서 꾸미기/스킨 편집/html 편집/HTML 또는 CSS로 클릭해서 들어간 후 해당 행 번호로 직접 스크롤해서 이동하거나 Ctrl+F를 누른 후 키워드 찾기 기능을 활용하여 수정할 곳으로 이동해야 합니다.
(다음 위치로 이동은 Ctrl+G)
이때 행 번호는 개인마다 추가한 행들이 다르기 때문에 정확히 일치하지 않고 차이가 있으니 부근의 번호로 참조하시기 바랍니다.
수정 초기에는 혹시 모를 실수를 대비해 원상복구가 용이하도록 수정할 원본 행들을 코멘트 처리해 두거나 복사해 두는 것이 현명한 방법입니다.
블로그 관리/스킨 편집/html 편집/CSS로 들어가서 2421행 부근으로 이동하면 아래와 같은 내용을 볼 수 있습니다.
북클럽 스킨도 PC 화면과 모바일 화면을 각각 별도로 세팅하도록 되어있으며 모바일 화면 관련 변경은 주로 2000번대 이상의 높은 번호 행에서 변경하게 됩니다.
대부분 클릭 요소가 너무 가깝다는 에러는 이 두 아이콘의 위치 때문에 발생합니다.
각 행에 표시된 내용을 참조하셔서 본인 블로그의 모바일 화면에 맞도록 잘 수정하신 후 오른쪽 '적용' 버튼을 누르면 완료됩니다. 상황에 따라서는 다른 행의 세팅도 수정하고 미리보기를 통해 최적화할 필요도 있으니 참조하시기 바랍니다.
#header .util .search {
position: absolute; <-- 추가 삽입, 서치 아이콘의 위치를 절대 좌표로 지정하도록 하는 코드입니다.
top: 5px; <-- 추가 삽입, 서치 아이콘의 화면 상단으로부터의 거리로 클수록 아래로 이동합니다.
right: 70px; <-- 추가 삽입, 서치 아이콘의 화면 오른쪽으로부터의 거리로 클수록 왼쪽으로 이동합니다.
float: right;
margin: 30px;
}
#header .util .search.on {
z-index: 20;
width: 100%;
}
#header .util .search.on input {
float: right;
width: 70%; <-- 서치 아이콘을 눌렀을 때 활성화되는 입력 창의 길이이며 겹치지 않도록 조정하면 됩니다.
}
#header .util .profile {
display: none;
}
#header .util .menu {
position: absolute; <-- 사이드 바 메뉴 아이콘의 위치를 절대 좌표로 지정하도록 하는 코드입니다.
top: 5px; <-- 사이드 바 메뉴 아이콘의 화면 상단으로부터의 거리로 클수록 아래로 이동합니다.
right: 24px; <-- 사이드 바 메뉴 아이콘의 화면 오른쪽으로부터의 거리로 클수록 왼쪽으로 이동합니다.
z-index: 300;
display: inline-block;
width :30px;
height :30px;
border :1px solid #eee;
border-radius :50%;
text-indent :-999em;
outline:none ;
margin :30px ;
}
