티스토리 수익형 블로그의 디자인 스킨 고급 설정 방법을 알아보세요. 광고 배치와 썸네일 최적화 등으로 블로그 수익을 극대화할 수 있습니다.
티스토리 수익형 블로그 만들기 – 디자인 스킨 고급 설정
그동안 수익형 블로그를 운영하기 위해 검색엔진 최적화를 위한 기본적인 사항들을 진행 중입니다. 에드센스를 통해 수익화를 하기 위해서는 광고의 배치도 중요합니다.
광고를 메인, 홈, 상세화면, 사이드바 영역에 어떻게 배치하느냐에 따라 블로그 수익이 차이가 나기 때문에 광고의 배치를 어떻게 자신의 글과 자연스럽게 나타나도록 할 것인지 고민과 테스트가 필요합니다.
물론, 블로그의 설정은 어느 정도 중요하지만 결국 블로그는 광고를 위해서만 사용하는 것이 아닌, 자신의 브랜드를 만들고 사업화하기 위한 질 좋은 콘텐츠가 중요합니다.
1. 상단 영역 최적화
기본 Book Club 상단 블로그명 블로그명을 상단에 표시하는 것이 필요하겠지만, 불필요하게 상단을 제거해 조금이나마 빠른 로딩을 유도합니다. 필요에 따라 그냥 둬도 상관없습니다.
블로그 상단은 광고 표출이 가장 잘되는 곳으로 이 부분을 최대한 활용하는 것이 필요합니다.
html코드 복사<h1>
<a href="https://dragonwisdom.tistory.com/">
<s_if_var_logo>
<img src="" alt="리워드 앱-3분전">
</s_if_var_logo>
<s_not_var_logo>
리워드 앱-3분전
</s_not_var_logo>
</a>
</h1>
- HTML 편집
- Ctrl + F 키를 눌러 “blog_link“를 검색
- 또는 30라인 ~39라인 삭제
- 적용
변경 확인
2. 홈 화면 콘텐츠 리스트 최적화
썸네일 관련해서는 CSS 편집이 필요합니다. 홈 화면 포스팅 썸네일 크기를 변경하여 노출 비율을 1:1로 만듭니다. 기본 설정 16:9 비율보다 1:1 비율이 가독성이 좋으며 리스트 타입을 뉴북으로 설정합니다.
- Ctrl + F 키를 눌러 “list-type-thumbnail”을 검색
- 또는 2260라인 ~2261라인에서
width: 126px / height: auto를width: 150px / height: 150px로 변경 - 꼭 적용을 클릭합니다.
썸네일의 형태는 정사각형으로 바뀌었을 것입니다. 하지만, 썸네일에 표시되는 이미지가 잘리거나 비율이 달라져서 표현됩니다. 그 이미지 비율을 정사각형에 딱 들어맞도록 조정해야 합니다.
- HTML 편집 수정
- Ctrl + F 키를 눌러 “index_article_rep”를 검색
- 또는 389라인 ~ 404라인 중 394라인에서
C 230x300으로 되어 있는 것을R200x200으로 변경 - 꼭 적용을 클릭합니다.
- 확인
3. 썸네일 이미지 표출 설정
기본 설정은 썸네일 이미지가 전체 이미지가 아니고 부분 이미지로 표출됩니다.
- CSS 편집
- Ctrl + F 키를 눌러 “post-item”을 검색
- 또는 1156라인 ~ 1161라인 중 1159라인~1161라인 삭제
- 꼭 적용을 클릭합니다.
- 확인
수정을 해도 썸네일 표시 영역 하단에 약간의 공백이 생깁니다. 이 부분도 처리합니다.
- CSS 편집
- Ctrl + F 키를 눌러 “post-item. thum”을 검색
- 또는 1146라인 ~ 1155라인 중 1153라인의
padding-bottom을 56%로 수정 - 꼭 적용을 클릭합니다.
마무리
이번 포스팅에서는 수익형 블로그 운영을 위한 티스토리 수익형 블로그 만들기 – 디자인 스킨 고급 설정에 대해 알아보았습니다. 다음 포스팅에서는 수익형 블로그를 위한 글 제목 상단부 설정에 대해 포스팅하겠습니다.
클릭을 유도하는 문구:
- 수익형 블로그 디자인 설정하기, 지금 시작하세요 설정 가이드
- 더 많은 블로그 수익화 팁 알아보기 블로그 팁 확인하기