블로그 가로 폭 변경하기

블로그 가로 폭은 이미 설정을 통해 조절할 수 있습니다. 다만, 해당 기능은 전체적인 설정으로 세부적으로 가로 폭을 조절하기 위해서는 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에 추가하면 원하는 결과를 얻을 수 있습니다. 

롤랑존

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

    이미지 맵

    지원 다른 글

    댓글 14

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

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

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

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

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

      • 비밀댓글입니다

      • 안녕하세요.

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

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

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

        감사합니다.

      • 탕비수다님 현재 사용중이신 스킨은가로폭이 1024px 이신가요? 전체 가로폭을 1024px로 설정했는데, 비수다님 스킨크기보다 훨신 좁네요. 설정 폭을 알 수 있을까요?

      • 안녕하세요.

        저는 아래와 같은 설정으로 사용하고 있습니다. 블로그를 방문해 보니 크게 다르지 않은 것 같은데요.

        articleSite: {
        maxWidth: '800',
        shrinkWidth: '728',
        comportWidth: '800',
        wordBreak: 'break',
        justifyAlign: true,
        backgroundColor: '',
        imageMap: false
        }

      • 비밀댓글입니다

      • 첫 번째 사이드바의 경우 보통 300px 크기를 기본으로 하는데요. 본문과 사이드바의 간격 그리고 사이드바 크기가 1024px 넘으면 사이드바가 사라지게 설정되어 있습니다.

      • 탕비수다님 인덱스화면에 사진간격은 어디에서 조정을 하는지요?
        그리드 모드 말고 사진과 텍스트이 나오는 일반글 사용시 사진간격이 너무 넓은 것 같아서 조정을 하려고하는데, 아무리 소스를 건드려도 잘안되네요.ㅜ.ㅜ

      • tangbisuda.tistory.com/3

        스킨가이드 내용 가운데 인덱스 페이지 > 배치 확장을 설정하면 4개가 배치되면서 상대적으로 좁아지는 효과가 있습니다.

      • 댓글에 댓글이 안되네요.
        pc상에서는 그런데요. 모바일에서 볼 때는 가로 2개가 나타나는데요. 여기서 나오는 이미지 간격을 조정하려고요.

      • 해당 배치 간격은 JQuery 모듈을 이용해 배치하고 있는 상황이며 아쉽게도 사용자 정의 관련 문의라 답변을 드리기 어렵습니다.

        뿐만 아니라 미세하게 여러 상황에서 작동할 수 있도록 CSS를 조정한 상태라 배치 관련 CSS 변경시 화면 깨짐이 발생할 수 있어요.

        그럼에도 변경하실려면 Media Query쪽을 살펴 변경하시면 될 것 같습니다.

    *

    *

    이전 글

    다음 글