티스토리 IS BASE 3단 스킨으로 수정하기

티스토리 IS BASE 3단 스킨으로 수정하기

티스토리 블로그를 새롭게 시작하면서 스킨 선택, 본문 텍스트 크기, 메뉴 활용성을 신경 쓰다 보니 스킨을 직접 수정할 수 있는 능력까지 생겨 버렸다. 크하하하~

첨에는 깔끔해 보이는 Life In Mono스킨을 선택하였으나 너무 단출한 느낌도 나고 애드센스와 여기저기 공사를 하다 보니 블로그 전체적으로 깔끔한 모양도 안 나고 해서 다시 스킨을 찾던 중 그나마 IS BASE스킨이 깔끔해 보여서 선택을 하게 되었다.
하지만 티스토리 운영이 첨이다 보니 여러 곳에서 애드센스 위치 지적도 해주시고 본문 텍스트 크기도 지적해 주셔서 조금씩 고쳐 나가던 중...
본문 텍스트 크기가 커지면서 본문 사이즈가 작다는 느낌이 들어 800px로 소폭 확장하였고 더불어 사이드바에 갖춰야 할 것들이 많아지다 보니 너무 길어져서 사이드바 활용도가 낮아지는 일이 발생하여 스킨 공사에 들어갔다...

일단 본문 사이즈는 스킨위자드로 간단히 해결하였고 사이드바가 문제였는데 티스토리 초보에겐 절대 쉽지 않은 작업이었다.;;; 하지만 수많은 실패를 하면서 알아낸 방법은 너무도 간단해서 어이가 없었다는 점~~~~~~

티스토리 IS BASE 3단 스킨으로 수정하기

블로그 관리 페이지에서 HTML/CSS 편집 메뉴를 클릭하여 skin.html 란에서 기본적으로 사이드바에 들어가는 내용은 다 빼버리고 사이드바 틀만 복사해서 위와 같이 본 사이드바 소스 하단에 끼워 주면 된다.

</div>
<--- 사이드바를 추가하기 전 소스에 추가할 사이드바 소스를 넣어주면 된다.

</div>

[파일 다운로드]

sidebar2.txt

티스토리 IS BASE 3단 스킨으로 수정하기

그러나 스킨 전체사이즈가 제한돼있어서 사이드바가 위아래로 2개가 나오게 된 것이다. 이렇게 만들려고 공사를 시작한 게 아니다. 그럼 여기서 하나 더 수정해 보자.!

티스토리 IS BASE 3단 스킨으로 수정하기

다시 블로그 관리 페이지에서 HTML/CSS 편집 메뉴를 클릭하여 style.css 란에서 상단 부분에 #container를 볼 수 있다. width는 신경 쓰지 말고 그 옆 숫자를 변경해 주면 된다. 사이드바 가로 사이즈는 190px 그러니까 기존에 있던 숫자에서 190을 더해서 수정해 주면 사이드바 2개가 옆으로 나란히 보이게 된다.

------------>

티스토리 IS BASE 3단 스킨으로 수정하기

여기서 주의할 점은 스킨위자드로 스킨수정시 위 숫자가 원상태로 복구된다는 점~~~ 어느 순간 사이드바 2개가 사이좋게 보이지 않는다면 style.css에서 숫자를 다시 수정해 주면 되니까 걱정할 필요는 없다.

티스토리 IS BASE 3단 스킨으로 수정하기

아.... 깜빡할 뻔했다...

사이드바 가로 간격 사이즈도 줄이고 싶다면 style.css에서 #sidebar를 찾아서 margin-left를 0px로 수정해 주면 된다.

이쯤 하면 다 됐을 것으로 생각했는데 오른쪽 위 티스토리 메뉴바 옆에 뭔가 튀어나온 녀석이 있을 것이다.;; 첨엔 뭔가 했었는데 IS BASE스킨에 포함된 관리자/글쓰기 버튼이었다. 티스토리 메뉴바를 없애기엔 불편할 것 같고 해서 수정할 방법을 style.css에서 찾아보던 중 Tool 소스를 찾게 되었고 가려진 버튼이 잘 보이도록 위치를 잡느라 여러 번 수정한 끝에 적당한 위치에 자리를 잡았다.^^