[블로그] FastBoot 스킨의 색상(컬러)를 변경해보자

FastBoot 스킨의 색상(컬러)를 변경해보자

다른 사람들의 블로그를 구경하다 보면 같은 스킨을 사용함에도 불구하고 전체적인 색상이 다른 곳을 종종 볼 수 있다.

일단 색상이 바뀌면 분위기도 달라져 같은 스킨이라도 다른 느낌을 가질 수 있기 때문에 자신의 블로그에 맞게 색상을 변경해두면 좋을 것이다.

(물론 100% 그렇지는 않다 나처럼 디자인 같은 거랑 거리가 있다면... ㅠㅠ)

변경을 시작하기 전에...

색상을 변경하는 방법은 CSS편집에서 주로 작업하게 되나 어느 부분을 변경하는지에 따라 다를 수 있고, 코드 수정이 생소한 사람들은 생각보다 복잡할 수도 있기 때문에 코드를 메모장이나 다른 곳에 백업 후 작업하는 것을 추천한다.

색상의 경우 html 색상 코드로 넣게 되는데 인터넷에서 찾아도 되지만 간단하게 티스토리 글쓰기에서 글자색으로 확인이 가능하다.

#으로 시작하는 게 컬러 코드

본문 제목 색상 변경

본문 제목 색상 부분!

본문 제목은 관리자 메뉴의 HTML/CSS편집의 CSS탭에서 변경이 가능하다.

배경 색상은 'h3.title' 검색하여 h3.title 부분의 background: 뒤에 html 컬러코드를 원하는 색상으로 변경해주면 간단하게 변경되며, 글자 색상의 경우에는 h3.tatle a { 부분에 있는 color: 의 컬러코드를 변경해주면 된다.

h3.title 바로 아래에 있는 color은 제목 앞에 아이콘 색상이다. (三 대략 이런 모양)

상단 메뉴 색상 변경

상단 메뉴 색상 부분!

상단 메뉴는 관리자 메뉴의 HTML/CSS편집의 CSS탭에서 변경이 가능하다.

우선 #secondNav 검색하면 CSS 코드 하단 쪽에서 검색이 되는 것을 볼 수 있는데 상단 메뉴의 경우 꽤 자잘하게 나뉘어 있어 이 부분은 스샷의 주석을 참고하는 편이 알아보기 쉬울 것이다.

세밀하게 설정이 가능하다.

좌측 펼침 메뉴 색상 변경

좌측 펼침 메뉴 색상 부분!

펼침 메뉴는 관리자 메뉴의 HTML/CSS편집의 CSS탭에서 변경이 가능하다.

#lnav를 검색하여 중 하단에 나오는 부분을 찾아서 편집하면 되는데 스샷을 보는 편이 이해가 빠를 것이다.

(스샷으로 날로 먹는 느낌이...)

상단 메뉴보다는 덜 하지만 이 부분도 만질만한 부분은 좀 있다.

하단 부분 색상 변경

하단 색상 부분!

하단 부분 역시 관리자 메뉴의 HTML/CSS편집의 CSS탭에서 변경이 가능하다.

#footer를 검색하여 중간에 나오는 부분을 찾아서 편집하면 된다.

하단 부분 색상은 변경할게 많지 않아서 다행~

모바일 상단 메뉴 색상 변경

모바일 상단 메뉴 색상 부분!

데스크톱 상단 메뉴와 모바일의 상단 메뉴는 각각 따로 변경해 줘야 하는데 모바일 상단 화면은 관리자 메뉴의 HTML/CSS편집의 HTML탭에서 변경이 가능하다.

기본 주석이 달려있기 때문에 모바일로 검색하여 스샷에 나오는 부분을 수정하면 된다.

여기도 간단하게 변경 가능

태그 메뉴 색상 변경

태그 메뉴 색상 부분!

태그 메뉴는 관리자 메뉴의 HTML/CSS편집의 CSS탭에서 변경이 가능하다.

#taglog li .cloud1 로 검색하여 해당 코드에 있는 background-color: 부터 나머지 cloud2, 3, 4, 5 까지의 background-color에 컬러코드를 수정해주면 된다.

1~4 까지만 수정하는 걸 추천한다.

사이드바 메뉴 색상 변경

사이드바 메뉴 색상 부분!

이제 마지막으로 사이드바의 색상변경만 남았는데 사이드 바의 경우에는 원본 fastboot의 images 폴더 안에 있는 fastboot.css 파일을 수정하는 부분이 있다.

그렇기 때문에 만약 기존의 파일을 가지고 있지 않다면 관리 메뉴의 스킨 -> 스킨 다운로드를 통해 다시 받을 수 있다.

파일을 메모장으로 열어보면 코드들이 정신없이 줄지어 있는 모습을 볼 수 있는데 panel-default>.panel-heading{ 로 검색하여 두 번째 나오는 부분에 background-color의 컬러코드를 변경하면 사이드바의 이름 부분 배경의 색상 변경이 가능하며 수정이 됐다면 파일을 업로드 하고 저장을 하면 완료 된다.

거의 아래 부분에 있다.

그 외 나머지 설정은 HTML/CSS편집의 CSS탭에서 #sidebar를 검색하여 변경이 가능하며 여기까지 했다면 대충 감이 잡힐 것이라고 생각한다.

마지막~?

찾아보면 더 있겠지만 여기까지 했다면 일단 보이는 곳의 색은 거의 변경했다고 생각한다.

웹 개발 쪽으로 잘 아는 사람이야 생각보다 쉽겠지만, 잘 모른다면 여기까지 따라 하는 것이 어려울 수도 있다. 하지만 이 글을 참고하여 이번 기회에 자신이 마음에 드는 색상으로 블로그를 변경해보는 건 어떨까 한다.

(나도 어찌어찌할 정도니 웬만하면 쉽게 할 거라고 생각한다.)