본문으로 바로가기


[Flatinum 스킨 상단 '메뉴 토글' 설정]


Flatinum 스킨 수정 시리즈

[애드센스] 티스토리 블로그 사이드 메뉴에 애드센스 광고 넣기

[티스토리] Flatinum 스킨 '스크롤 네비게이션 바' 크기 설정

- [티스토리] Flatinum 스킨 '메뉴 토클' 설정 (이번 포스팅)

[티스토리] Flatinum 스킨 상단 '메뉴' 설정

[티스토리] Flatinum 스킨 하단 '페이징' 설정



'메뉴 토글'이 뭔가요?


▲ Flatinum 스킨에서 '메뉴 토글' 위치


다들 이렇게 명명하여 사용하시는 지는 모르겠지만 저는 위의 그림에서 붉은 색 점선으로 표시된 부분을 '메뉴 토글'이라 명명하여 사용하고 있습니다. 따라서 이번 포스팅이나 앞으로의 포스팅에서 제가 '메뉴 토글'이라는 단어를 사용하게 되면 저 위치의 메뉴를 의미합니다.





초기 '메뉴 토글' 상태


▲ 초기 '메뉴 토글' 상태


Flatinum 스킨을 적용하고 처음으로 '메뉴 토글'을 펼치면 볼 수 있는 화면입니다. 제 생각에는 사용자의 [태그], [위치로그], [방명록] 메뉴 사용 빈도가 거의 없을 것이라고 생각했습니다. 그래서 저는 이 부분을 블로그의 카테고리를 보여주는 메뉴로 활용하려고 합니다. 긴 글이나 모바일에서 글을 다 보고 카테고리를 확인하고 싶을 때 불편했는데 그 부분이 해소되겠죠.



'메뉴 토글' HTML 소스 수정


그럼 실제로 수정 및 적용하기 위해서 [티스토리] Flatinum 스킨 '스크롤 네비게이션 바' 크기 설정 글의 '[html 편집] 화면 이동'에서 설명한 경로를 통해 소스 편집 화면으로 이동합니다.(관리자 메뉴 - 꾸미기 탭의 [스킨 편집] - 우측 화면에서 [html 편집])


▲ '메뉴 토글' 부분 소스


소스 편집 화면에서 'nav navbar-nav navbar-right' 혹은 'dropdown' 키워드로 검색하시면 찾을 수 있는 '메뉴 토글' 설정 부분 소스 입니다. 보시는 바와 같이 'a href= '으로 되어 있는 부분에 해당 메뉴의 주소가 오게 되고 그 우측에 설정할 메뉴의 이름을 입력하게 됩니다. 이 부분을 수정하여 사용자의 입맛에 맞게 수정하면 되는 것이죠. 여기서 메뉴 주소는 본인의 블로그 주소 + a href로 입력한 주소입니다. '태그'를 예로 들자면, 제 블로그 주소인 'harvith.tistory.com'에 '/tag'가 붙은 'harvith.tistory.com/tag' 가 실제로 연결된 주소가 됩니다.

▲ '카테고리' 주소 확인


실제로 저의 메뉴 중 Tistory 메뉴를 눌러서 주소창을 보자면 'harvith.tistory.com'에 '/category/Internet/Tistory' 가 붙은 형태가 되고 '/category/Internet/Tistory'는 html 소스에 들어갈 주소가 됩니다.


▲ 변경 후 html 소스


그렇게 변경한 후의 소스의 모습입니다. 처음에는 하나의 '메뉴 토글'만으로 전체 카테고리를 모두 보여주려고 했으나 각 카테고리 메뉴의 내부 메뉴의 약간 들어가 있는 효과를 어떻게 줘야하는 지 잘 몰라서 개별 '메뉴 토글'로 구현하였습니다. 우선은 현재 글이 있는 카테고리만 보여지도록 설정했습니다. 만일 새로운 카테고리에 글을 작성하거나 카테고리를 변경하게 되면 번거롭지만 이 부분을 추가적으로 수정해줘야하는 것이지요. 가급적 카테고리 수정을 하지 않도록 해야겠습니다.


▲ 변경 후 '메뉴 토글' 상태


이번에는 위에서 수정한 html 소스의 실제 적용 모습입니다. 소스상에서 맨위에 있던 '메뉴 토글'이 PC 화면에서는 맨 우측에 위치하고 모바일 화면에서는 맨 위에 위치하는 것을 확인할 수 있습니다. 이를 참고하시어 '메뉴 토글'을 수정하시면 되겠습니다.





관련 포스팅


Flatinum 스킨 수정 시리즈


[애드센스] 티스토리 블로그 사이드 메뉴에 애드센스 광고 넣기

[티스토리] Flatinum 스킨 '스크롤 네비게이션 바' 크기 설정

- [티스토리] Flatinum 스킨 '메뉴 토클' 설정 (이번 포스팅)

[티스토리] Flatinum 스킨 상단 '메뉴' 설정

[티스토리] Flatinum 스킨 하단 '페이징' 설정


유익한 시간되셨다면 하단에 공감 버튼을 눌러주세요.

여러분의 공감은 저에게 큰 힘이 됩니다.