HTML/CSS 편집에서 블로그 우측 사이드바 배경색 바꾸기, 수정

지난번에는 블로그 좌측 사이드바 배경색 바꾸기에 대해서 설명해 드렸고 이번에는 우측 사이드바 배경색 바꾸기,변경, 수정, 삭제에 대해서 설명해 드리겠습니다.

3단형 NaVyMoD 스킨을 사용하는 블로그 좌측 사이드바의 배경색 바꾸기는 HTML/CSS 편집에서 블로그 사이드바 배경색 바꾸기(링크)를 참조하시기 바랍니다.

좌측의 스샷 이미지는 티스토리 블로그 3단형 NaVyMoD 스킨으로 우측 사이드바 배경색을 삭제한 이미지입니다.

카테고리 목록 배경색과 아래 우측 사이드바 배경색이 다릅니다.

이번에 우측 사이드바 배경색을 바꾸거나 수정 또는 변경하고자 하는 사이드바 배경색은 카테고리 목록의 배경색이 아닌 최신글(RECENT POST), 댓글 등의 사이드바 배경색 수정입니다.

스샷 이미지를 확인해보시면 연파랑에서 흰색으로 변경되어 있을 것입니다.

배경색을 변경하기 위해서는 관리자(admin) - 스킨 - HTML/CSS 편집으로 이동을 하셔서 style.css 창으로 이동합니다.

#container2 {

width: /*@post-width:400*/ 1006px /*@*/;

background: url(images/bg_sidebar_right.gif) repeat-y right top;

}

스크롤을 내려보면 지난번 설명한 /*블로그 레이아웃*/ #container 소스코드 아래 #container2가 있을 것입니다.

소스코드 background의 url(images/bg_sidebar_right.gif) repeat-y right top; 소스를 삭제를 해주시면 우측 사이드바의 배경색(배경 이미지 파일)이 삭제되어 블로그 메인 배경색(또는 좌측 사이드바 배경색)이 나타나게 됩니다.

여기서 중요한 부분을 이해하고 있어야 하는데 블로그 배경색이 가장 밑에, 중간이 좌측 사이드바 배경색이고 맨위가 우측 사이드바배경색이 보입니다.

그래픽 프로그램을 사용할 줄 아는 분들은 '레이어'란 명칭을 알고 계셔서 무슨 말인지 아시겠지만 모르는 분을 위해 간단하게 설명하자면 블로그 메인 배경색이 흰색, 좌측 사이드바가 빨간색, 우측 사이드바가 파란색이라고 가정하고 3가지의 색상이 겹쳐 있을 때 블로그 메인 배경색은 가장 밑에 있고 좌측 사이드바 배경색이 중간에 위치해 있고 좌측 사이드바가 가장 위에 있습니다.

따라서 블로그 메인 배경색은 우측과 좌측 사이드바의 배경색 때문에 안보여지고 좌측 사이드바의 배경색은 우측 사이드바 배경색 밑에 위치에 있어 좌측 사이드바의 배경색이 보여지질 않습니다.

좌측의 사이드바 배경색을 보이게 하기 위해서는 우측 사이드바의 배경색 색상코드나 url 코드를 삭제해 주셔야 하고 블로그 메인 배경색을 보이게 하기 위해서는 좌, 우측 사이드바의 색상코드나 url 코드를 모두 삭제해 주셔야 합니다.

위의 제가 참고한 스샷이미지는 블로그 메인 배경색을 흰색으로 바꾸었고 좌측, 우측 사이드바 배경색 코드와 url 코드를 삭제하여 블로그 메인 배경색이 보이는 것이라 이해를 하시면 됩니다.

만약 우측 사이드바의 배경색을 바꾸기 위해서는 몇가지 방법이 있지만 한가지 방법만 말씀드리면 포토샾을 이용하여 HTML/CSS 편집에서 배경색을 이미지파일로 만들어 업로드 해서 사용하는 방법입니다.

위 스샷이미지는 HTML/CSS 편집에서 파일 업로드 창이고 밑줄친 부분은 우측 사이드바에 사용된 배경 이미지입니다.

우선 배경 이미지를 제작해야 하는데 포토샾 프로그램이 없다면 웹포토샾(링크)를 해둘테니 필요하시면 사용해 보시기 바라며 높이는 1px픽셀로 하시고 중요한 것은 가로 픽셀인데 가로 픽셀은 200px정도로 해 주셔야 합니다.

가로(width) X 세로(height)의 픽셀(pixels)값은 200(pixel) x 1(pixel)로 자신이 원하는 색상으로 배경색으로 만들어 gif로 저장하시길 바랍니다.

그리고 우측 사이드바 배경색 이미지를 업로드 할 때 주의할 것은 저장할 파일명인데 3단형 NaVyMoD 스킨의 우측 사이드바에 사용되는 배경이미지 파일명은 bg_sidebar_right.gif인데 파일명을 다르게 할 경우 적용이 안되는 오류가 간혹 있어 파일명을 그대로 사용하되 원본파일을 삭제하지 않고 그대로 사용하시려면 right뒤에 01, 02 처럼 숫자를 사용하시길 바랍니다.

물론 파일을 업로드할 images 폴더에 bg_sidebar_right.gif 원본을 삭제하고 원하는 색상의 배경이미지 파일을 원본 파일명으로 사용하여 업로드하셔도 됩니다.

(참고 처음 소스코드를 삭제하란 설명은 배경(이미지파일)색을 삭제하는 법을 알려 드린 것이고 이미지 파일로 배경색을 지정하려면 style.css창에 url 소스코들 그대로 사용하셔야 하고 파일명이 변경 되었을 경우 url 소스코드의 파일명만 바꾸시면 됩니다.)

이번 사이드바 배경색 변경, 수정, 삭제에 대해서 설명한 것 중 가장 유의해야 할 것이 '레이어'에 대한 이해(블로그 메인 배경색은 가장 밑에 있고 좌측 사이드바의 배경색은 중간에 있고 우측 사이드바 배경색이 맨 위에 위치해 있다)와 HTML/CSS 편집에서 배경이미지를 파일업로드하여 사용하는 방법 두가지입니다.

writen by 7istory.tistory.com