티스토리 사이드바 10PING(텐핑)길이 오류 해결하기

티스토리 사이드바에 텐핑을 추가하고 지금까지는 이런적이 없었는데 언제부터인지 출력되는 광고 크기에 비해서 사이드바 길이가 너무나 길게 출력이 되는 오류가 발생하기 시작을 했습니다. 출력되는 광고의 길이가 100px이라고 치면 텐핑의 사이드바 공간 길이는 400px정도로 보여지고 있는 오류입니다.

갑자기 왜 이런 오류가 발생하기 시작을 했는지 원인은 모르지만 임시방편으로 길이를 지정하는 코드를 입력해서 해결하는 방법을 알려드리도록 하겠습니다. 

텐핑 선배등록 pjsggang@gmail.com

---

갑자기 발생된 오류

언제부터인지 PC로 티스토리 사이드바를 보면 항상 발생되는건 아니지만 텐핑 광고가 출력이 되는 사이드바 공간의 길이가 쓸데없이 너무나도 길게 출력이 되고 있었습니다. 모바일에서는 어떻게 보이는지 확인을 해보니 사이드바 공간의 길이가 길게 보여져서인지 모르겠지만 텐핑 광고가 출력이 안되는 현상이 발생되더라구요.

얼마나 길게 보이고 있는지 캡쳐를 해보았습니다. 너무 길어서 중간에 살짝 줄인 길이가 이정도네요. 텐핑 광고 3개정도 들어갈만한 길이가 아닌가 싶네요? 왜 갑자기 이런 오류가 발생이 되는지 모르겠습니다. 

---

텐핑 사이드바 길이를 설정하자

이 오류를 어떻게 하면 해결할 수 있을지 고민을 해보았습니다. 텐핑 광고의 길이가 모두 같지는 않지만 제 티스토리 사이드바에 출력되었던 텐핑 광고를 보았던 기억을 해보니 광고의 길이가 2종류였던것 같다는 생각을 하게 되었습니다. 그래서 그 중 가장 길이가 길었던 광고가 잘 보이는 길이로 사이드바의 길이를 고정하면 어떨까 하는 생각을 하였습니다. 길이를 고정하는 코드가 적용이 잘 될까 하는 고민을 했지만 결과는 다행스럽게도 잘 되었습니다.

블로그관리에서 꾸미기 항목에 있는 HTML/CSS편집을 클릭해 주세요.

HTML에서 ctrl + f를 눌러 검색을 열고 tenping을 입력해 검색을 해주세요.

사이드바에 적용한 텐핑 코드를 찾고 살펴보니 붉은색으로 표시한 width: 300px이 보였습니다. width는 가로 길이를 설정하는 코드입니다. 텐핑 코드에 가로 길이를 설정하는 코드는 있지만 세로 길이를 설정하는 코드는 없었는데요. 아마 광고마다 높이가 다르기 때문에 따로 코드로 길이를 적용 하지 않은것 같습니다. 그래서 최근들어 사이드바 길이가 길게 보이는 오류가 발생되는게 아닌가 하는 생각을 하게 되었습니다. 해결을 하겠다고 길이를 고정하는 코드를 텐핑 광고에 적용해도 되겠지만 혹시나 코드를 건들였다고 불이익을 당하지 않을까 하는 불안감이 들어 텐핑 광고 코드는 건들이지 않고 사이드바에 길이를 고정하는 코드를 입력하는걸로 하였습니다.

붉은색으로 표시한 height: 470px이 해결을 하기 위해서 입력한 코드입니다. height는 세로 길이를 설정하는 코드입니다. 텐핑 광고 코드에 입력을 하는게 아닌 panel-body를 설정하는 코드인 style영역에 입력을 하고 저장을 해주시면 됩니다. 470px는 제가 적당하다고 판단한 길이입니다. 470 그대로 사용하셔도 되고 숫자를 조금씩 변경해서 적용해 보고 적당한 크기를 찾으셔도 됩니다.

---

적용이 되고난 후

처음에 길이를 고정하는 코드를 입력해도 적용이 될지 고민을 하면서 시작을 했지만 결과적으로 잘 적용이 되었습니다.

제가 보았던 텐핑 광고중 길이가 가장 길었던 광고에 맞게 변경을 했더니 딱 맞게 적용이 되었습니다. 광고 크기가 조금 작은게 출력이 되면 아래쪽에 빈 공간이 조금 발생하겠지만 어쩔수 없죠. 어쨌든 저처럼 텐핑 사이드바 공간이 이상할만큼 길게 보이는 오류가 있으신 분들은 저처럼 해결을 해보시길 바랍니다.