티스토리, 나만의 공간 늘이기 - 넓게 써요~

인터넷을 하다보면 가로로 널찍한 모니터에 한가운데, 혹은 왼쪽에 치우쳐 비싼 돈주고 산 모니터의 공간을 제대로 활용하지 못하고 있는 경우가 많다

그렇다면 나만이라도 좀 넓게 써보는건 어떨까?

블로그를 넓게 늘이면 뭐가 좋을까?
일단은 시야가 넓어지는것도 있지만 사진을 많이 올리는 이들에게는 대형사이즈 사진이 올라살 수 있다는 상당한 이점이 있다

미니홈피는 400px 이상 표시되지 않고 번거롭다
여타 블로그들도 크게 올리면 스킨에 사진이 잘려버리는 경우가 많다
혹자는 사진 용량제한어 걸려 못올리면 어떻하느냐?! 할 수도 있지만 이곳 티스토리는 용량 무제한이라는 멋진 타이틀이 있어 그딴건 겁안난다 ^^
그럼 이제 슬슬 잠자고 있는 넓은 화면을 깨워 볼까 한다


먼저 마음에 드는 티스토리 스킨을 고른다. 직접 올려도 상관은 없다
그리고 관리자모드로 들어간다(로그인)
관리자 모드에 스킨 파트에 들어간 뒤 거기서 html/css 수정을 누른다
그럼 아래, 위 두 화면으로 나뉘어 위쪽은 html, 아래쪽은 style.css 가 나오는데
html을 건드리는것 보다는 스타일을 수정하는쪽이 훨씬 쉽고 빠르다


콘테이너 이하 부분을 설정하면 되는데
우리가 눈여겨봐가며 수정할 부분에는 꼭 px 단위가 있으니 두눈 부릅뜨길 바란다 ^^

1,2,3단, 스킨이 나뉘는 기본 단수에 따라 그 설정값이 조금씩 다르다
이 블로그의 경우 2단이므로 이녀석을 기준으로 설명한다

자세히는 나로 모르므로 대~충 찍어서 그럴듯하게 뻥을 쳐가며 설명하는것이니 알아서 이해해주면 감사하겠다

파란글씨가 수정된 부분임을 명심하면서 보도록!!!

컨테이너 부분은 스킨의 단수와 관련이 있는것 같다
픽셀 표시만 보면 두군데다 ㅡㅡ;
적당히 알아서 잘 늘이면 잘 늘어날꺼다 ㅡㅡ;

헤더... 블로그 상단부분
반대로 제일 아래쪽엔 푸터라고 마지막 비스무리한 느낌을 준다
맞더라(궁금하면 이것들이 포함하고 있는 수치들을 과감하게 조정해서 미리보기를 해봐라)

 #container { /*@post-width:350=width:;*/ width: 1130px; /*@*/ margin: 0 auto; }
 #header {
  float: left;
  /*@post-width:300=width:;*/ width: 1130px; /*@*/
  height:/*@title-height=*/ 131px /*@*/;

컨테이너 설정이 전체를 얼마만하게 만들것인지를 결정하는것이라 본다
예를들면..... 건물을 세우기 전에 대지를 얼마나 잡느냐 ... 하는 뭐 이정도?

하여튼 요만큼 수정 해보고 미리보기!

미리보기는 상당히 중요하다
무턱대고 저장! 하면.... 돌이킬 수 없는 결과를 초래할 수도 있다
하지만 미리보기를 통해 어떻게 변화하는지 확인 하고 나서 저장한다면 그리 큰일 날 일은 없을것이다







이제부터 시작이다

 /* sidebar */
 #sidebar { clear: both; float: left; width: 230px; margin-left: 0px; display: inline; padding-bottom: 30px; }
 #blogImage {margin-bottom: 5px; }
 #blogImage img { width: 240px; }
 #blogDesc { font-size: 11px; color: #999; padding: 5px 0 10px 0; border-bottom: 1px solid #ececec;}

이 스킨의 왼쪽에는 각종 사이드 바가 몰려있다
이것들의 크기 설정을 해준다
블로그 전체가 커졌는데 사이드바만 작으면 구석에 처박힌것 처럼 보이잖아 ㅡㅡ;








아주 중요한 컨덴트!
내용물이다 내용물!!  정신 똑바로 차려야 한다
당신이 쓴 글이 바로 이곳에 표시된다
사진을 올려도, 동영상을 올려도, 글을 써도 다른데 안간다
여기에 보여지는것이다
지금 이 글에서 알리고자 하는 (크게 쓰기위한) 가장 핵심에 해당하는 부분!!!

 

  /* content */
 #content{ float:right; width:/*@post-width=*/ 850px /*@*/; margin-right: 0px; padding-bottom: 56px; display: inline; }

원래사이즈보다 훨씬 크다 @@;
이제는 사진이나 동영상을 가로 800픽셀로 올려도 옆뽈따구가 잘려나가지 않는다
아싸!!!

이쯤해서 미리보기를 해본다
크게 이상이 없다면 저장!
(나중에 괜히 날려먹고 울지 말고!!)



마지막으로 푸터(발음보다는 한글화가 너무 어렵다ㅜㅜ)
하여튼 이건 블로그 최 하단부분이다
뭐시기 어쩌고 저쩌고 하는 그런 상투적 문구가 들어가는곳이기도 하다

 /* footer */
 #footer { clear:both; width: 1100px; margin: 0 0px; padding-top: 8px; border-top: 1px solid #989898; }
 #footer .adTistory { float:left; }
 #footer .copyright {float: right; font-family: Vadana, san-serif; font-size: 11px; text-align: right; padding: 0; margin: 0; }
 #footer .copyright p, #footer .copyright p a { color: #999; }
 #footer .copyright .tistory, #footer .copyright .tistory a { color: #666; }

이렇게 해서 아주 허접하게 이것저것 마구 건드려 봤는데
이렇게 고치다 보면 글씨가 한쪽으로 쏠린다던가 벨런스가 안맞는 경우가 있을것이다
그럴땐 해당 파트에 margin 부분을 조정하면 원하고자 하는 답을 찾을 수 있을것이다


누구나 시간만 조금 투자하면 쉽게 할 수 있는 부분인데
무엇보다도 주의해야 할 점은 꼭 미리보기를 해 보고 난 뒤에 저장 해야 한다는것!


그리고 한가지 팁!
미리보기때는 깔끔하게 잘 나왔는데 새 창을 켜서 보니 이상하게 표시되는 경우가 있다
이것은 컴퓨터 내에 그 화면에 대한 기존의 정보들이 남아 있어서 잘못 표시되는것인데 새로고침을 하면 괜찮다
일반적인 새로고침(F5) 말고 Ctrl + F5를 하여 새로운 정보를 받을 수 있도록 한다



요기까지..... 헥헥
블로그를 넓게 쓰고자 시도하는 블로거들의 성공을 기원하며.....