티스토리 블로그 스킨 odyssey 썸네일 CSS 수정하기(사이즈,비율)

티스토리 odyssey  썸네일 CSS 수정하기

 

 

 

1. 먼저 티스토리 블로그 관리 - 꾸미기 - 스킨 편집을 선택한다.

기본 스킨을 사용하면 아래와 같이(좀 과장시켰어요) 원하는 크기의 썸네일이 아닐 수가 있다.

원하는 크기로 변경을 하자

 

 

2. .article-type-thumbnail .thumbnail 을 찾아간다.

Ctrl + F를 누르면 찾을수 있는 검색창이 나타난다.

.thumbnail 등을 입력하여 아래 이미지와 같은 곳으로 찾아간다.

 

height : 80px 사이즈를 width:150px과 똑같이 맞추면 모양이 정사각형이 된다.

 

@media screen and(max-width:1060px)안에 있는 부분을 수정하면

폭이 1060px 보다 작을때의 화면(모바일 등) 썸네일에 적용된다

 

but 이미지 자체가 잘리는 부분이 여전히 존재한다.

.article-type- .thumbnail,
.article-type-thumbnail .thumbnail {
    width: 150px;
    height: 150px;
    margin-left: 40px;
}

정사각형은 되었지만 이미지가 잘린다

 

3. 여전히 잘린 썸네일의 이미지를 잘 보이게 하자

.img-thumbnail 을 찾아가면 display: inline-block;으로 입력되어 있다.

/* 내용 주석*/ 을 사용하여 주석처리를 해주고

2번의 내용과 같은 값을 넣어주자 - 간단하게 적용

 

.article-type-common .thumbnail .img-thumbnail {
    /*
    DG 수정 썸네일 사이즈 설정 
    display: inline-block;
    */
   width: 150px;
   height: 150px;
   margin-right: 40px;
   
}

이미지 전체를 잘림 없이 넣을수있음

 

 

4. 웹 화면 사이즈 1060px 보다 큰 화면에서는 정상적으로 표시되지만 모바일 화면에선 다르게 보인다.

 

@media screen and (max-width: 1060px) 블록 안에 있는 또 다른

. article-type-thumbnail. thumbnail을 찾아가 준다. 

사이즈를 줄여 90px을 입력해주고 margin값도 18px로 적용해준다.

 

그리고 3번에 적용한 .img-thumnail을 전체 복사한 뒤

@media 블록 안에 같이 복사해주고 사이즈를 90px , 18px로 적용해주면

아래 이미지와 같이 정상적으로 표시된다

반응형웹으로 인해 모바일 화면에선 이상하게 보인다

미디어 블럭에 넣어주어야 반응형웹을 적용할수있다

아래 소스와 같이 넣어 주면 된다.

/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {
    .article-type-,
    .article-type-thumbnail {
        margin-bottom: 19px;
    }

    .article-type-common .thumbnail .img-thumbnail {
        /*
        DG 수정 썸네일 사이즈 설정 
        display: inline-block;
        */
        width: 90px;
        height: 90px;
        margin-right: 18px;
    
    }
    .article-type- .thumbnail,
    .article-type-thumbnail .thumbnail {
        width: 90px;
        height: 90px;
        margin-left: 18px;
    }

    .article-type- .article-content,
    .article-type-thumbnail .article-content {
        padding-top: 2px;
    }

    .article-type- .title,
    .article-type-thumbnail .title {
        font-size: 15px;
        font-weight: 400;
        line-height: 1.27;
    }

    .article-type- .summary,
    .article-type-thumbnail .summary {
        margin-bottom: 0;
        font-size: 12px;
        line-height: 1.42;
    }
}

 

 

썸네일 CSS수정 후 블로그 모습