티스토리 블로그꾸미기] 상단 카운트 글씨 및 이미지 색깔 바꾸기

안녕하세요 릴리입니다~~

티스토리 블로그를 시작한 지 얼마 안되서 이것저것 꾸미는 중에 있는데요~~

많은 분들이 블로그 스킨 교체에 어려움이 많으신걸로 알고 있습니다. 

제가 미약하나마 스킨을 교체할 수 있는 노하우를 알려드릴까 합니다.

그래서 준비한 그 첫번째 시간.!!!

오늘은 상단 카운터 써치바 이미지의 색을 바꿔 볼까 합니다. 

우선 제 스킨을 기준으로 알려드리겠습니다~~.

변경전 칙칙한 회색톤의 상단 서치 카운트 바였습니다. 

⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎

상단 바를 제 블로그 컨셉에 맞게 핑키 핑키한 색으로 바꾸었습니다.

이렇게 바꾸려면.. 일단 결론부터 말하자면... 방법이 간단하지 않습니다..

약간의 컴퓨터 지식과 디자인 지식이 있어야 가능한데요~

그래도 제 포스팅을 찬찬히 따라 하다 보면 비슷하게 나마 만드실 수 있으리라 생각합니다.

준비물이 있습니다.

1. 포토샵 ( 없다면... 웹에서 이미지를 수정할 수 있는 사이트 활용 )

2. 구글 크롬 설치

이렇게 크게 두가지를 준비하면 절반은 성공입니다.

자 이제 시작합니다.

관리로 들어갑니다. -> 좌측 탭에서 꾸미기 메뉴 안에 HTML / CSS 편집이라고 쓰여 있는 부분을 클립합니다.

그러면 다음과 같은 화면이 나옵니다

거기서 우 상단의 파일업로드 탭을 클릭합니다.

파일 업로드에는 이 페이지를 구성하는 이미지들이 들어 있습니다.

이 파일들을 가지고 CSS.STYLE에서 명령체계를 통해 페이지안에서 이미지들이 어떻게 보이고, 어떻게 배치되는지를

구성하게 됩니다.

이해가 어렵다면, 파일 업로드에 있는 이미지 파일들은 재료들이라고 생각하시면 됩니다.

그렇다면 다음은 바꾸고자 하는 이미지 파일을 찾아봅니다.

여러 파일들 중에 카운트바처럼 저렇게 길게 생긴 이미지는 없는데요???  하실 수 있습니다.

프로그래밍에서 긴 이미지는 용량을 많이 차지하기 때문에

잘라서 작은 이미지를 연결해서 길게 사용합니다. 

이것은 박스 이미지를 만들때도 똑같이 사용됩니다.

그렇다면 이런 이미지를 찾아 봅니다.

모르긴 몰라도 다음 파일명을 가진 것이 비스무리하게 쓰일것 같은 느낌이 강하게 옵니다!!

images/searchbar_left.png

imgaes/searchbar_mid.png

images/searchbar_right.png

그렇습니다. 이 세개 파일이 저 써치바 긴 이미지를 구성하는 이미지들입니다.

찾은 다음에는 우리가 이미지의 정확한 규격을 모르기 때문에 전에 사용하던 이미지규격을 참고하기 위해

또는 본 뜨기 위해 이미지를 다운받습니다. 

( 다운방법 : 파일 명 위에 마우스 두번째 버튼 클릭하면 새탭에서 링크 열기 -> 새탭에서 이미지 위에서 마우스 두번째 버튼 클릭, 이미지를 다른이름으로 저장 )

다운 받은 파일을 포토샵에서 원하는 색깔로 바꿔줍니다~~

( 포토샵 사용법은 따로 알려드리지는 않겠습니다~~)

바색깔을 바꾸니 글씨색이랑 안맞네요~~

글씨 이미지들도 똑같이 다운받아서 색을 바꿔줍니다.

images/txt_today.png

images/txt_yesterday.png

