게시글 목록 모바일 스킨 편집 수익화 셋팅 정리 티스토리 북클럽 (모바일용)

Contents

이전 데스크탑 버젼을 다 진행했다면 모바일용 버젼은 따로 설정해줘야 합니다.

이번 글은 쉽게 코드만 붙여넣으면 그대로 적용되게 작성했습니다.

코드를 그대로 적용하기 위해서는 이전글 4. 게시글 목록 북클럽 스킨 편집하기 ( 데스크탑용) < 해당 글을 먼저 보고 적용한 상태여야 합니다.

셋팅 설정에 있어서 반복적으로 들어가는 내용은 본문에 포함하지 않고 따로 정리해 뒀습니다.

1. 수정하고 싶은 부분 코드 찾는 방법 (F12 개발자 모드 설명)

2. 티스토리 HTML/CSS 스킨 편집 페이지 경로

1. 게시글 목록 스킨 편집 코드 적용전

위 사진처럼 모바일 화면에 딱 맞지 않고 사진 위치 등등 맞지않은 것을 확인할 수 있습니다.

2. 스킨 편집 코드 붙여 넣기

해당 코드를 CSS 편집창에서 맨아래에 그대로 붙여넣기 해주시면 적용됩니다.

(시간이 되면 각 코드별로 어떤부분이 적용되는지 설명하는 내용을 작성해보겠습니다.)

/* 모바일용 게시글 목록 코드 */
@media screen and (max-width: 767px){

.list-type-thumbnail .post-item .thum img {
    float: left;
    width: auto;
		height: 110px;
    margin-left: -6px;
    margin-right: 7px;
    }
/*요약글 가리기*/
.list-type-thumbnail .post-item .excerpt {
		display: none;
}
/*모바일 제목 안짤리게 설정*/
    .list-type-thumbnail .post-item .title {
        white-space: normal;
    }
}
/*화면 꽉차게*/
#tt-body-index #content>.inner {
        padding: 0 0px;
    }
/*모바일 양옆으로 안넘어가게 잡아줌*/
.list-type-thumbnail .post-item {
    float: none;
    overflow: hidden;
    width: auto;
}
    }

위 코드를 복사해서 붙여넣어 주세요.