화이트 라인 스킨의 본문, 사이드바 가로 길이를 변경해봅시다. 아래 그림에 나와있는 수치만 알면 쉽게 변경이 가능합니다.



알아야 할것!

스킨 가로의 총길이는 1140px 입니다. 

1140px = 860px(가로) + 280px(세로)

860px = 810px(실제 본문 사용 길이) + 좌우 여백 50px

280px = 239px(실제 사이드바 사용 길이) + 좌우 여백 40px + 왼쪽 선 1px

 

예로 본문 810px 에서 1000px 으로 바꿔보겠습니다. style.css 을 열어주세요.

/* 본문 길이 */

#wrap { width:1140px; position:relative;margin:0 auto; box-shadow:0 0 5px rgba(0, 0, 0, 0.2); background-color:#ffffff; }

#body:after { content:""; display:block; clear:both; }


#header { width:100%; height:50px; background-color:#ffffff; z-index:50; border-bottom:1px solid #ccc; box-shadow:0 2px 3px rgba(0, 0, 0, 0.03);}

#header:after{ content:""; display:block; clear:both; }

/* 본문(content) + 사이드바(sidebar) */

#content { float:left; width:810px; padding:10px 25px 0 25px; }

#sidebar { float:right; width:239px; padding:20px 20px; border-left:1px solid #ddd; line-height:180%; }

#footer { width:100%; position:relative; display:inline-block; border-top:1px solid #ccc; }

본문(#content)의 width값을 1000px로 바꾸었으니, 총 가로 길이도 바꿔줘야 됩니다.

1050px + 280px = 1330px

#wrap { width:1330px; position:relative;margin:0 auto; box-shadow:0 0 5px rgba(0, 0, 0, 0.2); background-color:#ffffff; }

#content { float:left; width:1000px; padding:10px 25px 0 25px; }

위 방법으로 사이드바도 변경이 가능합니다.

하지만 제가 사이드바를 제작할 때 버튼들과 딱맞춰 만든것이기 때문에 이미지들 위치가 바뀔겁니다. 이미지 가로 값을 변경해주시면 깔끔하게 나올 겁니다. html을 잘모르시는 사용자는 본문만 변경해서 사용하세요.

 

sawearl.js 을 열고 수정 하시면 끝납니다.

$(function() {
 //네비게이션 고정
 var navtop = $("#header").offset().top;
 $(window).scroll(function () {
  if ($(window).scrollTop() > navtop) {
   $("#header").css("position","fixed");
   $("#header").css("top","0");
   $("#header").css("width","1140");       < - 변경한 가로 총길이로 변경
   $("#navtop_mar").show();
  }
 });

마지막으로 길이가 바뀌었기 때문에 반응형(미디어쿼리)와 메인 크기도 변경해줘야 됩니다.

먼저 반응형입니다.

/* 모바일 미디어쿼리 */
@media screen and ( max-width:860px ){          < - 원하시는 해상도에 반응형이 되도록 변경
 #wrap { width:100%; overflow-x:hidden; }
 #content { width:96.5%; padding:10px 1.75% 0 1.75%; }
 #header ul { display:none; }
 .article .imageblock img{ height:auto !important; }
 .cap1 { width:100% !important; }
 #sidebar { display:none; }
}

@media screen and ( max-width:573px ){       < - 원하시는 해상도에 반응형이 되도록 변경
 .flexible_img_col li { width:96.5%; }
 .flexible_img_col .thumb img { width:99%; }
 #header { width:1140px; }
}

갤러리 입니다.

/* 카테고리 갤러리 */
.flexible_img_col { padding-bottom:10px; }
.flexible_img_col ul{ margin:0; padding:0; *zoom:1}
.flexible_img_col ul:after{ display:block; clear:both; content:""}
.flexible_img_col li{ float:left !important; width:250px; margin:15px 8px 3px 8px !important;padding:0 !important; background:#fff; border:1px solid #ccc; border-radius:15px; }
.flexible_img_col li.masonry-brick{margin-top:0}

입맛에 맞춰 변경하시면 됩니다. 모두 끝~

 

  1. BlogIcon 열린영어 2015.02.25 22:48 신고 Addr Modify Reply

    제 스킨의 경우 실제 본문 길이가 809px 입니다. 그런데 위 설명에는 810px 로 나오네요^^

    제가 소스를 건드린 건지..

    아무튼 감사드립니다!

    • BlogIcon sawearl 2015.02.25 22:50 신고 Addr Modify

      깜빡하고 패치를 안해서 809입니다. 지금은 올려놓은 파일에는 810으로 되어있습니다. 숫자만 바뀐거니 810으로 바꿔서 사용하세요.

  2. BlogIcon .하야루비. 2015.05.16 22:07 신고 Addr Modify Reply

    안녕하세요. 알려주신데로 잘 적용하였습니다 ^_^ 감사합니다.
    다만 이미지를 넣을때 최대가 810px로 들어가는데..이걸 1000px로 넣을수는 없을까요?
    http://suga.kr/147 <- 클릭하면 원본 이미지를 볼수 있긴 한데요.
    게시글 이미지를 화면에 보일때 최대 900~1000으로 보이게 하고 싶은데..그건 안되어서요 ㅠㅜ
    궁금해서 여쭤보네요^^ ㅎㅎ

    • BlogIcon .하야루비. 2015.05.16 22:16 신고 Addr Modify

      아..해결되었네요 ㅎㅎ
      글설정에 보니 글쓰기 가로폭이 그거네요 ㅎㅎ
      아직 티스토리 초보다 보니 많이 헤매는거 같아요^^
      그럼 좋은 저녁 되세요^^
      좋은 정보 알려주셔서 감사드립니다 ( _ _ ) ^^

  3. 세렌디 2015.07.08 14:13 신고 Addr Modify Reply

    굿굿 감사합니다

Comment