images/txt_total.png

images/txt_search.png

위의 파일들을 다운받아서 입맛에 맞게 수정해 줍니다.

수정한 파일들을 파일 업로드에 다시 업로드 해줍니다.

여기서 주의해야 할점...!!!!

파일명을 전에 파일과 동일하게 하면,, 블로그에서 인식이 안되더라구요

그래서 간단하게, 파일 뒤에 숫자0 또는 1 추가하여 파일명들을 다른이름으로 저장해 줍니다.

예를들어

txt_search.png  --> txt_search0.png

이렇게 말입니다.

이렇게 해서 파일 업로드에 추가 버튼 눌러서 새로 고친 이미지들을 올려 줍니다.

그럼 이제 거의 끝났습니다.

CSS 탭을 클릭합니다.

CSS 탭으로 들어오면 알수없는 영어들이 나열 되어 있습니다.

당황하지 않고

에디터 창에 커서를 클릭하고 컨트롤 + F 를 눌러서

아까 저장한 파일들 이름을 검색합니다.

images/txt로 검색을 하니

위의 그림과 같이 몇가지가 검색되네요~

그렇다면, 파일 이름을 아까 이미지 편집 프로그램에서 저장한 이름과 동일한 이름으로 저장해 줍니다.

수정한 파일들 차례차례, 빠짐 없이 찾아서 저장해 주면 됩니다.

그런 다음에  저장을 눌러 줍니다.

그런 다음 블로그로 돌아가 확인해 보면...

헉!!

검색창 색깔이 안바뀌어 있는것을 알 수 있습니다.

이럴 때를 대비해서 제가 구글 크롬을 설치하라고 미리 앞서 안내해 드렸습니다.

이유는 구글 크롬 브라우져에서 웹 디자인 수정을 손쉽게 지원하고 있기 때문입니다.

검색창에 대고 마우스 우클릭을 하면

다음과 같은 창이 뜹니다.

그곳에서 검사 탭 으로 들어가면

아래와 같은 창이 뜹니다.

먼가 겁이 납니다. 잘못 건드리면 큰일 날거 같습니다..

하지만 여기는 테스트 용이기 때문에 걱정안하셔도 됩니다.

현재 클릭한 구성요소가 어느 파일에위치하였는지, 어떻게 설정되어 있는지를 볼 수 있는 창입니다.

우측하단에 보면

style.css ~~~ 블라블라 이렇게 보이는게 있습니다.

여기를 클릭합니다.

그럼 CSS에서 이 부분을 정의한 부분이 좌측에 나타납니다.

이부분을 보면

 /* 검색 */ 이라는 부분에

이 박스의 색 값을 저장해 놓은 부분이 명시 되어 있다고 합니다.

해석해 보면

border 가 상자의 테두리 색

background-color 가 상자의 색깔 입니다.

일단 위치를 알았으니, 다시 우측 상단의 CSS로 갑니다.

컨트롤 + F     검색 기능을 이용하여

/ * 검색 * / 위치를 찾고

아래 값을 원하는 색깔로 바꿔 줍니다. 

웹 컬러 값을 알고 싶으신 분들은 아래 링크로 들어가셔서 원하시는 컬러값을

알아보시면 될거 같습니다.

컬러코드 알아보기 : http://html-color-codes.info/Korean/

이렇게 고치고 저장하면 끝!!!

복잡하게 설명했지만!!!

찰떡같이 잘 이해하셨으리라 생각합니다.

혹시나 제 블로그랑 동일한 스킨이 필요하신 분이 계실까 해서

수정한 이미지 파일도 같이 올립니다.

필요하신 분은 다운 받아서 사용하세요~

( 출처는 밝혀 주시고 상업적 용도로 사용은 말아주세요~ )

타이틀바_이미지.zip

블로그 꾸미기에 대해 유용한 정보 종종 올릴 예정이니~~

꾸준히 들러 주시면 감사하겠습니다.

^^