티스토리/Bookclub 모바일 스킨 상단 카테고리 메뉴 편집하는 법

티스토리/Bookclub 모바일 스킨 상단 카테고리 메뉴 편집하는 법

티스토리 Bookclub 스킨 편집 소개글이 벌써 네 번째네요. 제목 잘림 편집, 썸네일 크기 변경, 헤드바 컬러 변경에 이어서 오늘은 모바일 스킨에서 상단 메뉴 간격을 조정하는 방법을 소개하겠습니다.

*아래에서 설명하는 내용은 티스토리 관리 - 꾸미기 - 모바일 - '모바일웹 자동연결을 사용하지 않습니다.'를 선택하지 않은 분들에게만 해당됩니다.

 

 

<모바일 스킨에서 카테고리 나타내기>

Bookclub 기본 스킨 상태에서는 모바일 화면에서 상단 메뉴에 홈, 태그, 방명록 밖에 나타나지 않는데요. 상단 오른쪽의 메뉴 버튼을 클릭하면 카테고리가 나타나긴 하지만 솔직히 메뉴 버튼 누르는 사람은 많지 않다고 생각합니다.

사실 유입의 반 이상이 모바일인 만큼 모바일에서도 카테고리가 한 눈에 들어오도록 표시해두면 체류시간이 길어지지 않을까 싶어서 카테고리를 상단메뉴로 설정해주었습니다.

방법은 티스토리 관리 - 꾸미기 - 메뉴 화면에서 메뉴 추가를 선택 후 카테고리를 지정하면 됩니다.

 

 

 

<모바일 스킨에서 상단 메뉴 간격 조정하기>

그런데 메뉴를 추가해도 스킨의 기본 설정 때문에 화면에서 잘려버리고 마는 상황이 생깁니다.

상단 메뉴 잘림.

그래서 간격을 줄이는 방법을 알려드리겠습니다.

 

① 티스토리 관리 - 스킨편집 - CSS로 들어가서 ctrl+f로 'gnb'를 검색해주세요. 그리고 2461번 줄 정도로 이동해줍니다.

 

② 세 번째에 있는 '#gnb ul li'의 padding 값을 0 5px로 변경해줍니다. 그러면 아래와 같이 간격이 줄어들면서 숨어있던 메뉴가 나타나죠? 하지만 뒷부분이 여전히 잘려있는 분들은 더 따라오세요.

 

③ 첫 번째에 있는 '#gnb'의 height 아래부분에 다음 내용을 추가해줍니다. 퍼센티지는 제 메뉴에 맞춘 것이기 때문에 따라하시는 분들은 각자 메뉴에 맞는 크기대로 조절하세요.

font-size: 90%;

 

이제 메뉴가 전부 나타나게 되었습니다.

사실 다른 방법은 없을까 고민해봤지만 html, css를 배워본 적도 없고 주먹구구식으로 하는거라 저한테는 이게 최선이네요.

이 방법으로 하면 카테고리 4~5개 정도까지는 모바일에서 잘 나타날 것 같습니다.