지난 1년 5개월 간 쓰던 스킨 버리고 새롭게 스킨을 변경했습니다.



제가 이번에 선택한 스킨은 PrimeLayer(Green) 이란 스킨입니다.
3단형의 스킨으로 본문 너비는 520px, 사이드바는 160, 190px 인데 사이드바 위쪽은 통합되어서 382px 의 너비를 가지는 스킨입니다.
그리고 이 스킨은 스킨위자드를 지원하지 않아서 본문 폭을 조절하려면 조금의 노가다가 필요합니다.

이 스킨이 스킨위자드를 지원하지 않는 이유는 딱 한가지 입니다.
본문 주위의 테두리.. 그것 때문에 본문 너비를 변경하면 본문 영역에서 벗어나기에 그런 것입니다.
그래서 노가다를 통해 스킨 너비를 조절해줘야 합니다.
여기서 기존 스킨은 너비를 600px 로 썼는데 이번에 700px 로 넓혔습니다.
한번 블로깅을 시작하면 스킨의 너비 바꾸는게 쉽지 않은데 그래도 조금 더 넓게 쓰고 싶어서 큰 맘 먹고 단행했습니다.
그나마 본문 폭을 넓히니 다행이지 줄이는 작업이였으면 현재 글이 1000개 가까이 되는데 이거 다 일일이 본문 속 사진 크기 조절하려면 절대 스킨 바꾼다는 생각 못 합니다.
그런고로 이렇게 본문 폭이 좁은 스킨들은 쉽게 선택하지 못하는 것입니다.


근데 본문 폭 넓히는 것은 뭐 쉽습니다.
HTML/CSS 들어가서 width 검색하면서 넓혀줄 본문 너비 만큼 크기를 조절해주면 됩니다.
물론 전부다 하는 것은 아니고 원래 본문 너비 보다 크게 지정되어 있었던 것들을 중심으로 그만큼 더해주어야 합니다.
그리고 여기에 전 사이드바도 조금 더 넓혔습니다.
382, 160, 190 사이즈를 432, 180, 220 사이즈를 가지게 만들었습니다.
그래서 본문폭 700까지 해서 총 1242px 의 너비를 가지도록 만들었습니다.
그리고 이 스킨을 가지고 저처럼 너비 조절을 하시는 분들은 content_btm.gif, content_bx.gif, content_mid.gif, content_top.gif 요 네개의 화일들의 넓이를 본문 폭 넓히는 만큼 크게 조절해서 다시 올려줘야 합니다.
만약 이 네 파일들을 딱 본문 폭 만큼 올리셨늗네 글의 좌우 폭이 좀 이상하면 조금 더 넓혀주시면 되고요 그에 따라 본문 너비도 조금씩 더 넓혀주셔야 합니다. 단.. 글쓰기 영역까지 늘리시면 안됩니다.
wyswyg 쓰실 분들은 bg_wyswyg.gif 파일도 함께 조절해 주시면 됩니다.


예전 스킨의 경우에는 1079px 로 아직도 작은 모니터를 쓰시는 분들을 최대한 고려해서 작성했습늬다.


지난 일주일간 제 블로그를 방문해주신 분들에 대한 통계입니다.
제 블로그를 방문하시는 분들 중 16.7% 분들이 아직도 1024X768 의 해상도를 쓰시고 3.8% 의 분들이 1152x864 를 쓰시고 있기에 약 20%의 방문자 분들을 위해서면 이번에도 1024에 가깝게 스킨을 쓰는게 좋았을 것입니다.
하지만 계속 글을 쓰다 보면 넓은 폭의 스킨에 대한 유혹을 버릴 수가 없어서 이번에 저 분들에겐 죄송하지만 1280을 최저 기준으로 삼았습니다.
아무래도 스킨이 넓어 여유가 많으면 같은 내용이라도 좀 더 깔끔해 보이기 떄문입니다.
여기에 제 블로그가 온통 짬뽕 블로그이긴 하지만 그래도 가끔 사진 올릴떄 조금이라도 크게 올리고 싶은 마음도 있고요.
멀티로 가로 1000px 의 사진 블로그도 있지만 일단 본진은 여기니깐요.
그래도 일단 글 영역으로 왼쪽으로 해 놓아서 크게 보시는덴 불편함이 없을 것입니다.


그리고 두번째로 한 작업은 이 스킨은 원래 좌측 정렬이였습니다만 그것을 가운데 정렬로 바꾸었습니다.
이 부분에서 조금 삽질을 했는데 그 이유는 이 스킨을 만드신 분이 첨부터 좌측정렬을 고려해서 만들어 큰 프레임은 생략하고 넘어갔기 떄문입니다. ㅠㅠ


