티스토리 북클럽(Book Club) 스킨 사이드바 크기 늘리기

정말 오랜만에 티스토리에 접속했더니 티스토리가 업데이트 되었군요.

Whatever, Book Club, Poster, Letter, Portfolio 5개의 티스토리 반응형 공식 스킨도 추가 되어 있습니다.

스킨을 아직 바꾸진 않았지만 스킨을 바꿀 계획을 하고 있습니다.

우선 제 블로그는 2단 구조로 왼쪽에 본문, 오른쪽에 사이드바가 위치하고 있으며 '커피향처럼' 뿐만 아니라 광고를 게재하는 많은 블로거들이 선호하는 구조이기도 합니다. 

새로나온 티스토리 스킨을 살펴보다 보니 가장 마음에 드는 건 북클럽 스킨!

티스토리 공식 반응형 북클럽 스킨

 

https://starcube.tistory.com/

스타큐브

사이드바도 있고 모양이 깔끔하고 광고를 게재하기에 정말 좋은 모양입니다.

그러나 커피향처럼 블로그가 아닌 제가 사용하는 테스트용 블로그에 적용해보니 사이드바가 너무 작습니다.

대략 사이드바의 가로 크기가 230px 정도로 계산됩니다.

아래 구글에서 제공하는 효율적이고 선호하는 광고 내용을 보면 사이드바에는 300*600의 광고가 제일 좋다고 합니다.

그래서 사이드바의 크기를 300px 정도로 크기를 늘리기로 했답니다.

그리고 사용자의 브라우저 크기가 1080px보다 작을때 사이드바 폭을 300px로 한다면 본문 크기가 작아지기 때문에 250px로 변경 할꺼예요.

1080px 보다 해상도가 크면 300px, 1080px 이하이면 250px.

 

아래 구글에서 안내하는 실적이 우수한 광고 크기를 보면 250px의 크기도 실적이 우수하다고 합니다.

https://support.google.com/adsense/answer/6002621?hl=ko

https://support.google.com/google-ads/answer/7031480?hl=ko

 

북클럽 스킨의 기본 구조는 다음 그림과 같이 되어 있습니다.

텍스트는 구조 태그의 "id"입니다. 이미지를 만들다가 오타가 나버렸네요. "sidebar -> aside"입니다.

 

위의 구조를 참조하여 "블로그관리(https://블로그도메인.tistory.com/manage) -> 스킨 편집 -> html 편집 -> CSS"로 이동하여 CSS 편집기를 열어 주세요.

351 #aside {  352     float: right;   353     width: 21.296296296296296%;           (300px / 1080px * 100 = 27.777777777777778) <- 이렇게 계산되어서 27.xxx%가 나옵니다. 이걸 적어 넣으시면 안되요!  354     padding: 75px 0 32px;  355     box-sizing: border-box;  366 }

      353 라인의 "width: 21.296296296296296%;" 이 부분을 "width: 27.777777777777778%"으로 고쳐 주세요. (소수점 15자리)

 

변경 사항을 저장하고 확인해 보면 다음과 같이 크기가 변경 된 것을 확인 할 수 있습니다.

 

이미지를 보시면 사이드바에 회색 세로 라인이 겹쳐져 있습니다. 이 부분도 수정을 해야겠죠?

319 #container .content-wrap:before { 320     content: ""; 321     position: absolute; 322     top: 0; 323     left: 50%; 324     z-index: 10; 325     width: 1px; 326     height: 100%; 327     margin-left: 255px; 328     background-color: #eee; 329 }

327 라인의 "margin-left: 255px;" 부분을 "margin-left: 215px;"으로 수정 해주세요.

이 부분의 구조에 대해서 간략하게 그림으로 설명하면 다음과 같습니다.

그리고 이제 사용자의 화면에서 브라우저 크기가 1080px보다 크기가 작으면 사이드바의 크기는 "250px" 크기로 변경되도록 할꺼랍니다.

아래의 부분을 찾아서 

"@media screen and (max-width:1080px) { <- 2359 라인"

아래와 같이 위에서 설명한 #aside 부분을 복사해서 넣은 다음 width를 "23.148148148148148%"로 고쳐주세요.

( 250 / 1080 * 100 = 23.148148148148148148... )

@media screen and (max-width:1080px) {    #aside {       float: right;        width: 23.148148148148148%;       padding: 75px 0 32px;       box-sizing: border-box;   }

이렇게 수정하고 저장하면 사이드바 크기 늘리기가 끝났어요.

 

 

 

앗, 그런데 북클럽 스킨의 사이드바는 오른쪽에만 위치 할 수 있는게 아니라 스킨 설정에서 왼쪽에 위치 시킬 수도 있답니다.

사이드바를 왼쪽으로 이동하면 사이드바 크기는 300px정도로 나오는 거 같은데 사이드바와 본문의 세로 구분선 위치가 맞지가 않네요. 이 부분도 마저 수정을 해보도록 하죠~

2212라인을 보시면 -256px로 되어 있습니다. 이 부분을 아까 215px로 수정한 것 처럼 "-216px"로 수정해 주세요!

2211 .layout-aside-left #container .content-wrap:before {  2212     margin-left: -256px;  -> margin-left: -216px 로 수정  2213 }

이렇게 해서 사이드바의 크기 조정이 끝났습니다.