티스토리 블로그 공감버튼 에러와 사이드바 에러의 해결 방법

이번에 겪은 티스토리 블로그 에러는 특이한 케이스라서 혹시 또 겪을 분이 계실지도 몰라 제 경우의 해결 방법을 올립니다.

크게 두가지의 증상이 일어 났는데 두개의 증상 모두 하나의 원인때문에 발생한 것이었습니다.

 

 

 

1. PC화면에서만 사이드바가 아래로 내려가 버리는 현상

우측에 사이드바가 있고 좌측에 내용 목록이 있는 블로그의 경우에 우측 사이드바가 좌측 본문이 끝나는 지점의 우측까지 내려가 버리는 현상이 언제부터인가 일어났습니다.

Html 코드와 Css 코드며 티스토리 블로그 설정까지 모두 검토했지만 원인을 찿을 수 없었습니다.

심지어 스킨을 여러차례 교체하고 초기화 시켜보아도 증상이 사라지지 않았습니다.

특이한건, 모바일 화면에서는 정상적으로 보여지고 있었습니다.

 

2. 공감버튼이 뭉개지면서 좌측으로 세로 정렬하는 현상

공감버튼이 하트가 세개로 늘어나면서 텍스트는 모두 날아가고 좌측 수직 정렬로 뭉개지는 현상이 발생하였습니다.

이역시 1번 항목과 마찬가지로 여러가지 방법을 시도해 보았으나 공감버튼 에러 현상의 원인을 찿을 수 없었습니다.

 

3. 해결 방법

거의 일주일을 씨름하다 거의 포기해 갈 무렵 갑자기 플러그인에 의심이 가기 시작했습니다.

왜냐하면 두가지 에러 모두 스킨변경하면서 초기화 소스코드들이 초기화 됐는데도 일어나는 증상이라면 일정한 설정이 유지되는 부분에 원인이 있을 것이기 때문입니다.

스킨을 변경하더라도 유지되는 설정이라면 티스토리 블로그의 일반적인 설정과 플러그인 두가지 뿐입니다.

먼저, 티스토리 블로그의 일반설정에서는 하나하나 검토해 봤지만 특이점이 없었습니다.

그렇다면 분명 플러그인인데 가장 의심가는 것이 자체 코드를 가진 플러그인이었으며 그것으로는 티스토리에서 지원하는 애스센스 반응형 플러그인 이었습니다.

메모장에 상단 하단의 코드를 백업해 두고 플러그인을 해제해 보았습니다.

그러자, 그동안 애먹었던 두가지 문제가 모두 해결되었습니다.

애드센스 반응형 플러그인에 들어간 광고소스코드와 티스토리 블로그 소스가 어디선가 충돌을 일으켰던 것 같습니다.

플러그인의 소스코드 상단 아니면 하단중 하나씩 다른 광고코드로 바꾸어 가며 테스트해보면 문제를 일으키는 코드가 상단인지 하단인지 밝혀낼 수 있을 것입니다.

문제는 광고의 크기가 본문을 침범할 정도로 크던가, 사이드바의 폭이 그런 경우 등에 문제가 발생하는 것 같습니다.

사이드바의 크기를 html편집에서 300에서 290으로 폭을 약간 줄여서 문제를 해결했습니다. 스킨에 따라 해결방법이 다를 수도 있을 것 같습니다.