블로그 가로 폭 변경하기

블로그 가로 폭은 이미 설정을 통해 조절할 수 있습니다. 다만, 해당 기능은 전체적인 설정으로 세부적으로 가로 폭을 조절하기 위해서는 CSS 정의를 알맞게 수정해야합니다. 스킨 최대 가로 폭은 좌우 50px의 여백을 포함해 1600px이며 rem 단위로 환산하면 100.000rem입니다. 해당 설정은 정식 지원하는 기능이 아니지만, 최대 가로 폭보다 좁게 설정을 원할 경우 도움이 되는 안내입니다. 편의를 위해 단위는 px로 환산해 설정했습니다.

전체 가로 폭 설정하기

.row { width: 100%; margin: 0 auto; padding: 0 50px; max-width: 1024px }

스킨 최대 가로 폭보다 전체적으로 블로그 가로 폭을 좁게하고 싶다면 CSS 파일에서 02. Structure 정의 아래에 해당 정의를 찾아 알맞게 변경하세요. ver. 4.0.4 기준으로 93라인에서 찾을 수 있습니다. 해당 값을 변경하면 모든 페이지의 최대 가로 폭은 1024px로 설정됩니다.

첫 화면 가로 폭 설정하기

#tt-body-index .row { width: 100%; margin: 0 auto; padding: 0 50px; max-width: 1024px }

첫 화면의 가로 폭을 스킨 최대 가로 폭보다 좁게 설정하고 싶다면 위 정의를 CSS에 추가하세요. 티스토리는 각 페이지마다 고유 식별자를 제공하고 있습니다. 검색 페이지의 경우 식별자는 #tt-body-search입니다. 다만, 첫 화면 식별자는 공지사항 식별자와 동일하기 때문에 위와 같이 설정할 경우 공지사항 페이지도 동일하게 설정됩니다.

인덱스 페이지 가로 폭 설정하기

#tt-body-index .row, #tt-body-search .row, #tt-body-category .row, #tt-body-archive .row { width: 100%; margin: 0 auto; padding: 0 50px; max-width: 1024px }

인덱스 페이지는 첫 화면을 포함해 검색 페이지 및 카테고리 페이지 그리고 아카이브 페이지를 모두 포함합니다. 따라서 흔히 퍼머링크 페이지 및 방명록을 제외한 페이지입니다. 역시 위 정의를 CSS에 추가하면 원하는 결과를 얻을 수 있습니다. 

신고

롤랑존

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

    이미지 맵

    지원 다른 글

    댓글 5

      • 안녕하세요.
        스킨 예뻐서 한 번 테스트로 해보고 있는데요.

        기본 메인 세팅이 가로로 썸네일이 3개가 나오는데요.
        가로로 4개가 나오게 하는 방법은 어떻게 되는지 궁금합니다.

        그래서 가로로 4개의 썸네일
        세로로 3줄의 썸네일이 나오게 해서...

        블로그 첫 메인에 총 12개의 게시물을 노출시키고 싶은데..
        어떤 테그를 건드려야 하는지요??

        (스킨은 꼭 구매해서 쓰겠습니다.)

      • 비밀댓글입니다

      • 안녕하세요.

        스킨 가이드 가운데 인덱스 페이지를 살펴보면 도움이 될 것 같습니다.

        http://tangbisuda.tistory.com/3#guide-index-page

        "인덱스 페이지 > 배치 확장"을 설정하면 4개의 아이템이 배치됩니다.

        감사합니다.

    *

    *

    이전 글

    다음 글