iNove 티스토리 스킨 Ver 2.2 사이드바 메뉴 폭 조정하기
2013.08.31 18:33
iNove 티스토리 스킨 Ver 2.2 사이드바 메뉴 폭 조정하기
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

블로그 스킨을 얼마전에 바꿨습니다.

예전에 사용하던 스킨도 (http://nextgoal.tistory.com/1059) 많은 부분을 직접수정하고 하면서 잘 사용했지만 블로그 분위기를 바꾸고 싶은 마음이 갑자기 들어 스킨 교체를 했습니다.

 

블로그 분위기 바꿀수있는게 제 수준으론 스킨교체가 최선인지라....-.-

 

지금 사용하는 스킨은 iNove 티스토리 스킨 Ver 2.2입니다.

 

 iNove 티스토리 스킨 : http://www.tyzen.net/200

 

수정을 조금해서 사용중인데 아주 만족하고 사용중이랍니다. 수정이라고 해봐야 본문사이즈를 넓혀 사용하다 이번에 사이드바 메뉴 폭 조정을 했습니다.

 

 

제가 수정한 부분을 기억하기위해 또 iNove 티스토리 스킨을 사용하시는 분들께 혹시 도움이 될까 해서 글 작성을 합니다.

 

iNove 티스토리 스킨 사이드바 폭 조정하기

 

먼저 사용하시는 스킨을 수정하기전에 꼭 백업을 먼저 하세요. 설정한번 잘못했다 망하는 수가 생깁니다.

 

관리자 메뉴를 들어가서 스킨 을 선택하시고 "스킨저장"을 눌러 현재 사용중인 스킨을 저장합니다.

이렇게 해두면 만약 수정중 오류로인한 문제가 생겨도 바로 복원을 하실수 있습니다.

 

iNove 티스토리 스킨의 사이드바 폭은 300px입니다. 전 사이드바에 300x250 애드센스 광고를 달기위해 폭을 320px로 넓히기로 했습니다.

 

관리자 메뉴 -> HTML/CSS 편집을 선택하시고 "Ctrl + F "를 눌러 "#sidebar"를 검색하세요. 그럼 style.css란에 한개가 나옵니다.

width:300px 값을 원하시는 크기로 바꾸시면 됩니다. 전 width:320px으로 했습니다.

 

사이드바 폭을 수정하고 블로그 화면으로 확인하시면 사이드바가 본문글 아래로 이동된것을 확인하실수 있습니다.

 

그 이유는 전체 넓이보다 커져버린 사이드바가 밀려난 현상인데요 그부분도 수정을 해야 정확하게 자리를 잡겠지요.

 

검색창에 "#container "을 입력하면  style.css란에 한개가 나옵니다.

 

width:936px 값이 스킨 전체 넓이입니다. 사이드바를 20px넓혔으니 width:936px 값도 20px넓혀야 겠지요. width:956px으로 수정하시고 저장하시면 됩니다.

 

 

저장을 하고 블로그 메인 화면을 새로고침하시면 위 화면처럼 오른쪽 표시한 부분들이 안맞을 겁니다. 위 부분은 이미지를 사용한 부분이라 사용된 이미지도 수정을 해줘야 합니다.

 

스킨/images폴더안에 light.gif, sidesep.gif, footer.jpg, header.jpg 네개의 파일을 늘어난 px값만큼 조정하셔서 "HTML/CSS 편집 -> 파일 업로드에 올려주시면 됩니다.

 

설명이 약간 부족한듯 하지만 기본적으로 어떤 부분을 수정하고 어떤 이미지 파일을 수정하면 사이드바 넓이를 조정할수있다는 정리 글 정도로 봐 주세요.^^

, , , ,

  1. 내용 잘 봤습니다.

    저도 Tyzen님의 스킨을 적용해서 얼마전부터 사용하고 있는데요...
    저는 본문영역 폭도 확장을 하고 싶어서 #container부분의 폭을 확장했더니 말씀하신대로 귀퉁이가 깨지는 현상이 발생했어요.

    위에서 light.gif파일 등의px값을 수정해서 다시 업로드해야 한다고 하셨는데 방법이 어떻게 되는지요?

    답변 부탁드립니다~

  2. 안녕하세요.
    이미지 파일수정을 하면 됩니다.
    근데 그걸 글로써 설명할려니 쫌 어렵네요.
    제가 그래픽 전문이 아니라서리...-.-

    제가 한 방식은 포토샵으로원본 이미지를 불러와서 본문을 키운만큼 이미지 사이즈를 맞춘게 다인데 그 방법을 글로 할려니...

    방법은 그래픽 전문 블로그나 사이트를 이용하시라고 권해 드립니다.
    죄송합니다.^^

  3. 네, 안그래도 다른 분의 블로그에서 이 스킨에 대한 확장글을 보고 문의했더니
    그분이 알씨프로그램으로 수정을 해보라고 해서 도전해봤는데... 결국 못했습니다.

    알씨로도 안되는 걸 -저는 포토샵 전혀 못해요- 그냥 포기하고 설정된 956x폭으로 써야겠어요.

    친절한 답변 감사합니다~ :)

  4. 방금 수정방법,이미지 첨부했습니다.
    이제 자야 겠습니다. 3시반이네요..^^

  5. 정말 감사합니다!!

    기존 이미지 파일은 삭제하고 첨부하신 파일 추가해주면 되는거지요?

  6. 안녕하세요~ 잘보고 갑니다.
    그런데 오른쪽 박스 선들이 좀 짧게 설정이 되고 글씨가 뒷쪽으로 가 있는 것은 어떻게 설정해야 하나요?
    카테고리나 포스트들 글씨를 왼쪽으로 더 밀고 싶은데 잘 안되네요.
    중간 선들도 옆으로 밀려서요. 전체적으로 오른쪽으로 간듯 싶은데 설정 방법이 있나요?

    http://overcomingjimmy.tistory.com/
    제 블로그 입니다. ^^

  7. 안녕하세요.
    모바일로 확인해보니 사이드바 사이즈 지정이 잘못된듯하네요.
    소스를 천천히 다시 확인해 보세요.

  8. 이제 퇴근해서 컴으로 접속해 보니 잘 수정하셨네요.^^
    알찬 블로그 운영하세요.

  9. Blog Icon
    김성현

    감사합니다^^ 덕분에 많이 배웠어요~

  10. 댓글 감사합니다.
    알찬 블로그 운영하세요.^^

  11. 정말 감사합니다

  12. 방문, 댓글 감사합니다.^^