보통 대략적인 스킨의 구조도입니다만 여기에서 container 가 생략되어 있었기에 가운데 정렬한다고 삽질 좀 했습니다.
skin.html 파일에서 container 영역 만들어 주고 style.css 에서
#container {width: 1242px;margin: 0 auto;} --> 여기에서 width 뒤에 숫자는 바꾸시는 분 스킨 넓이입니다.
한줄 더 추가해 주면 됩니다. 그리고 하나 더 해주어야 하는 것이
#header {width:100%; height:32px; background-color:#252525; }
헤더 영역에서 100%로 되어 있는 것을 너비를 딱 지정해서
#header {width:1242px; height:32px; background-color:#252525; }
이런 식으로 고정시켜주어야 합니다.
이거.. 찾는다고.. 삽질을.. ㅠㅠ


그리고 가장 큰 삽질을 하게 만들었떤 주범을 적자면...
넓이를 조절하고 글을 쓰려고 하면 아마 당혹할 확률 99.9% 입니다.
그 이유는 글쓰기를 누르는데 본문 폭이 그대로 520 영역으로 나옵니다.
본문 폭이 넓어진 만큼 글쓰기 영역도 넓어져야 하는데 이 부분은 그대로이기 때문입니다.
index.xml 제대로 수정해서 올렸는데 왜 안되지 이러면서 skin.html 과 style.css 에 뭔가 더 있나 하고 뒤적거리기를 한참..
도저히 봐도 안 나오길래 전체 스킨 다운 받아 새로 싹 올리니 그제서야 되더라고요.


저처럼 직접 스킨 조절하다가 왜 안되지 하시는 분들...
저기 화살표에 있는 새 스킨 등록 메뉴로 해주세요..
그럼 바로 잘 됩니다. ㅡ.ㅡ;;;


여기에 저처럼 독립 도메인을 쓰시는 분들을 위한 마무리 필수 코스
skin.html 에서 <div class="commentWrite"> 이 부분을 찾으신 다음 바로 아래에

<p><span style="font-weight: bold;"><span style="font-size: 10pt;">Tistory 사용자 분들은 Q 누르시면 바로 로그인 됩니다</span></p>

하나 적어주시면


요렇게 나와서 티스토리 분들이 일일이 이름 적고 비번 적고 홈페이지 적을 필요가 없는 것입니다.



자.. 이로서 스킨 업데이트 작업이 거의 마무리가 되는 것입니다.
index.xml 에서 말 조금 바꿔주시면 위에 보이는 글들도 바꿀 수가 있습니다. ㅎㅎㅎㅎ
이제 남은건 사이드바 항목이랑 뭐 기타 배너 등등만 조절하면 되는 것입니다.



혹시 저처럼 본문 700에 사이드바 180/220, 가운데 정렬 하실 분들은 요 파일 다운 받으셔서 쓰셔도 됩니다.
이제 나름 깔끔하게 바뀌었으니 그래도 일년은 잘 버티겠지요. 음하하하



Posted by DanielKang Trackback 0 : Comment 16

