프롤로그
블로그 방문은 대부분 (필자의 경우는 70% 이상) 모바일을 통해서 이루어집니다.
따라서 모바일로 접속했을 때의 블로그 속도가 매우 중요합니다. 저는 Lighthouse로 모바일 접속 스피드를 점검하곤 하는데 SEO 항목도 지적사항이 있었지만 성공적으로 개선을 하였습니다. 이에 대한 내용을 공유하고자 합니다.
모든 스킨 편집은 블로그 관리 모드에서 꾸미기/스킨 편집/html 편집/HTML 또는 CSS로 클릭해서 들어간 후 해당 행 번호로 직접 스크롤해서 이동하거나 Ctrl+F를 누른 후 키워드 찾기 기능을 활용하여 수정할 곳으로 이동해야 합니다.
(다음 위치로 이동은 Ctrl+G)
이때 행 번호는 개인마다 추가한 행들이 다르기 때문에 정확히 일치하지 않고 차이가 있으니 부근의 번호로 참조하시기 바랍니다.
수정 초기에는 혹시 모를 실수를 대비해 원상복구가 용이하도록 수정할 원본 행들을 코멘트 처리해 두거나 복사해 두는 것이 현명한 방법입니다.
아래 그림에서와 같이 SEO 점검 결과 91점이고 개선 항목 중에 하나가 모바일 버튼이 48X48 px 보다 작다는 것이며 확인해 보면 모바일 오른쪽 상단의 '사이드 메뉴'가 해당 버튼입니다.
모바일 '사이드 메뉴' 버튼 크기 확대
블로그 관리/스킨 편집/html 편집/CSS로 들어가서 2439행 부근으로 이동하여고 아래 내용을 참조하여 수정한 후 오른쪽 상단의 '적용'을 눌러 줍니다.
사이드 메뉴의 크기인 width와 height를 48px로 변경하면 버튼의 크기가 커지면서 주변 다른 버튼과 겹쳐지므로 top, right 값을 적절히 수정하여 위치를 잡아 주어야 합니다.
#header .util .menu {
position: absolute;
top: 24px; <--- 값이 클수록 사이드 메뉴 버튼이 아래로 이동합니다. 필자는 ~3px 정도로 수정하였습니다.
right: 24px; <--- 값이 클수록 사이드 메뉴 버튼이 왼쪽으로 이동합니다. 필자는 ~11px정도로 수정하였습니다.
z-index: 300;
display: inline-block;
width :48px ; <--- SEO 기준으로 수정
height :48px ; <--- SEO 기준으로 수정
border-radius :50%;
text-indent :-999em;
outline:none ;
border :1px solid #eee;
}
사이드 메뉴 크기 확대 후 주변 버튼이나 다른 항목과의 겹침을 방지하기 위해 아래 사항도 변경이 필요하니 참조하시기 바랍니다.
서치 버튼 위치 수정
서치 돋보기 버튼 위치 수정 방법은 아래의 이전 글을 참조하시기 바랍니다.
카테고리 메뉴 수직 위치 조정
블로그 관리/스킨 편집/html 편집/CSS로 들어가서 2483행 부근으로 이동하고 아래 내용을 참조하여 수정한 후 오른쪽 상단의 '적용'을 눌러 줍니다.
padding 첫 번째, 세 번째 숫자가 카테고리 메뉴의 위쪽 간격 크기와 아래쪽 간격 크기이며 이것을 수정하면 수직 위치를 조절할 수 있습니다. 예를 들어 35px 0 15px로 변경하면 카테고리 메뉴는 아래쪽으로 이동하게 됩니다.
}#gnb ul li a {padding: 25px 0 24px; <--- 25px 위쪽 마진, 24px 아래쪽 마진}
지금까지 티스토리 북클럽 SEO 개선을 위한 모바일 버튼을 수정하는 방법에 대해 알아보았습니다. 아래의 다른 포스팅 글도 참조하시기 바랍니다.
