최근 사진 위주의 포스트에 잘 어울릴만한, 그리고 다행스럽게도 내 취향에 맞게 심플한 분위기의 스킨이 연달아 오픈했다. 디자인에 소질이 있는 것도 아니고, css를 잘 아는 것도 아니고, 더구나 부지런하지도 못한 탓에 스킨 수정은 잘 안하는 편이지만 딱 하나, 그냥 넘어갈 수 없는 것이 있다. 바로 본문 폭 설정.
예전에는 스킨위자드에서 700 픽셀로 조정하는 정도로 만족했으나, 사진 리사이즈 크기를 789 픽셀(딱 떨어지지 않는게 맘에 든다 ;-P)로 정하면서 아쉬움이 커졌다. 가로 폭을 700 픽셀 이상으로 늘리려면 css를 직접 고치는 것 외에는 방법이 없으니... 한번 두번 삽질 하다가 요령이 좀 생겼는데, 스킨 오픈 소식을 알리는 공지 글을 보면 나와 같은 아쉬움을 느끼는 분들이 계신 것 같아 사소한 팁이나마 공유해보려 한다.
0. 준비 사항:
- 파이어폭스와 파이어버그 설치 (http://blog.enzoy.pe.kr/700 참고)
- "바꾸기" 기능을 지원하는 에디터 (http://www.editplus.com/kr/download.html)
1. 본문 폭을 결정하는 요소 찾기
파이어버그를 활성화(F12)하고 "검사" 버튼을 클릭하면 마우스 포인터가 가리키고 있는 <div>영역에 테두리를 그려 보여준다. 본문을 담고 있는 영역을 선택한 상태에서 파이어버그 창을 보면 왼쪽에는 해당 HTML코드, 오른쪽에는 CSS코드를 보여준다. 최근 오픈한 두 스킨의 경우 아래 캡쳐 화면과 같이 각각 "article"과 "article_post"가 되고, 기본값이 700, 600으로 되어 있음을 확인할 수 있다.
2. 본문 폭과 함께 수정해야 하는 width 지정 값 찾기 및 변경할 값 계산
이제 스킨 "HTML/CSS 편집" 화면에서 아래쪽에 표시되는 style.css를 복사해서 즐겨 쓰는 에디터에 붙여넣는다. ("바꾸기" 기능을 쓰기 위해)
스킨위자드에서 주석 처리하는 방식을 간단히 알아보면 이후 작업을 쉽게 이해할 수 있다. 본문 폭이 항상 post-width와 일치하지는 않기 때문에 1번 과정에서 확인한 요소의 width값이 post-width에 대한 상대값으로 얼마가 되는지 알아야 한다. 예로 든 두 스킨의 경우는 각각 post-width, post-width - 12로 지정되어 있다.
이제 본문 폭을 800px로 하고 싶다면 첫번째 스킨은 post-width를 800px로, 두번째 스킨은 post-width:-12를 800px로 맞춰주면 된다. 아래 화면과 같이 "찾기" 기능으로 post-width를 검색해서 수정해야 할 값들을 메모해두자. (이번 예에서는 기존 폭과 변경할 폭의 차이가 200px로 딱 떨어져서 바뀔 값까지 메모할 필요는 없었지 싶다 -_-;;)
3. "바꾸기" 기능으로 일괄 작업
위에서 메모해놓은 값들을 차례로 "모두 바꿈" 해주면 편집이 끝난다.
4. 저장!
이제 편집한 내용을 복사해서 스킨편집 화면의 style.css에 붙여넣고 저장하면 수정 완료~
# 스킨위자드를 지원하지 않는 스킨의 경우
2~4의 과정을 노가다로 때워야 한다. "width:"로 검색해서 본문 폭에 따라 변경되어야 할지를 판단하고 본문 폭에 더한 만큼 width 값을 키워준다.
티스토리에서 스킨위자드 폭 설정 값을 보다 넓게 고쳐주면 쓸모 없어질 팁... OTL
'쉬어가기' 카테고리의 다른 글
| Turin (0) | 2009.07.29 |
|---|---|
| 무지는 악이 될 수 있다 (0) | 2009.05.29 |
| "여자는 사악하다"는 명제에 대한 수학적 증명 (1) | 2008.12.01 |
| "‘미드’ 보다 美대선이 더 재미있어요"라는 기사를 접하고... (1) | 2008.11.04 |
| 컬트베어 - 스파이더 베어 (0) | 2008.10.29 |