댓글을 달아 주세요

  1. addr | edit/del | reply Favicon of https://surprisedbear.tistory.com BlogIcon satelowl 2010.08.07 16:31 신고

    꽉 들어차는게 보기 좋네요. :)

  2. addr | edit/del | reply Favicon of http://lexa.tistory.com BlogIcon 하늘봐 2010.08.07 17:53

    스킨 바꾸시느라 고생 많으셨습니다. 스킨 변경하고 나면 이리저리 손 볼것이 많은 게 일이지요. ^^
    저는 몇개월 단위로 바꿔서 이번 스킨은 또 얼마나 갈지 모르겠습니다;;;

    • addr | edit/del Favicon of https://felicity.tistory.com BlogIcon DanielKang 2010.08.07 23:22 신고

      ㅋㅋㅋ 전 이번에 바꾼게 1년 3개월 만..
      그 이전에도 꽤 오래 썼기에 그래도 1년 이상은 버티지 않을까 싶습니다.
      그리고 위에 합쳐져 있는 이런 3단 스킨을 젤 좋아하기도 하고요.

  3. addr | edit/del | reply Favicon of https://circlash.tistory.com BlogIcon circlash 2010.08.07 19:50 신고

    모니터에 꽉 차는게 보기 좋습니다~
    깔끔하고 좋네요^^
    저도 두 줄 짜리 사이드바 쓰고 싶은데 항상 너비가 760이라 못쓰고 있습니다 ㅠㅠ

    • addr | edit/del Favicon of https://felicity.tistory.com BlogIcon DanielKang 2010.08.07 23:23 신고

      760 이면 이 스킨으로도 사이드바 원래 크기로만 하면 가능할것 같은데요
      가로 해상도 1280 까지는 충분히 커버할 듯 보입니다.

  4. addr | edit/del | reply Favicon of https://anki.tistory.com BlogIcon Anki 2010.08.07 23:59 신고

    깔끔하네요~
    저도 바꿔볼까 생각중인데, 많은 정보 도움이 되었네요~~~
    즐거운 주말 보내세요~~!!

    • addr | edit/del Favicon of https://felicity.tistory.com BlogIcon DanielKang 2010.08.08 00:03 신고

      근데 스킨 바꾸는거 의외로 넘 귀찮아요.
      사실 시간은 오래 안 걸리는데 하나하나 다 체크하면서 바꿔야 하다 보니 말이죠. ㅠㅠ
      Anki 님도 주말 잘 보내세요.

  5. addr | edit/del | reply Favicon of https://esajin.kr BlogIcon 서관덕의 시간이 머문 작은공간™ 2010.08.09 18:46 신고

    스킨수정... 은근슬쩍 짜증이 많이 나죠..ㅡ,.ㅡ;
    그래서 전... 만들어 쓰고 있습니다....ㅡ,.ㅡ;

    저도 처음 블로그 폭을 설정해 놓고... 글쓰기 폭이랑 맞지 않아... 상당히 삽질했는데..
    의외로 쉬운곳에 정답이 있더군요.ㅎ

    관리자 스킨에 화면출력 설정에 본문가로 크기 값을 바꿔주니... 글쓰기 폭과 스킨 폭이 같아지더군요.ㅎㅎ
    그리고, 글쓰기도, wysiwyg.css를 통해서 변경이 가능하도록 되어 있어... 손 쉽게.. 스킨과 글쓰기 화면을
    맞출수 있답니다.ㅎㅎ
    걍 참고 하세요..^^

    아.. 그리구요... 모니터 해상도.. 통계 어떻게 내셨어요??? 플거인이 존재하나요??? 아님.. 별도로... 추가 하셨나요??

    • addr | edit/del Favicon of https://felicity.tistory.com BlogIcon DanielKang 2010.08.09 18:57 신고

      저도 3년전 티스토리 처음 시작할 때에는 스킨 만들어 쓸까 하다가 도저히 귀찮아서 그냥 수정만 해서 쓰고 있는데요 이게 이미 만들어져 있는 스킨에서는 바로 반영이 안 되는 경우가 있더라고요
      제가 이 스킨 수정하면서 index.xml 파일만 여러번 수정해 올렸는데도 반영이 안 되다가 그냥 모든 화일 싹 새로 올리니깐 되더라고요.

      그리고... 모니터 해상도는 다음 웹인사이드란 것을 이용하시면 됩니다.

  6. addr | edit/del | reply Favicon of http://hanseongmin.net BlogIcon 한성민 2010.08.10 11:30 신고

    전 스킨을 바꾸어도 마땅한 것이 없더라구요....
    며칠동안 새로운 스킨을 적용하다가 어느 순간에 전에 사용하던 스킨으로 돌아와 있더라구요.....^^

    • addr | edit/del Favicon of https://felicity.tistory.com BlogIcon DanielKang 2010.08.10 11:41 신고

      ㅎㅎ 전 원래 요런 스탈의 스킨을 좋아했는데 그 간에는 제 마음에 드는게 없다가 요번에 딱 제 마음에 드는게 생겨서 저도 이번엔 좀 오래가지 않을까 싶습니다.

  7. addr | edit/del | reply Favicon of http://nixmin82.tistory.com BlogIcon 닉쑤 2010.09.30 10:53

    마땅한게 없어서 고민이었는데 수정하시니 훨 좋네요.ㅎ 감사히 잘 쓰겠습니다~~~

  8. addr | edit/del | reply Favicon of http://riodejournal.tistory.com/ BlogIcon Rio de Journal 2010.10.18 00:23

    이제 막 블로그를 시작해보려고 했는데
    스킨이 블고그를 담는 그릇 같은 역할을 하다보니
    생각보다 신경이 많이 쓰였습니다.

    감사히 잘 쓰겠습니다^^

    • addr | edit/del Favicon of https://felicity.tistory.com BlogIcon DanielKang 2010.10.18 20:28 신고

      처음 블로그 하시면 스킨 만지는게 쉽지만은 않으실 것입니다.
      아예 새로 만드는건 너무 작업이 커지고 기존 만들어진 것을 조금씩 수정해가며 쓰는게 편하긴 합니다만 이도 잘 모르시는 분들은 쉽지가 않지요.
      잘 사용하세요. *^^*