워드프레스 모바일 글본문 넓히기 급합니다

워드프레스 포럼 게시판 Forum 워드프레스 모바일 글본문 넓히기 급합니다

이 게시글은 0개 답변과 1명 참여가 있으며 마지막으로  Word Cracker에 의해 2015년 11월 12일 업데이트 됐습니다.

  • 글쓴이

  • Word Cracker
    Keymaster

    Twenty Twelve - 워드프레스

    워드프레스 반응형 테마를 좀 살펴보고 있는데요.. Twenty Twelve 테마구요.
    문의 드릴 내용은 제가 모바일에서 디자이만 집중적으로 보고 있는데요(모바일에서 어케 보여질지)…

    모바일 적응화면을 보니 위와 같이 나오는데요, 글 본문 가로 양옆아 빈공간이 너무 많아 가독성이 좀 떨어져 보입니다. 이 가로 양옆 공간을 좀 더 텍스트로 채울 수 있는 방법이 잇을까요?
    초보라 3시간째 헤매고 있네요ㅠㅠ 방법 아시는 분 도와주세요.


    답변:

    워드프레스 테마의 레이아웃은 CSS로 조정해주어야 합니다.

    예를 들어, 위의 경우 컨텐츠 영역의 Padding  값을 수정해주면 됩니다.

    그리고 모바일 버전에서만 적용하려면 미디어쿼리(Media Query)를 사용해야 합니다. 스마트폰, 아이폰 등 모바일 기기의 해상도에 관한 정보는 여기를 참고해보시기 바랍니다.

    Twenty Twelve 테마에서 모바일 기기에 대하여 컨텐츠 영역의 패딩 값을 수정하려면 다음과 같은 코드를 테마의 스타일시트 파일에 추가하면 됩니다.

    @media screen and (max-width: 767px) { 
    .single #primary {
        width: 105%!important; /* 실제보다 폭을 5% 늘림 */
        margin-left: -2.5%!important; /* 늘어난 폭 보정 */
    }
    }

    해상도는 767px로 설정했는데요, 그러면 아이패드보다 작은 기기(아이패드는 제외)에서 Padding 값이 조정되어 보일 것입니다. 위의 코드에서 숫자를 적절히 수정하여 제대로 나오는지 확인해보세요.

    워드프레스에서 테마의 스타일시트에 CSS 코드를 추가하는 방법은 이 글을 참고해보시기 바랍니다.

    참고: 위의 코드는 개발자 도구를 통해서만 테스트했고 실제 환경에서는 적용해보지 않았습니다.

'워드프레스 모바일 글본문 넓히기 급합니다'에 답변달기
글쓴이 정보: