본문 바로가기

티스토리스킨/팁.활용.확장

티스토리 공식 배포 스킨의 카테고리 다른글 보기 링크가 클릭되지 않는 경우 해결 방법 안내

현재 배포되고 있는 티스토리공식 스킨의 일부 CSS가 티스토리 애드센스 위젯중 푸터(footer) 애드센스 위젯과 충돌 현상이 있습니다.


최초 포스터 스킨 배포 시점에는 없었던 버그였으나

패치후 새로 배포되고 있는 스킨에서 나타나고 있는 현상입니다.


증상이 나타나는 원인은

티스토리 위젯 중 푸터에 붙이는 애드센스 위젯의 높이값 설정이 비정상적으로 커지면서 바로 밑에 있는

"카테고리의 다른글" 영역 위를 덮으면서 카테고리의 다른글 링크가 클릭되지 않는 것입니다.


티스토리 애드센스 푸터 위젯을 사용하지 않으면 나타나지 않는 현상입니다.




푸터 애드센스 위젯 영역이 카테고리의 다른글 영역을 덮은 상태



현재 배포되고 있는 포스터 스킨에는 티스토리 애드센스 위젯을 위한 "iframe-wrap" 클래스 정의가 추가로 들어가 있습니다.







최초 배포 당시에는 없던 클래스이고, 애드센스 위젯 배치 문제가 생기면서 레퍼런스 스킨이기 때문에 추가된 것으로 보입니다.


style.css 에서

Poster 스킨 기준으로 배포스킨 원본 1383행 (다른 공식 배포 스킨은 클래스 명으로 검색)

또는 ".entry-content .iframe-wrap" 클래스를 찾으면 1개만 나옵니다.



.entry-content .iframe-wrap {
    positionrelative;
    height0;
    padding-bottom56.25%;
}


이렇게 정의되어 있고


padding-bottom: 56.25%;


삭제


height: 0; -> height: 100%;


로 변경해주면 됩니다.

  • 몇번을 해결하기 위해 검색을 해왔었는데 어포스트님 덕분에 한방에 해결되어 너무 기분 좋네요^^그 동안 제컴퓨터 문제라고 생각했었는데 해결하고 나서 이탈률이 줄어들 것을 기대해 봅니다. 정말 감사합니다~!!^^

  • 비밀댓글입니다

    • 현재 배포되는 Poster 스킨 기준으로
      style.css
      에서

      #header .mobile-menu {
      을 검색하면 2개가 나옵니다.
      132행은 공통
      1843행은 모바일용
      입니다.
      스킨을 커스터마이징을 하면서 펼침메뉴(햄버거아이콘)을 상단 왼쪽에 고정을 시키셨습니다.

      133행에
      position: absolute; -> position: fixed;

      애드센스를 붙이면 상단 픽스 광고가 붙으면서 상단에 고정한 메뉴 아이콘이 가려지게 됩니다.

      애드센스를 빼지 않고 구지 해결하자면 모바일에서는 메뉴펼침 아이콘이 상단에 고정이 되지 않도록 구분을 해주면 됩니다.

      1843행 밑에(모바일용 #header .mobile-menu { 클래스 속성으로)

      position: absolute;

      를 추가해주면 모바일에서는 상단 고정되지 않고 블로그 제목 옆에 붙어있게 됩니다.
      구조상 애드센스를 유지하면서 가져지는걸 피하고 싶으면 이 방법이 유일해 보입니다.

  • 감사합니다^^ 어포스트님에게 매번 도움만 받네요^^;;


닫기