[티스토리 꾸미기] 스킨 편집 Step 3 - 본문 사이즈 변경

개요

1. 내용 부분 사이즈를 조금 넓게 변경하기.

2. 썸네일 정사각형으로 변경

3. 커버 이미지도 정상 노출 처리.

 

작업

1. CSS 수정

/* 변경 max-width 1020 -> 1100 */
.main {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

/* 변경 max-width 640 -> 800 */
.area-main {
    width: 100%;
    max-width: 800px;
}

/* 변경 left 60 -> 30 */
.area-aside .box-calendar .inner-calendar .cal_month a:first-child:before {
    content: '〈';
    position: absolute;
    top: -3px;
    left: 30px;
    width: 30px;
    height: 24px;
    background-color: transparent;
    font-size: 12px;
    padding-top: 5px;
}

/* 변경 right 60 -> 30 */
.area-aside .box-calendar .inner-calendar .cal_month a:last-child:before {
    content: '〉';
    position: absolute;
    top: -3px;
    right: 30px;
    width: 34px;
    height: 24px;
    background-color: transparent;
    font-size: 12px;
    padding-top: 5px;
}

/* 변경 display 주석처리 */
.article-type-common .thumbnail .img-thumbnail {
    /*display: none;*/
}

/* 변경 height 108 -> 160 */
.article-type- .thumbnail,
.article-type-thumbnail .thumbnail {
    width: 160px;
    height: 160px;
    margin-left: 40px;
}

/* 변경 max-height 40 -> 62 */
/* 변경 webkit-line-clamp 2 -> 3 */
.article-type- .summary,
.article-type-thumbnail .summary {
    max-width: 620px;
    max-height: 62px;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.53;
    -webkit-line-clamp: 3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
	 	word-break: break-word;
}

 

2. common.js 수정

if(thumbUrl){
    if($(this).hasClass('article-type-crop')){
        thumbType = 'S640x460'
    }
    else if($(this).hasClass('article-type-thumbnail')){
        thumbType = 'S160x160';
    }
    else if($(this).hasClass('article-type-poster')){
        thumbType = 'S200x200';
    }
}