티스토리 fastboot 스킨 상단 메뉴바의 하위 메뉴 색상 변경하기

티스토리 쉽게 따라하기 - fastboot 스킨 상단 메뉴바의 하위 메뉴 색상 변경하기

지난 시간에 상단 메뉴바의 색상을 변경해 보았다. 원래는 진한 회색이였던 상단 메뉴바의 색상을 개인 취향에 따라 변경하여 좀 더 화려한 블로그가 되었으리라 생각된다. 그러나 상단 메뉴바의 색상을 변경하면 한가지 거슬리는 점이 있다. 상단 메뉴바의 카테고리위에 마우스를 올릴 경우 하위 메뉴가 나오는데 하위 메뉴 색상이 여전히 회색이라는 점이다. 물론 회색으로 나둬도 괜찮지만 개인적으로는 상단 메뉴바 색상과 통일하는것이 더 나은 듯하여 상단메뉴바의 하위 메뉴 색상도 바꿔 주었다. 그래서 오늘은 상단 메뉴바의 하위 메뉴 색상을 바꾸는 방법을 알아보겠다.

 

 

 

fastboot 상단 메뉴바의 하위 메뉴 색상 변경하기

 

상단 메뉴바에서 카테고리위에 마우스를 올리면 하위 메뉴가 나오는데 상단 메뉴바만 색상을 변경해 주면 아래 그림처럼 하위 메뉴는 원래 색상이였던 회색으로 나타난다.  

 

 

 

 

먼저 상단메뉴바의 하위 메뉴 색상을 변경하기 위해서 블로그관리홈> 꾸미기> HTML/CSS 편집 으로 들어간다.

 

 

 

 

CSS 탭을 선택한후 Ctrl+F 를 눌러 검색창을 활성화 한 후 ' #secondnav '를 검색한다. 그럼 아래 그림과 같이 소스가 검색이 된다.

소스창의 거의 맨 아래 부분이다.

 

 

 

 

이곳에서 아래 소스를 찾아 빨간 네모부분의 색상코드를 원하는 색상코드로 바꿔준다.

 

 

 

 

색상코드는 네이버에서 색상코드표를 검색하면 쉽게 색상코드표를 얻을 수 있다.

 

 

상단메뉴 색상 바꾸는 방법과 색상코드표 얻는 방법에 대해 아직 모르시는 분은 아래 링크를 통해 확인해 보기 바란다.

 

[IT & WEB/티스토리 쉽게 따라하기] - fastboot 스킨 상단 메뉴바 색상 변경하기

 

 

 

원하는 코드로 변경했으면 우측 상단의 저장 버튼을 클릭한다. 저장을 안하고 나오면 변경이 안되므로 꼭 저장을 하길 바란다.

저장을 하고 블로그로 가서 상단 메뉴바의 카테고리 위로 마우스를 올리면 하위 메뉴 색상이 변경된 것을 확인 할 수 있다.

 

 

 

 

본인은 상단 메뉴바 색상과 하위 메뉴 색상을 통일했는데 좀 더 화려하게 하기 위해 다른 색을 넣어보는 것도 좋을듯 하다. 자신의 취향에 맞춰 변경해 보도록 하자.

<관련글>

[IT & WEB/티스토리 쉽게 따라하기] - 티스토리 fastboot 스킨 하단 설명 메뉴 색상 변경하기

 

 

정보가 도움이 되셨다면 '공감' 한번 꾹 눌러주세요