[HTML/CSS] #2 . 티스토리 북클럽 스킨편집 - 인피드광고와 어울리게 썸네일 간격 수정함

문제발견

애드센스 광고단위에서 확인가능한 클릭률 중 인피드광고 클릭률이 저조한것을 확인.
인피드 광고의 크기, 위치와 실제 내 썸네일과 차이가 커서 광고와 구분짓기가 쉽다는게 클릭률이 낮은 이유인것 같아서 수정해보려고 함.

해결방법

① 썸네일의 날짜 HTML을 비활성화 함. 아예 삭제해버리면 필요할 때 못찾으니 <!--- 코드---!> 표시해줬음.

 <span class="date">2022. 9. 23.</span>

위는 북클럽스킨 썸네일의 날짜를 나타내는 부분 HTML코드이다.


② 인피드 광고와 썸네일 제목과 본문요약글에 왼쪽 정렬을 줘서, 인피드 광고와 자연스럽게 어우러지도록 CSS수정함.

.list-type-thumbnail .post-item .title {

위는 썸네일 제목글 부분 CSS코드이다.

.list-type-thumbnail .post-item .excerpt {

 

위는 썸네일 본문 요약글 부분 CSS코드이다.

margin-left: 9px;

각각 하단에 왼쪽 간격을 주는 코드를 넣어줬다. 숫자를 이것저것 적용해보니 9px가 가장 적절했다.

결과

티스토리 썸네일 왼쪽 간격을 인피드 광고와 맞게 조정하고 날짜부분을 삭제하였더니 자연스러워졌음.
날자를 아예 삭제하고싶은게 아니라, 날짜 부분에도 간격을 주고 싶은데 방법을 모르겠음. 날짜 왼쪽 간격 주는 방법은 좀 더 찾아보고 찾게된다면 다시 날자 표시되게 할 예정.


이미 스킨을 여러번 조절했기때문에, 기존 북클럽 스킨 유저들과 적용 후 모습이 다를수 있음.
하지만 적용되는 코드부분은 동일하니 숫자는 조절해보면서 적용시켜보시길 추천해드려요.