이웃이 제가 배포한 스킨으로 멋진 스킨을 완성하셨지만 사이드바 가로폭문제 때문에 고민을 하셨습니다. 반드시 넣어야할 위젯인데 Life in Mono사이드바 가로폭보다 26px이나 커서 잘림현상이 있어서 도움을 요청하셔서 Life in Mono 스킨 사이드바 폭 늘리는 방법에 대해 포스팅해봤습니다.  

 
Life in Mono 스킨 기본적인 레이아웃의 이해  

기본적인 레이아웃의 이해 

 Life in mono 스킨의 사이드바(3번)는 바디(2번/빨간네모)안에 들어있기때문에 단순히 사이드바 크기만 늘려버리면 가로폭이 비좁아져서 사이드바가 아래로 내려오는 현상이 발생하게 됩니다. 사이드바의 폭을 늘리려면 사이드바의 폭을 늘린만큼 바디의 폭도 늘려주셔야 합니다. 추가로 바디위에 있는 헤더(1번) 값도 균형을 맞춰주기 위해 같은 같으로 늘려주면 됩니다.



사이드바 레이아웃의 이해 


 사이드바 레이아웃을 늘릴때 더 중요한것은 Life in Mono 스킨은 테두리를 둥글게 만들기 위해(3번) 위쪽,아래쪽 고정값(192px/1번)과 사이드바 내용부분 고정값 (198px/2번)을 두고 있어서 사이드바 폭이 늘어나는 만큼 이값도 늘려주셔야 합니다. 



 추가로 블로그 설명 모듈에 이미지값(blogimage) 역시 178px로 고정되어있어서 사이드바폭이 늘어난 크기에 맞춰서 늘려주면 됩니다.   


 

Life in Mono 스킨 사이드바 폭 늘리기  

사이드바폭 늘리기는 HTML/CSS편집에서 CSS값만 수정해주시면 됩니다. 하단의 이미지를 참고하셔서 순서대로 자신이 원하는 값으로 늘려주면 됩니다. 아래 이미지는 수정전의 값입니다.

1. 레이아웃 부분 


2-1. 사이드바 박스 위아래 고정값

 


 2-2. 사이드바 내용부분 고정값



3-1. 헤더속의 고정값 수정

위쪽에서는 설명이 길어질까봐 생략했지만 헤더속에는 메뉴, 타이틀 제목등을 포함하는 head-container라는 고정된 레이아웃이 있기때문에 사이드바를 늘린만큼 헤더값을 늘리고 싶다면 아래 head-container의 가로폭값도 추가로 수정해줘야 진짜 헤드값이 늘어나게 됩니다. 


 
완성된 모습


푸르미의 씽씽바람개비 보러가기 : http://bluesky21.tistory.com/


후기  

 위의 이웃의 블로그는 사이드바폭 수정과 거기에 맞는 메뉴수정, 타이틀 검색창 변경을 제외한 나머지 작업은 이웃이 직접 수정해주셨습니다. 이웃블로그를 스킨을 수정해주면서 느낀점은 역시 블로그는 타이틀 이미지가 멋져야 폼이 나는것 같습니다. 이웃이 제 블로그 스킨으로 블로그를 꾸미셨지만 타이틀 이미지 같은 경우는 오히려 제가 나중에 배우고 싶은 롤모델인 것 같습니다.

 그동안 지쳐서 덮어두었던 포토샵책을 다시 펼쳐들고 열공해서 이웃들의 블로그 타이틀 이미지를 멋지게 수정할수 있는 내공을 쌓고 싶다는 생각이 듭니다. ^^;


가로폭이 26px 늘어난 Life in mono 수정 스킨 배포  


가로폭을 늘릴때 추가로 수정해준 사이드바 메뉴들이 포함되어 있는 스킨입니다. 수정에 어려움을 느끼시는분들은 이 스킨을 적용하고 참고하셔서 수정해주시기 바립니다.  ( 단 이웃의 타이틀이미지는 포함되어있지 않습니다. )

가로폭 226,250px, 준비중





