티스토리 반응형 웹스킨 #1 본문 폭 수정 가이드

티스토리 반응형 웹스킨 #1의 본문 폭 수정을 위한 가이드입니다.

본문폭만 수정하는 것이라서 간단할것 같지만, 수정할 곳은 여러군데입니다. 

티스토리 반응형 웹스킨 #1의 본문 폭 디폴트는 820px입니다. 820px인곳을 원하는 폭으로 다 수정하면 될 것 같지만, 그 외에도 수정할곳이 몇군데 더 있습니다.

저는 본문폭을 850px로 수정했으니 참고하셔서 잘 따라하세요.

29번째 라인을 아래와 같이 수정합니다.

.article_skin{width:850px;margin:0 auto} /* width:820px -> width:850px 으로 수정. 컨텐츠 가로폭을 넓히려면 이부분 원하는 폭으로 수정 */

94, 95번째 라인을 아래와 같이 수정합니다.

.wrap_etc .inner_aside{overflow:hidden;width:850px;margin:0 auto} /* width:820px -> width:850px 으로 수정, 컨텐츠영역을 넓히려면 이부분 수정 */
.wrap_etc .box_aside{float:left;position:relative;width:202px;min-height:135px;margin:0 10px 33px 0} /* width:190px -> width:202px으로 수정, 하단 사이드바 1개의 가로폭임. 1개당 10px의 여백이 있으므로 사이드바가 4개라면 (가로폭 850 / 사이드바갯수 4개) - 여백 10 = 202.5 에서 소수점은 버림   */

이 부분은 하단 사이드바의 갯수를 미리 설정해야 하는데요.

관리 -> 사이드바 에서 하단에 표시될 사이드바를 추가 또는 삭제 하세요.

제 기준으로 설명드리자면, 사이드바가 4개, 가로폭이 850px입니다.

850 / 4 = 212.5 에서 소숫점은 버리세요. 사이드바 1개당 212픽셀인데, 여백이 10px씩 있으므로 사이드바 1개당 픽셀은 202px입니다.

이런식으로 95번째 라인에서 width 폭을 202px로 수정하면 됩니다.

또, 사이드바의 최근글과 최근 댓글을 레이아웃에 맞게 예쁘게 출력하려면 화면설정을 해줘야 합니다.

관리 -> 화면설정 -> 화면출력에서 최근글과 최근 댓글의 갯수, 태그 등을 몇개가 어울리는지 블로그 하단을 보고 수정하세요.

214라인을 아래와 같이 수정합니다.

.skin_view .another_category table th a { overflow:hidden;max-width:370px;font-size:12px;white-space:nowrap;text-overflow: ellipsis;color:#666 !important; border:0 !important;display:inline-block;float:left } /* max-width:255px -> max-width:370px 컨텐츠영역 가로폭이 늘어남에 따라 카테고리의 다른 글 보기 목록 가로폭 넓힘 */

여기는 카테고리 글 더보기 영역입니다. 카테고리 글 더보기 영역에 가로에 2개씩 출력되므로 850px / 2 = 425에서 댓글갯수 표시가 있으므로 55px을 빼줍니다. 따라서 425 - 55 = 370px 이 됩니다. 본인이 변경하려는 가로폭에서 나누기 2 - 55하면 됩니다.

228라인을 아래와 같이 수정합니다. 이 부분은 댓글영역 폭으로써, 수정하려는 본문 폭을 입력하면 됩니다.

.area_reply .tf_reply{width:850px;height:102px;padding:13px 15px 10px;border:1px solid #eee;font-size:12px;resize:none;box-sizing:border-box} /* width:820px -> width:850px 수정 */

301번째 라인을 아래와 같이 수정하세요. 여기도 원하는 본문 폭을 입력하세요.

@media only screen and (max-width:850px) { /* max-width:820px -> max-width:850px 가로폭을 넓히기 위해 수정  */

512번째 라인부터 516번째 라인을 아래와 같이 수정하세요. 여기도 본인이 수정하려는 본문폭을 입력하면 됩니다.

only screen and (max-width:850px) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (max-width:850px) and (min-device-pixel-ratio: 1.5),
only screen and (max-width:850px) and (min-resolution: 1.5dppx) {
    .ico_skin{background-image: url("images/ico_skin_640.png"); -webkit-background-size: 160px 160px;  background-size: 160px 160px}
} /* max-width:820px -> 850px로 모두 수정 - 가로폭 넓히기 위해 */

이제 본문 폭 수정이 끝났습니다.

좋은 하루 되시고..도움이 되셨다면 공감 한번씩 눌러주세요 ^^