Fastboot v1.6.2 블로그 너비 조절하기

오랜만의 포스팅이네요.

 

본문 여백에 대해 포스팅 한 적이 있는데,

본문 여백이 아닌,

본문 자체의 너비 설정에 대해 궁금해하시는 분이 계시더라구요.

 

저도 가끔 Fastboot 스킨 본문 너비가 좁지 않나? 생각하긴 했습니다만,

홈페이지 구조도 모르고, 또 애드센스 광고를 게재하고 있는 입장에서

함부로 이것저것 만지기가 좀 그렇기에 그냥 그러려니 하고 있었어요.

 

하지만, 궁금해하시는 분들을 위해

일단 방법을 찾아보긴 찾아봤습니다.

그리고 알아내기도 했네요.ㅎㅎㅎ

 

다만,        

포스팅에 앞서 미리 말씀드리건데 주의! ★★★★★

저는 Fastboot 스킨의 구조 및 배치에 대해서 완벽하게 이해하고 있지 못하며

각종 디바이스 너비에 대한 특별한 지식도 없습니다.

이런 상황에서

자신이 작업하는 환경에서만 보기 좋다고 캔버스 크기나 여백 등을 함부로 조절하면

블로그를 방문하는 사람들의 디바이스 종류나, 모니터 크기, 해상도 등에 따라 다양한 변수가 생길 수도 있죠.

그러니 섣부르게 마구 조절하지 마시고, 적절하게 상황을 따져보고 본문 너비설정 하시길 바랍니다.

 

그리고~ 누누이 강조하지만 저 야매라서요...ㅋㅋㅋㅋ

포스팅을 따라하다보면 저와 다른 환경에서 문제가 발생할 수 있어요~

그러니 꼭 기존 스킨을 백업해놓으시고 따라와주세요!^^

 

 

#1. Fastboot v1.6.2 스킨의 본문 너비 조절하는 방법?    

 

본문 너비를 조절하는 방법으로는 크게 2가지가 있습니다.

각각의 그림을 보면 바로 이해가 되실거예요.

 

첫째, 전체의 기존 너비는 고정시킨 상태에서 본문과 사이드바의 비율만 조절하는 방법

 

 

 

둘째, 전체 너비를 조절하는 방법

 

 

 

1번 같은 경우엔 본문의 비율을 더 줄인다면 몰라도 더 늘리기엔 사이드바가 너무 좁아져서 별로일 것 같아요.

어차피 대부분 궁금해하시는 것이 2번일 것 같기도 하구요!

그래서~ 오늘은 2번에 대해서만 다루겠습니다. (제 컨디션 때문이라고 차마.. ㅋㅋ)

1번은 다음에 기회가 되면 포스팅할게요.

 

 

#2. 준비운동

 

초보자들에겐 조금 어려울 수 있을 듯 해요.

일반적으로 티스토리에서 스킨을 커스터마이징 하기 위해 접근하는 html/css에서의 방법이 아니라

별도로 업로드 되는 Fastboot.css 라는 파일을 수정해야 하거든요.

 

그래서~

적용중인 본인 스킨의 Fastboot.css 파일과

css 파일을 편집할 수 있는 프로그램이 필요합니다.

 

아래 포스팅에서 관련 정보 및 프로그램 정보를 대략(?) 얻으실 수 있으므로

한번 주욱 훑어보시기 바랍니다.

 

☞ Fastboot v1.6.2 사이드바 타이틀 색상 변경하기

 

 

 

#3. Fastboot.css 편집하기 쉽게 수정하기.

 

자, 그럼

준비운동 숙지하고 오셨으리라 생각하고

본격적으로 후다닥 돌입해봅시다.

 

우선 fastboot.css 파일을 편집프로그램으로 열어주세요.

저는 notepad를 사용해서 Fastboot.css를 열었습니다.

 

저희가 손을 봐야하는 녀석들은... 저기 7번째 끝도 없이 이어져있는 줄 어딘가에 있어요^^;

편집하기 편하도록 손을 좀 봅시다....

 

Ctrl+F 눌러서 [ .container{width:750px} ]를 찾아봅시다.

 

 

아래 초록박스와 같이 검색이 될건데요~

잘 보시면 바로 앞에 @media 라고 되어있죠. 

여기부터가 블로그 너비를 설정하는 코드에요. 아마도.

 

저기부터 @media 마다 엔터를 쳐서 줄을 바꿔줍시다.

@media 앞마다 총 4번만 엔터를 치시면 됩니다.

그림이 젤 좋은 설명인 듯 하니 잘 보고 따라하세요. 애먼 곳 끊으면 안돼요.

(아 물론 귀찮으시면 안해도 됩니다만, 수정할 때마다 아주 번거로울겁니다.)

 

 

 

#4. 블로그 너비 조절하기!

 

잘 따라하셨어요~

 

그럼 결과적으로 이렇게 됩니다!

 

이제 코드를 이해해보죠.

주황형광팬 부분은 조건(창 너비)이고, 노랑형광팬 부분은 실제 적용될 값(블로그 너비)입니다.

 

창이 768px 이상일 때 가로너비는 750px

창이 992px 이상일 때 가로너비는 970px

창이 1200px 이상일 때 가로너비는 1170px

 

각각 조건에 해당될 때마다, 창 너비보다 조금 작게 블로그 container 너비를 설정한건데

어떤 계산으로 저렇게 여유를 두고 값을 설정했는지는 유추가 잘 안되네요.

직접 너비를 이리저리 수정해보시고, 본인이 원하는 만큼 수정하시길 바랍니다.

 

 

저는 이렇게 하나의 경우를 더 추가해서 제대로 적용되는지 테스트겸 해볼게요.

편집하신 Fastboot.css 파일을 저장하시구요.

 

 

 

#5. Fastboot.css 파일 업로드 하기

 

관리 < 꾸미기 < HTML/CSS편집 < 파일업로드① 에서

② images/fastboot.css 파일을 찾아 선택(체크)하고

③ 삭제!! 하세요.

 

 

④ 추가를 눌러서

⑤ 수정한 fastboot.css 파일을 찾아

⑥ 열기

⑦ 저장!

 

 

 

자~ 확인해봐요.

 

창 크기에 따라 본문 너비 포함하여 블로그 전체 너비가 변한 것을 확인할 수가 있죠??

다양한 방문자들의 디바이스 및 환경을 예상하여,

본문 너비를 적절하게 조절하시길 바랍니다.^^

 

요즘 심각한 입덧으로 컨디션이 좋은 편이 아니라 포스팅을 후다닥 썼더니,

이해가 잘 될지 모르겠어요ㅠㅠ

어려운 부분은 댓글 남겨주시면~ 더 설명해드릴게요!