FastBoot 블로그스킨 상단메뉴바 커스텀하기

FastBoot 스킨 매력적이네요. 블로그스킨을 하나씩 바꿔갈 때마다 가끔 난관(?)에 부딪히기도 하지만, 계속 살펴보고 연구하면서 하나씩 해결하는 맛이 참 기분 좋네요. FastBoot 스킨을 커스텀하려고 했더니 먼저 어떤 구조로 되어있는지 몰라서 구조를 파악해야 했습니다. 구조 파악하는데 제일 오래걸린 것 같아요. 아직 여전히 파악하는 중이지만요~. 이러한 작업에 평소에 잘 안쓰던 브라우저의 '개발자 도구'가 매우 유용하게 사용되었습니다. 이렇게 파워풀한 기능이 있는 것인지 몰랐네요. 개발자 도구의 사용법에 대해서는 추후에 포스팅하겠습니다. 

일단 이번 블로그 꾸미기 포스팅에서는 상단메뉴바를 살짝 건드려 보려고 합니다. 

상단메뉴바가 무엇인고 하니 보시고 있는 화면에서 스크롤을 위로 쭈~욱 올려보시면, 위에 회색톤 배경의 메뉴 영역을 말합니다. CSS 코드상에서는 #secondNav으로 불리는 영역이구요. second Navigation의 줄임말 같네요. 그래서 CSS에서 #secondNav 에 있는 영역을 하나씩 건드려보면, 어떻게 바뀌는지 금방 파악이 가능합니다. 아무튼 FastBoot 스킨을 설치하셨다면 금방 눈치채셨겠지만, 저 영역은 카테고리 중 최상단 카테고리가 나열되는 영역입니다.

# FastBoot v1.6.2 최신 반응형스킨 설치하는 방법

상단 메뉴바 커스텀 하기 1

상단 메뉴바에 마우스 포인터를 가져가면 위와 같이 서브메뉴가 자동으로 나옵니다. 그리고 하위 카테고리에 있는 게시글의 개수가 옆에 조그마한 글씨로 표시됩니다. 딱봐도 한 눈에 구분이 잘 안됩니다. 그래서 게시글의 숫자를 "(2)" 이와 같이 괄호로 감싸주도록 하겠습니다. 

CSS수정하기

먼저 CSS를 수정해주어야 하므로, 티스토리 관리자 메뉴에 들어가서 꾸미기 ▶ HTML/CSS 를 클릭합니다. 

그리고 우측 상단에서 CSS 탭을 선택한 후에 <Ctrl + F>키를 눌러서 검색창을 열어줍니다. 그리고 #secondNav라고 입력하고 엔터(Enter)키를 치면 우측 스크롤 바에 해당검색어가 있는 위치가 노란색 줄로 표시가 됩니다. 제일 하단 영역으로 스크롤 바를 내리면 #secondNav로 시작하는 선언들을 많이 보실 수 있습니다. 이 부분들이 전부 상단 메뉴바와 관련된 부분이라고 보시면 됩니다. 

이 중에서 #secondNav .c_cnt 라고 시작되는 영역이 바로 서브메뉴 옆에 붙어있던 숫자에 관련된 구문입니다. 물론 #secondNav .c_cnt 를 바로 검색하셔도 됩니다.  위의 위치를 찾으신 후 이곳에 위와 같이 2줄을 추가해 주고 저장하시면 됩니다. (따옴표 안에 있는 괄호 대신에 취향대로 다른 문자를 넣으셔도 됩니다.)

#secondNav .c_cnt:before {content: "(";} /* 상단 네비게이션바 서브메뉴 괄호 */
#secondNav .c_cnt:after {content: ")";} /* 상단 네비게이션바 서브메뉴 괄호 */

그리고 나서 살펴보면 위와 같이 괄호가 숫자를 감싸고 있는 모습을 볼 수 있습니다. 좀 더 깔끔한 것 같죠(?)

 

상단 메뉴바 커스텀 하기 2

그리고 이외에도 간단하게 꾸밀 수 있는 것들에 대해서 몇 가지 알아보도록 하겠습니다. 위에서 추가한 위치 바로 위에 보면 font-size라는 속성을 볼 수 있습니다. 여기서 말하는 font-size는 바로 괄호 안에 있는 숫자의 폰트크기입니다. 저 숫자가 너무 작거나 크다 싶으시면 원하시는 크기로 변경하시면 됩니다. 

위와 같이 색상을 변경하는 것도 가능합니다. 아까 font-size 옆에 color 속성을 추가해주면 됩니다. color는 #FF0000 와 같은 Hex코드를 이용하셔도 되고, 간단한 단색을 사용하고자 하실 때에는 red와 같이 색상명을 적어주셔도 됩니다. 좀 더 세밀한 색상을 위해서는 #FF0000와 같이 표시해주시는게 더 좋겠죠(?)

#secondNav .c_cnt{font-size:8px; color:red;} /* 서브메뉴 숫자 폰트크기변경 + 색상추가 */

# 코드를 깔끔하게! SystaxHighLighter 설치하는 방법

# FastBoot에 새 웹폰트 적용하는 방법