1. 사이드바가 너무 작다.
그동안 잘 쓰던 butterfly red 스킨.
오늘 카테고리 사이드바를 추가하고 나니까 오른쪽 사이드바가 너무 좁았다.
늘려야지요 뭐. ㅎㅎ
2. HTML/CSS 편집 메뉴 열기
스킨위자드에서는 크기를 변경할 수 없고 관리자 모드의 스킨 메뉴 아래에 있는HTML/CSS 편집 메뉴에서 해야한다. HTML/CSS 메뉴에 들어가면 위쪽에 skin.html
아래쪽에 style.css가 나오는데 style.css를 편집해야한다.
3. style.css 에서 레이아웃 섹션 찾기
스크롤바를 좀 내려보면 다음 내용이 나온다.
비교적 처음에 있으니까 살살 스크롤 하다가
/* 레이아웃 */이 보이면 Stop.
/* 레이아웃 */
#wrap {position:relative;width:/*@post-width:530=*/ 1000px /*@*/;overflow:hidden;margin:0;
background:url('./images/bg_body.gif') repeat-y 208px 0;}
#container {float: left; margin-left: 57px; background: url(./images/sbg.gif) right repeat-y;}
#sidebar1 {float:left;width:185px;overflow:hidden; padding: 60px 0 0 15px;}
#header {float:left;width:32px;overflow:hidden;margin:205px 0 0 0;}
#content {float:left;width:/*@post-width=*/ 470px /*@*/;overflow:hidden;margin:0;padding:0 15px;background-color:#f7f7f7;}
#sidebar2 {float:left;width:185px;overflow:hidden;margin:0 0 0 10px;padding:60px 15px 10px 0;background-color:#f7f7f7;}
#footer {clear:both;width:/*@post-width:-30=*/ 440px /*@*/;overflow:hidden;padding:15px 0;font-size:11px;;background-color:#f7f7f7;text-align: center;}
4. 변경할 부분 확인하기
오른쪽 사이드바의 크기를 변경하기 위해서 봐야 할 곳은 두군데인데
#wrap 부분과
#sidebar2 부분이다.
이 스킨에서
#wrap 부분은 브라우져에 뜨는 블로그 전체 페이지의 크기를 결정한다.
그리고
#sidebar2 부분은 오른쪽 사이드바의 크기를 결정하고.
5. 오른쪽 사이드바의 크기 늘리기
#sidebar2 부분에서
185px 부분의 숫자를 적당히 늘려준다.
#sidebar2 {float:left;width:185px;overflow:hidden;margin:0 0 0 10px;padding:60px 15px 10px 0;background-color:#f7f7f7;}
width:200px 이런식으로.
6. 스킨 전체의 크기 늘리기
그 후 블로그 전체 크기를 위에서 늘린만큼 늘려줘야 한다.
#wrap 부분에서 1000px라고 되어있는 것을 찾고 숫자만 변경한다.
나는 185px에서 200으로 늘려줬으므로 전체 크기를 15px만큼 늘려줘야 한다.
#wrap {position:relative;width:/*@post-width:530=*/ 1000px /*@*/;overflow:hidden;margin:0;
background:url('./images/bg_body.gif') repeat-y 208px 0;}
1000px + 10px = 1015px -> 1015px로 수정
7. 문제해결
여기까지 하고 미리보기를 해보니까 사이드바가 커지긴 했으나
아래 그림과 같은 문제가 있다.
사이즈가 커진만큼 왼쪽에 여백이 더 생긴다.
해결방법은 #sidebar2 부분의 padding 부분을 수정한다.
#sidebar2 {float:left;width:200px;overflow:hidden;margin:0 0 0 10px;padding:60px 15px 10px 0;background-color:#f7f7f7;}
padding:60px 15px 10px 0
에서 세번째 부분을 0으로 만들어준다.
이렇게: padding:60px 15px 0 0
여기까지 하면 저 흰부분이 사라지게 된다.
IE6, Firefox 2 에서 테스트 해본결과 두 브라우져에서 모두 잘 표시된다.
8. 요약.
1. #sidebar2 에서 width 변경
2. #wrap 에서 큰 숫자에 사이드바 늘린 수치 만큼 더하기
3. #sidebar2 에서 padding 항목 세번째를 0으로 만들기
오빠는 고칠 수 있을거 같아서 얘기하는건데요
받은 트랙백이 없고 댓글이 없습니다.
이거 no trackback, no comment
이런걸로 바꾸면 더 좋을듯 ㅋㅋㅋㅋㅋ
왠지 받은 트랙백이 없고 댓글이 없다니까 불쌍해요 갑자기 ㅋㅋㅋ
한글의 오묘함 ㅋㅋㅋ
오호...
그런걸 캐치해내다니...
니 말대로 바꿔봤다 흐흐흐.
좀 시크해보이는듯?
간지간지ㅋ