코스모스팜 스레드

비너스웹진 스킨 모바일 화면 문의 드립니다.

안녕하세요. 비너스웹진 스킨을 이용하여 홈페이지 제작 중입니다.

다름이 아니라 웹과 모바일에서 어느정도 최적화 되어 화면에 출력이 되는데 

비너스웹진에 경우 우측 제목과 내용이 잘리는 부분에 있어 가독성을 고려하여

하단 이미지와 같이 변경 하고 싶은데 css에 모바일 부분이 설정되어 있다 하더라도 한계가 있는것 같습니다. 

list.php에서 소스를 웹과 모바일을 나눠서 구현해야하는지요?

구현을 하게 된다면 어떻게 소스를 작성해야하는지 문의 드립니다.

 

 

개발 사이트 url : http://www1.kpcnc.co.kr/?page_id=11485

추천 0 비추천

내 홈페이지에 소셜 공유 버튼 추가하기

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기

  • 썸네일 이미지 파일 크기를 바꾸시려면 스킨의 list.php 파일을 수정해야 합니다.

    kboard_resize 함수에 130X87로 지정된 코드를 적절히 조절해주세요^^

    추천 0 비추천
    수정하기 삭제

  • 감사합니다~ css로도 충분히 적용이 되네요~^^ 

    한가지 더 질문드리는데 썸네일 지정시 사이즈가 130X87로 저장이 되어 보여지는데

    이부분에 있어서 사이즈를 임의로 지정하여 저장해서 보여지고 싶은데

    소스 어느 부분을 수정해야하나요?

    추천 0 비추천
    수정하기 삭제

  • CSS를 사용해서 반응형으로 만드시는걸 추천드립니다.

    하지만 list.php 파일에서 모바일과 PC를 나누는것도 가능은 합니다.

    워드프레스의 wp_is_mobile() 함수를 사용해서 모바일용 소스를 보여줄 수 있습니다.

     

    <?php if(wp_is_mobile()):?>

    <!-- 모바일에서 보여줄 소스 -->

    <?php else:?>

    <!-- PC에서 보여줄 소스 -->

    <?php endif?>

     

    그리고 CSS를 사용해서 반응형으로 만드실 수 있습니다.

    비너스 웹진 스킨 폴더 내에 style.css 파일이 있습니다.

    style.css 파일에서 아래 코드가 모바일에서 적용되는 CSS 속성이며, 위쪽 PC용 CSS 속성에서 덮어쓰기 되는 구조입니다.

    @media screen and (max-width: 600px) {
        #kboard-venus-webzine-list .kboard-search { width: 100%; text-align: center; }
        #kboard-venus-webzine-list .kboard-list .kboard-webzine-item { height: 95px; }
        #kboard-venus-webzine-list .kboard-list .kboard-webzine-thumbnail { padding: 10px 0 0 0; width: 100px; height: 80px; }
        #kboard-venus-webzine-list .kboard-list .kboard-webzine-thumbnail .kboard-no-image { line-height: 80px; }
        #kboard-venus-webzine-list .kboard-list .kboard-webzine-wrap { margin-left: 100px; }
        #kboard-venus-webzine-list .kboard-list .kboard-webzine-wrap .kboard-webzine-content { padding-top: 3px; }
        #kboard-venus-webzine-list .kboard-list .kboard-webzine-wrap .kboard-webzine-info { display: none; }
        #kboard-venus-webzine-list .kboard-pagination .kboard-pagination-pages li { display: none; }
        #kboard-venus-webzine-list .kboard-pagination .kboard-pagination-pages li.first-page,
        #kboard-venus-webzine-list .kboard-pagination .kboard-pagination-pages li.last-page { display: inline-block; *display: inline; zoom: 1; }
        #kboard-venus-webzine-list .kboard-pagination .kboard-pagination-pages li.prev-page,
        #kboard-venus-webzine-list .kboard-pagination .kboard-pagination-pages li.next-page { display: inline-block; *display: inline; zoom: 1; }
        #kboard-venus-webzine-list .kboard-pagination .kboard-pagination-pages li.prev-page a,
        #kboard-venus-webzine-list .kboard-pagination .kboard-pagination-pages li.next-page a { padding: 6px 18px; }
        #kboard-venus-webzine-list .kboard-pagination .kboard-pagination-pages li.active { display: inline-block; *display: inline; zoom: 1; }
        #kboard-venus-webzine-editor .kboard-attr-row input[type=text],
        #kboard-venus-webzine-editor .kboard-attr-row input[type=file],
        #kboard-venus-webzine-editor .kboard-attr-row input[type=password] { width: 50%; }
        #kboard-venus-webzine-document .kboard-detail .detail-attr { clear: both; }
    }

     

    위 코드를 아래 코드로 교체해보시겠어요?

    @media screen and (max-width: 600px) {
        #kboard-venus-webzine-list .kboard-search { width: 100%; text-align: center; }
        #kboard-venus-webzine-list .kboard-list .kboard-webzine-item { height: auto; }
        #kboard-venus-webzine-list .kboard-list .kboard-webzine-thumbnail { position: static; width: 100%; text-align: center; padding: 10px 0 0 0; width: 100px; height: 80px; }
        #kboard-venus-webzine-list .kboard-list .kboard-webzine-thumbnail .kboard-no-image { line-height: 80px; }
        #kboard-venus-webzine-list .kboard-list .kboard-webzine-wrap { margin: 0; padding: 0; }
        #kboard-venus-webzine-list .kboard-list .kboard-webzine-wrap .kboard-webzine-content { padding-top: 3px; height: 50px; }
        #kboard-venus-webzine-list .kboard-list .kboard-webzine-wrap .kboard-webzine-info { display: none; }
        #kboard-venus-webzine-list .kboard-pagination .kboard-pagination-pages li { display: none; }
        #kboard-venus-webzine-list .kboard-pagination .kboard-pagination-pages li.first-page,
        #kboard-venus-webzine-list .kboard-pagination .kboard-pagination-pages li.last-page { display: inline-block; *display: inline; zoom: 1; }
        #kboard-venus-webzine-list .kboard-pagination .kboard-pagination-pages li.prev-page,
        #kboard-venus-webzine-list .kboard-pagination .kboard-pagination-pages li.next-page { display: inline-block; *display: inline; zoom: 1; }
        #kboard-venus-webzine-list .kboard-pagination .kboard-pagination-pages li.prev-page a,
        #kboard-venus-webzine-list .kboard-pagination .kboard-pagination-pages li.next-page a { padding: 6px 18px; }
        #kboard-venus-webzine-list .kboard-pagination .kboard-pagination-pages li.active { display: inline-block; *display: inline; zoom: 1; }
        #kboard-venus-webzine-editor .kboard-attr-row input[type=text],
        #kboard-venus-webzine-editor .kboard-attr-row input[type=file],
        #kboard-venus-webzine-editor .kboard-attr-row input[type=password] { width: 50%; }
        #kboard-venus-webzine-document .kboard-detail .detail-attr { clear: both; }
    }

    추천 1 비추천
    수정하기 삭제

스토어인기제품 더보기

커뮤니티새로운 글 더보기

블로그
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요