티스토리/bookclub스킨 헤드 상단바 색깔 변경하는 방법

티스토리/bookclub스킨 헤드 상단바 색깔 변경하는 방법

티스토리의 bookclub 스킨은 깔끔해서 좋은데 너무 단조로운 느낌이 없지 않아 있어요.

뭘 화려하게 바꾸기에는 좀 그렇고 실력도 안 되고 뭔가 간단하게 바꿔볼 게 없을까해서 스킨의 헤드 상단바를 색깔만 바꿔보았습니다. 결과적으로는 더 마음에 들어서 이대로 사용 중입니다.

PC버전과 모바일버전 모두 바꾸는 방법을 알려드리겠습니다.

 

 

<원하는 색깔 찾기>

상단바를 원하는 색으로 바꾸기 위해서는 컬러코드를 알아야하는데요. 포토샵을 사용하시는 분이라면 쉽게 찾을 수 있지만 사용 안 하시는 분들은 아래 사이트를 이용해보세요.

"컬러코드 확인하기"

 

 

 

<PC버전 헤드 상단바 색깔 바꾸기>

1. 우선 블로그관리에서 스킨편집 - CSS로 들어가주세요. 그 다음 118번째 줄로 갑니다.

119번째 줄과 120번째 줄 사이에 다음 내용을 추가해주세요.

background-color: #F8ECFE; (컬러코드는 원하는 색으로 변경)

 

2. 검색버튼의 배경색도 바꿔줄거예요. 157~158번째 줄로 이동해주세요.

이 부분의 컬러코드도 아까 지정했던 컬러코드로 변경해줍니다.

 

색깔 변경이 완료가 됩니다.

하지만! 여기서 아쉬운 분들은 조금 더 따라오세요.

 

3. 헤드 밑에 있는 구분선의 색깔을 변경해줄거예요. 다시 119번째 줄입니다.

노란색 음영 들어간 부분의 색깔을 바꿔주세요. 헤드 색깔보다는 진한 색으로 바꿔야 티가 납니다.

마지막으로 309~310번째 줄로 가주세요.

여기도 컬러코드를 바꿔줍니다. 상단 메뉴 선택시 밑에 작게 나타나는 선의 색깔도 함께 변경이 됩니다.

 

그리하여 완성본입니다!

 

 

<모바일버전 헤드 상단바 색깔 바꾸기>

상단바 색깔을 바꿨을 때 모바일에서는 조금 이상한 형태로 나타나기 때문에 조금 더 수정을 해주어야 합니다.

1. 2403번째 줄 혹은 f10으로 'header h1' 검색

background-color를 처음 배경색으로 지정했던 색깔로 변경해주세요.

 

2. 2462번째 줄 혹은 f10으로 'gnb' 검색

height 바로 밑에 아래 내용을 추가해주세요.

background-color: #F8ECFE; (컬러코드는 각자 변경)

 

3. 그리고 모바일 버전에서는 색깔을 바꾸고 나면 우측 상단의 메뉴 버튼이 투명해지는데요. 하얀색으로 되돌려보겠습니다.

2438번째 줄 혹은 f10으로 'header .util .menu' 검색

outline 바로 밑에 아래 내용을 추가해주세요.

background-color: #fff;

 

모바일 화면에서도 상단바 색깔 변경이 완료되었습니다!