본문 바로가기
수익형 블로그/티스토리

티스토리 북클럽, 사이드바 너비조정 총정리

by 여의도 제갈량 2021. 9. 10.
반응형

티스토리 북클럽(book club) 스킨의 가장 큰 장점은 바로 사이드바가 있다는 것입니다. 사이드바를 통해 블로그의 성격을 쉽게 파악할 수 있을 뿐만 아니라 다른 포스팅들을 찾아볼 수도 있기 때문에, 자연스럽게 추가적인 조회수를 확보할 수 있다는 점에서 굉장히 유용합니다. 당연히 이곳에도 광고를 배치하면, 애드센스 수입을 확보할 수 있습니다.

 

 

북클럽의 경우, 사이드바의 디폴트(default) 값이 상당히 작아서 적용할 수 있는 광고의 종류가 제한적일 뿐만 아니라 효과도 상당히 낮은 편입니다. 대형광고의 효율이 가장 좋으므로, 해당 광고를 적용할 수 있도록 사이드바의 크기를 늘려보도록 하겠습니다.

 

참고로 원하는 광고의 크기는 대략 pt 단위로 알고 계실텐데, 이를 % 단위로 변경하는 방법은 다음과 같습니다. 기본적으로 적용되고 있는 블로그의 가로너비는 1080pt입니다. 예를 들어 이중에서 가로너비 300pt의 사이드바를 적용하는 경우를 계산해보면, 300/1080×100=27.7777···라는 값이 나옵니다. CSS는 소수점 15자리까지 삽입할 수 있으므로, 16자리에서 반올림하면 얼추 정확합니다. 따라서 27.777777777777778를 삽입하면 됩니다.

 

저는 300pt를 적용했지만, 솔직히 PC에서 보기에는 250pt가 좀더 괜찮아 보입니다. 이 경우에는 250/1080×100=23.184184184··· 이므로, 소수점 16자리에서 반올림하면 23.184184184184184가 됩니다. 이런 식으로 원하는 너비를 찾아보시길 바랍니다.

 

북클럽 사이드바 너비조정 방법

블로그관리 홈 → 꾸미기 → 스킨편집 → html편집으로 이동한 뒤, 상단에 있는 CSS를 선택합니다. 대략 352번째 줄로 이동해서 #aside {를 찾은 뒤, 하단에 있는 width에서 너비를 수정합니다. 저는 가로너비 300pt를 원하므로, 27.777777777777778을 삽입했습니다.

 

사이드바 가로너비 조정

 

아래와 같이 사이드바의 가로너비가 넓어진 것을 확인할 수 있습니다. 다만, 본문과 사이드바를 구분하는 경계선이 그대로인 탓에 겹치는 부분이 생겨날 수밖에 없습니다. 해결방법은 두가지입니다. ① 경계선의 위치를 살짝 조정하는 방법과 ② 아예 삭제하는 방법입니다.

 

경계선 수정전, 수정후

 

① 경계선을 이동시키려는 경우에는 328번째 줄을 수정하면 됩니다. 제가 실험해보니, 가로너비 300pt의 경우, 220으로 수정하는 것이, 가로너비 250pt는 245로 수정하는 것이 가장 깔끔해 보입니다. (다만, 기존에 스킨을 수정한 적이 있다면, 수치가 조금씩 달라질 수도 있으니, 만약 위의 값이 맞지 않다면, 조금씩 다른 값을 적용해보시길 바랍니다.)

 

사이드바 경계선 수정

 

② 만약 경계선을 조정하는 대신 아예 삭제하는 것을 선택했다해도, 방법은 굉장히 간단합니다. 위 320번째 줄부터 329번째 줄까지를 주석처리하거나 아예 삭제하면 됩니다. 주석처리하는 방법은 여러가지가 있지만, 저는 <!--본문-->을 선호합니다.

 


 

반응형

댓글