안녕하세요, 부자아빠(Rich papa)입니다!
지난번에 섬네일 이미지를 정사각형으로 뜨게하는 법을 포스팅했었죠.
2021/02/07 - [분류 전체보기] - [티스토리 Tip]티스토리 정사각형 섬네일 이미지 표출방법 : odyssey : 오디세이 스킨
섬네일은 정사각형으로 볼 수 있지만, 목록형이 아닌 포스터형으로 블로그 설정이 변경되는데요
애드센스 승인을 위해서는 블로그 설정을 "기본 목록스타일"로 유지하는게 좋다고 하네요
목록형으로 되어있을 경우 해당 블로그에 어떤 포스팅이 있는지 UI/UX가 구독자에 친화적이고 한번에 알 수 있어 그런것으로 보입니다. 아마 구글 서칭봇이나, 구글에서 검토하는 과정에서 로직화된 기준이 있겠죠?
(해당 정보는 애드센스 헬프센터 내 등급 높은 파트너 답변에서 참조했습니다)
:: 목록형 세팅 방법 ::
1. 꾸미기 > 스킨편집
2. 기본 목록 스타일을 "베이직" 타입으로 설정
다만 이렇게 설정을 하면 모바일과 PC에서 아래와 같이 정사각형 이미지가 짤려 나오는 문제가 다시 발생합니다.
:: 목록형 세팅에서 정사각형 섬네일 나오게 하는 법 ::
1. 꾸미기 > 스킨편집
2. HTML 편집
3. CSS탭에서 2458, 2458 행에 있는 width: 80 -> 90~100, height: 80 -> 90~100 으로 수정
4. CSS탭에서 2161행 .article-type-common . thumbnail.img-g .article-type-common .thumbnail .img-thumbnail }
에서 { }안에 /* display: none; */ 를 넣어줍니다.(주석처리하는 문장)
5. CSS탭 제일 마지막 행에 아래 코드를 넣어줍니다.(텍스트 복사해서 넣으시면 되요)
.link-article>.thumbnail{ background-image:none !important; } .img-thumbnail { width:125px !important; height:125px !important; margin-left:20px; } @media (min-width: 320px) and (max-width: 767px) { .img-thumbnail { width:100px !important; height:100px !important; margin-left:0px; } }
출처: https://sidongblog.tistory.com/568 [퀴즈 다모아 (성격 연애 심리테스트, mbti, 넌센스)]
아래와 같이 PC화면과 모바일 화면에서 모두 정사각형 섬네일로 표현이 되는 것을 볼 수 있습니다.
(해상도에 따라 아래, 위 섬네일이 겹치는 경우가 있으니, 2번의 80~100 사이 px 사이즈를 잘 조절해보세요~)
그리고 섬네일은 크기와 상관없이 꼭 비율을 가로세로 1:1로 정사각형으로 만들어서 올리셔야해요!
직사각형은 짤립니다.
궁금하신 점 댓글 달아주시면 아는 범위에서는 최대한 알려드리겠습니다!
구독도 부탁드려요!