티스토리(Tistory) 오른쪽 메뉴바 디자인 크기 늘이기

티스토리(Tistory) 오른쪽 메뉴바 디자인 크기 늘이기

 

개발환경 : window 7 64bit

 

오른쪽 메뉴바의 크기를 늘이게 된 계기는 google adsense 에서

광고크기를 늘이면 좋다고 조언을 하였다. 그렇게 늘릴려면

메뉴바 크기가 늘어야 하는데 티스토리 스킨을 바꿀수도 없고

내가 원하는 디자인도 없어서 직접 고치기로 했다.

어차피 사이트에 모든 디자인은 CSS 로 제어가 된다. 그러므로

메뉴바에 쓰인 CSS 만 알아내서 크기만 맞춰주면 된다.

 

아래 CSS 는 메뉴바를 늘이기 위해 쓰인 셋팅 값들이다.

값을 바꾸기 위해서 관리자 > HTML/CSS 편집으로 간다.

수정한후 저장을 하면 디자인이 바뀌게 된다.

 

 

/* wrapContainer */

#wrapTop, #wrapMid, #wrapBtm { clear: both; width:/*@post-width:314=*/944px/*@*/; margin: 0 auto; }

35px 를 더해서 979px 로 수정하면 다음과 같이 된다.

 

 

.tCenter, .bCenter { float: left; width:/*@post-width:290=*/920px/*@*/; }

955px 로 수정한다. 35px 를 더한다.

 

 

#header .blogTitle                    {

           width:/*@post-width:290=*/920px/*@*/; height: /*@title-height=*/109px/*@*/;

35px 를 더해서 955px 로 수정한다.

 

 

#container 에 해당하는 CSS 를 35px 늘이면 전체가 늘어난다.

 

그럼 아래와 같이 빈공간이 늘어나 붙었다.

전체 크기 디자인은 맞췄다. 이제는 오른쪽 메뉴바 크기만 늘이면 된다.

 

 

#sidebar { float: right; width: 173px; padding: 14px; background-color: #f8f8f8; }

전체 크기를 늘였으니 오른쪽 메뉴바 전체를 늘여야 한다.

오른쪽 메뉴바의 크기에 해당하는 CSS 는 #sidebar 이다.

 

 

오른쪽 메뉴바 늘이는 것을 완성하였습니다.

이제 구글에서 제안한 광고 넓이 120 에서 160 인 광고를

넣을수 있게 되었습니다.