티스토리 poster 스킨 이전글,다음글 상하단 여백(공백)줄이기

블로그로 돈벌기 위해서는 인터넷이 되는 컴퓨터만 있다면 충분히 가능합니다.

저는 티스토리로 돈벌기 위해서 즉 애드센스로 수익을 내기 위해서 지난 3년 넘게 제가 터득한 노하우들을 공개하려고 합니다.

하지만 애드센스 승인을 받았다고해서 당장에 수익이 발생하는 구조는 아니라는 것입니다.

오늘의 포스팅 주제는 티스토리 기본 제공 스킨중에 하나인 poster 스킨의 단점 중 하나를 발견했고 그것을 해결한 것을 알려드리고자 합니다.

티스토리 poster 스킨의 단점 중에 하나가 스크롤을 끝까지 내렸을 경우에 하단에 이전,다음페이지 부분 아래 위의 여백(공백)이 너무 넓다는 것이었습니다.

개인적인 생각으로 스크롤을 다 내렸을 경우에 하단광고가 자리 잡고 있다면 가장 효율적인 배치이며 수익에도 영향을 미치지 않을까하는 생각을 해왔었는데요.

그동안은 다른 블로그들에 포스팅을 하느라고 이것을 손볼 기회가 없엇는데 다른 블로그들에 어느정도 글이 써져 있어서 잠깐 손을 보았습니다.1시간 정도.

우선은 필요한 것이 개발자 모드인 F12를 눌러서 거기에 해당되는 부분이 어디인가를 먼저 파악을하는것인데요.

위의 사진을 보시면 아시겠지만 다음 페이지와 이전 페이지를 가리키는 부분에서 마지막 하단부분의 여백이 너무 많은것을 볼 수가 있습니다.

여기 이 여백 or 공백을 지워보는 방법을 해보겠습니다.

이는 html에서는 건드릴 부분이 없으며,css로만 수정이 가능하다는 것입니다.

1.개발자 모드를 작동시킨후에 맨 왼쪽에 위치한 네모안의 화살표 모양을 클릭하고서 수정하고픈 부위에 마우스를 가져다 댄후에 그 부분을 감싸고 있는 부분이 어디인가를 확인해야합니다.

사진을 보시면 아시겠으나,하단 여백을 가리키는 부분은 스킨들마다 다른데 poster 스킨의 경우에는 comments부분과 pagination 이부분입니다.

2.comments 이부분에서 제가 수정을 한것은 max-width:860px; 코멘트의 넓이 부분과 margin:auto 60px;라고 되어져 있는 부분입니다.

이부분의 최대 넓이를 저는 730px;와 마진의 경우에는 0 auto 50px;이렇게 수정하였습니다.

솔직히 comments 이부분은 구지 수정을하지 않아도 무방하지만 완벽함을 위해서 저는 수정을 하였습니다.두번째로 수정을해야하는 pagination 이부분이 중요합니다.

3.pagination 이 부분이 핵심입니다.poster 스킨에서의 하단 또는 최하단 여백과 공백을 줄이거나 없애기 위해서 손보아야 할 부분입니다.

css를 누르고서 윗부분에서 ctrl+f를 사용하여서 pagination을 검색합니다.

그렇다면 사진과 같이 pagination으로 된 여러 부분을 찾으실수가 있습니다.

하지만 다른 부분은 전혀 손댈 필요가 없으며 .pagination {부분에서 max-width:860px;라고 된 부분과 margin:60px auto 160px;라고 선언된 부분을 수정하시면 되겠습니다.

이부분을 수정하고 나니 피시상에서나 모바일상에서 스크롤을 다 내렸을때 마지막 공백 또는 여백이 사라졌는것과 하단광고가 보이는 것을 확인할 수 있었습니다.

max-width:860이부분은 max-width:730px로 수정햇으며,margin부분은 0px auto 50px;로 수정하였습니다.

여기까지하니 사진에서와 보는것과 같이 첫사진에 있던 공백 내지 여백이 사라진것을 확인할 수 있습니다.

860px 이부분은 구지 수정을 안해도 되지만 제 생각에는 본분의 넓이는 600px에서 800px 사이가 가장 적합하다는 판단에서 수정을 한 것입니다.

참고로 말씀을 드리면 다 같은 poster 스킨이라도 수정한 부분에 따라서 마진과 넓이는 다를 수가 있습니다.

여기까지 따라서 오셨다면 poster 스킨 이전글,다음글 상하단 여백(공백)줄이기 완성입니다.좋은 하루 되세요^-^

from http://b.asdn.kr/26 by ccl(A) rewrite - 2021-03-25 19:59:38