[Flatinum 스킨 '스크롤 네비게이션 바' 크기 설정]
블로그 사이드바 메뉴에 애드센스 광고를 넣는 방법에 대해 포스팅한 이전 글([애드센스] 티스토리 블로그 사이드 메뉴에 애드센스 광고 넣기)에서 스킨을 Flatinum 이라는 반응형 스킨으로 변경하였다고 했었는데요. 이번 포스팅에서는 이 스킨의 '스크롤 네비게이션 바'의 크기를 설정해보도록 하겠습니다.
'스크롤 네비게이션 바'가 뭔가요?
'스크롤 네비게이션 바'의 크기를 조절하기에 앞서 '스크롤 네비게이션 바'는 아래의 그림에서 최상단에 위치한 반투명의 검은 부분입니다. '네비게이션 바' 자체는 스크롤하지 않아도 최상단에 보이는 메뉴 화면이고 스크롤해서 나오는 최상단의 메뉴 화면도 '네비게이션 바' 이지만 저는 특별히 후자를 '스크롤 네비게이션 바'라고 부르도록 하겠습니다.
▲ Flatinum 스킨 '스크롤 네비게이션 바' 위치
개인의 취향이지만 저는 이 부분이 가장 먼저 눈에 들어오며 크기가 너무 크다고 생각했습니다. 그래서 제일 먼저 이 부분의 크기를 줄이기 위해 폭풍 검색을 하여 방법을 찾아냈습니다.
[html 편집] 화면 이동
'스크롤 네비게이션 바'의 크기 이외에도 스킨의 각종 크기와 이런 저런 설정들을 수정하기 위해서는 html 편집이 필요합니다. 아래 사진들을 따라서 html을 편집하는 부분으로 이동하겠습니다.
▲ 관리자 메뉴에서 [스킨 편집] 클릭
▲ [스킨 편집] 화면에서 [html 편집] 클릭
▲ [html 편집] 화면
자, 이제 [html 편집] 화면으로 이동했습니다. 여기서 수정할 항목에 따라 [HTML]/[CSS]/[파일업로드]를 확인하고 수정하면 되겠습니다.
'스크롤 네비게이션 바' 크기 설정
▲ '스크롤 네비게이션 바' 크기 설정 부분
'스크롤 네비게이션 바' 크기에 대한 설정은 [CSS] 코드 화면에서 찾을 수 있습니다. 'ctrl + F'를 눌러 'nav.navbar-inverse.shrink' 문구를 검색하면 쉽게 찾을 수 있습니다. 여기서 padding 값을 설정해줌으로써 '스크롤 네비게이션 바'의 크기를 수정할 수 있습니다.
▲ 수정 전 padding 값의 위치
위의 소스에 있는 '35px'과 '28px'은 위의 그림에 표시해둔 것과 같이 각 항목의 상하 여분을 의미합니다. 그리고 '20px'은 그림에 표시하기 애매하여 표시하지 않았습니다만 각 항목의 좌우 여분을 의미합니다. 이 값들을 사용자의 입맛에 맞게 수정하여 크기를 설정하는 것입니다. 저는 좌우 padding에 대한 설정의 필요성을 느끼지 못하여 상하 padding만 조절하였습니다.
▲ 수정 후 padding 값과 변경된 모습
아직 블로그 로고를 변경하지 않은 상태라서 블로그 로고를 변경하게 되면 값이 또 달라지게 되겠습니다만, 현 상태에서 저는 20px과 10px로 값을 변경하였습니다. 확실히 이전의 모습과 달리 제가 원하는 대로 줄어든 모습입니다. 그런데 값을 수정하고 변경사항을 검토하다가 문제점을 하나 발견하였습니다.
모바일 반응형 화면 '스크롤 네비게이션 바' 크기 설정
▲ '모바일 꾸미기 설정' 화면
제가 선택한 Flatinum 스킨은 반응형 스킨으로써 모바일과 같이 작은 화면에서도 최대한 데스크탑에서 보는 화면과 유사하게 구성할 수 있는 스킨입니다. 따라서 저는 모바일 환경에서 '모바일 화면을 사용하지 않음'을 체크해두었습니다. (티스토리 블로그 모바일 앱으로 접근하는 것은 자동적으로 제외됩니다.) 그래서 모바일 환경에서 보이는 블로그의 모습도 신경쓰지 않을 수가 없는데 위에서 설정한 padding을 적용하면 생기는 문제점을 발견하였습니다.
▲ 모바일 반응형 '스크롤 네비게이션 바' 화면 크기 문제
위의 그림을 보시면 '로고' 부분의 padding은 정상적으로 적용이 되었으나 우측의 '메뉴 확장 버튼' 부분의 padding으로 인해 전체적인 크기가 유지되어 있고 위치도 어긋나 있습니다. 이 문제를 해결하려고 인터넷을 아무리 뒤져도 나오지가 않아서 이 부분에 대해서 포스팅을 포기하려고 했습니다. 하지만 결국 전 찾고야 말았습니다!
▲ 모바일 반응형 '스크롤 네비게이션 바' 토글 위치 수정
바로 위의 그림에서 표시한 부분을 수정하면 됩니다. 기존 값에 38px이 두개가 있는 데 이것이 메뉴 토글의 상하의 여분을 나타내는 값입니다. 이 값을 저는 23px로 수정하여 적용하였습니다. 그 결과 모바일 반응형 '스크롤 네비게이션 바' 화면에서 발생되는 이격이 해결되었습니다. 이 문제를 해결하기 위해 무려 3시간 동안 삽질을 했습니다. 이 글을 보신 여러분들이 저와 같은 삽질을 하지 않게 된 것에 위안을 삼으며 포스팅을 마칩니다.
관련 포스팅
Flatinum 스킨 수정 시리즈
- [애드센스] 티스토리 블로그 사이드 메뉴에 애드센스 광고 넣기
- [티스토리] Flatinum 스킨 '스크롤 네비게이션 바' 크기 설정 (이번 포스팅)
- [티스토리] Flatinum 스킨 '메뉴 토클' 설정
- [티스토리] Flatinum 스킨 상단 '메뉴' 설정
- [티스토리] Flatinum 스킨 하단 '페이징' 설정
유익한 시간되셨다면 하단에 공감 버튼을 눌러주세요.
여러분의 공감은 저에게 큰 힘이 됩니다.
'인터넷 정보 > 티스토리' 카테고리의 다른 글
| [티스토리] Flatinum 스킨 수정 시리즈 (0) | 2018.05.02 |
|---|---|
| [티스토리] Flatinum 스킨 하단 '페이징' 설정 (0) | 2018.05.01 |
| [티스토리] Flatinum 스킨 상단 '메뉴' 설정 (0) | 2018.05.01 |
| [티스토리] Flatinum 스킨 '메뉴 토글' 설정 (0) | 2018.05.01 |
| [티스토리] 임시저장 사라짐(누락) 오류 문제 해결 방법 (1) | 2018.04.26 |