신고

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 오늘도 블로그 스킨에 대해서 원하시는 분들에게 아주 좋은 글이네요^^

    항상 티비님덕분에 블로그를 시작하는 사람들이 많은 도움을 받고 보다 쉽게 시작하는 것같아요~

    저 역시도 그랬던 것처럼 말이죠^^

    2011.04.06 15:30 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 유용한 정보네요.
    예전에 어렵게 어렵게 알아서 수정했던거 같은데
    시간지나니 생각이 안나긴하네요^^
    다음에 수정할일 잇으면 좋은 참고가 될것 같습니다!~

    2011.04.06 15:46 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. 가끔 요케 저케 바꾸기도 하고 원점으로 돌려놓기도 하고 그래요 ㅎㅎ오늘도 상큼한팁 입니다^

    2011.04.06 15:56 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 아우... 티비님. 이걸 포스팅하셨군요 - 제가 지금 것 전에 라이프 인 모노가지고 사이드바를 넓히고 며칠 내내
    했었거든요.. 근데 그거 넓히고 나니까 이후 여러 사태가 벌어지더라고요...ㅜ 결정적으로 이후로는
    스킨 위자드가 작동안된다는 거.. 그래서 저같은 고수가 아닌 저수는 포기했어요..ㅜ

    2011.04.06 16:09 신고 [ ADDR : EDIT/ DEL : REPLY ]
  6. 처음에 수정하느라 무척 애먹었던 기억이 납니다.
    조금 쉽게 했으면 좋았을텐데요.

    2011.04.06 16:51 신고 [ ADDR : EDIT/ DEL : REPLY ]
  7. 이렇게 수정이 가능하다니 !!
    정말 유용한 정보 얻고 갑니다 ^^

    2011.04.06 17:05 신고 [ ADDR : EDIT/ DEL : REPLY ]
  8. r 이 빠졌어용~~^^

    2011.04.06 17:10 신고 [ ADDR : EDIT/ DEL : REPLY ]
  9. 레이아웃이 얼마나 중요한지 저도 압니다~~~

    2011.04.06 18:11 신고 [ ADDR : EDIT/ DEL : REPLY ]
  10. 처음 티스토리 넘어와서 다소 어렵던 부분이었는데... ^^

    2011.04.06 20:08 신고 [ ADDR : EDIT/ DEL : REPLY ]
  11. 자료 감사합니다.
    유용하게 사용해야겠네요.
    고민했었는데...
    즐거운 저녁시간 되세요...^**^

    2011.04.06 21:04 신고 [ ADDR : EDIT/ DEL : REPLY ]
  12. 이건 좀 복잡하군요.
    스킨 사이드바를 늘이는 방법이니
    좀 담아갑니다.

    2011.04.06 23:41 신고 [ ADDR : EDIT/ DEL : REPLY ]
  13. 이건 좀 복잡하군요.
    스킨 사이드바를 늘이는 방법이니
    좀 담아갑니다.

    2011.04.06 23:41 신고 [ ADDR : EDIT/ DEL : REPLY ]
  14. 스킨이 싫어서 저는 블로그 스킨 자체를 뽀개고.. 새로 만들어버렸지요.. 이제는 디자인 변경하는 작업만 하고 있는..ㅋ

    2011.04.07 04:44 신고 [ ADDR : EDIT/ DEL : REPLY ]
  15. 완전 친절 티비님이십니다~

    저도 제 스킨 이제부터 티비님한테 물어봐야겠네요.
    괜히 머리 아프지 말고 움하하

    2011.04.07 05:46 신고 [ ADDR : EDIT/ DEL : REPLY ]
  16. 언제나 유용한 정보 감사합니다.
    mono in life 스킨을 쓰면서 티비님 포스팅이 도움이 참 많이 되었습니다.
    비오는 날, 감기 조심하시고 행복가득한 하루 되세요~*

    2011.04.07 10:01 신고 [ ADDR : EDIT/ DEL : REPLY ]
  17. 오랫동안 사이드바 수정문제로 골치 아팠는데, 포스팅 보고 잘 수정했습니다. 잘보고가요 ^^

    2011.08.12 22:14 신고 [ ADDR : EDIT/ DEL : REPLY ]
  18. 감사합니다 쉽게 사이드바 해결했습니다
    하지만 단점은 본문과 사이드바를 같이 늘리는 방법이 있었으면 아주 굿인데
    저는 본문과 시이드바를 좌우로 여백을 안줄려고 사이드바를 늘렸는데 사이드바가 좀 큰 느낌이 듭니다 ㅎㅎ
    본문과 사이드바 같이 늘리면 참 좋은데 말입니다 어쨌던 해결했으미 감사요
    참그리고 레이아웃부분,박스위아래 고정값,내용부분 고정값,헤더속 고정값을 따로따로가 아니고 예를들어 50PX를 늘렸다면 전체다 똑같이50PX값을 줘야하더군요 이걸 몰라서 애먹긴했지만 ㅎㅎ
    자주 들리겠습니다

    2011.08.13 00:38 신고 [ ADDR : EDIT/ DEL : REPLY ]
  19. 사이드바가 개인적으론 가로폭을 낭비한다고 해서 없애보고 싶은데 어려워서 안하게 되네요...

    2012.02.20 18:23 신고 [ ADDR : EDIT/ DEL : REPLY ]
  20. 정말 좋은 내용 감사합니다. 블로그 만들면서 어찌해야할지... 난해했엇는데..

    2012.04.06 11:52 신고 [ ADDR : EDIT/ DEL : REPLY ]
  21. 정말 좋은 글 잘 읽었습니다. 덕분에 쉽게 사이드바 조정 완료했네요!! 감사합니다~
    앞으로도 유용한 정보 부탁드릴게요. 화이팅

    2014.05.05 21:06 신고 [ ADDR : EDIT/ DEL : REPLY ]

티스토리 툴바