tisPaperDarkblue 스킨의 가로 사이즈 바꾸기

leezche 님이 만드신 tisPaperDarkblue 스킨의 가로폭을 늘여서 사용하고 있다.

그동안 찍은 사진들은 가로폭이 800 이라 평범한 스킨은 사용할 수 없었다.

이전에 사용하던 스킨도 공을 들여 가로폭을 800으로 맞추어서 사용하긴 했지만, 그리 마음에 들지 않았다.

그러다가 leezche님의 스킨을 알게 되었다. 다른 스킨과는 달리 skin.html을 건드리지 않고 style.css만을 수정해도 된다는 설명이 마음에 들었다. 그리고 무엇보다 스킨이 깔끔하고....

하지만 실제 가로폭을 800으로 맞추기위해서는 세 개의 파일을 수정해야했고, 노가다성 테스트를 여러번 하기는 해야했다. 그래도 그 결과는 썩 만족스럽다.

잊어버리지 않기위해 그 방법을 적어둔다.


1. 일단 index.xml 파일을 열어

<contentWidth> </contentWidth>

이 부분의 가운데 있는 숫자를 임의로 바꿔준다. (여기서는 800)



2. style.css 파일 수정할 부분
다음 굵은 글씨 부분을 수정한다. 화살표(-->)표시 이후는 굵은 글씨 부분에 대한 설명

.header{ width:800px; padding:10px; height:30px;}

--> 제목(~photo story부분의 너비)

.Body .layoutBottom{}

.mainBody{ float:left; width:1030px; padding:0 0 0 23px; margin:0; background:url(./images/layoutBg.gif);}

--> 본문이 들어가는 부분의 너비

.contentBody .layoutBottom{ padding:0; margin:0; background:none;}
.content { float:right; margin:0; padding:16px; width:770px; }

--> 맨윗줄 기사제목,수정,공개설정등에 해당하는부분

.content .layoutBottom{background:none; padding:0; margin:0;}
.sideinfo{ float:left; width:175px;}
.footer{ width:800px; padding:20px 20px 20px 240px; text-align:center; clear:both;}

--> 맨아래 [홈 위치로그 태그 방명록 관리자 글쓰기] 에 해당하는부분

/* content > entryNotice, entryProtected, entry 본문 */
.content .article{ margin:0 0 20px 0; overflow:hidden; width:800px; letter-spacing:0; font-family:"굴림";}

-->본문내용에 들어가 있는 문장의 폭

/* content > entry > 트랙백받을 주소*/
.content .entry .trackback {margin:0; width:750px; padding:7px; overflow:hidden; background-color:#f8f9f9; }

--> 트랙백주소창의 크기

/* content > entry 댓글+트랙백 공통 스타일 */
.content .entry .list .control{ padding:0 5px 0 700px;}
.content .entry .trackback .list .control {padding:0 5px 0 750px;}

--> 트랙백,댓글창의 너비

 /* 블로그의 레이아웃 */
.container{ width:1100px; background:url(images/bg_top.jpg) no-repeat;}

--> 전체창의 너비



3.  layoutBg.gif파일을 블로그의 레이아웃 크기에 맞게 포토샵에서 수정하여야한다.

이 파일을 포토샵에서 열어보면 위와 같이 보인다. 왼쪽편에 체스판무늬처럼 보이는 것은 투명한 부분이고, 왼쪽 사이드바의 메뉴들이 거기에 들어갈 곳이므로, 폭이 1100인 새 파일을 열어서 왼쪽 투명한 부분의 길이는 그대로하고 나머지 오른쪽 부분은 하얀 색으로 만들어준다. (나는 몇번 복사해서 붙여넣기 방법으로 했다) 그 다음 gif 형식으로 저장하면 된다.


# 전체적인 균형을 생각해야하기 때문에, 각 숫자들은 몇번씩 시행착오를 겪으면서 조금씩 수정한 것이다. 가로폭이 800이 아닌 다른 크기를 하고 싶다면 그에 맞도록 각 숫자들을 알맞게 변형하여야한다.

## 이제는 사진을 800 사이즈로 찍지 말아야하겠다. 한 화면에 가로가 차지 않고 스크롤바가 생기니까 보기에 싫다. 720정도 크기로도 충분한 것 같다.