스킨변경후 "콘텐츠 폭이 화면 폭보다 넓음" 해결 방법

스킨 변경 후 일어나는 구글 콘솔 상의 오류 문제는 대표적으로 아래의 3가지 유형이 있습니다.

- 클릭할 수 있는 요소가 서로 너무 가까움
- 콘텐츠 폭이 화면 폭보다 넓음
- 텍스트가 너무 작아 읽을 수 없음

 

이문제는  크게 삽입된 표, 폰트 크기, 이미지 크기, 태그 문제 등 네 가지 정도로 나누어 생각해 볼 수 있습니다.

제가 해결할때 이것저것 해보다 성공한 방법들을 나열해 보겠습니다.

 

- 도표나 표가 가로폭이 넘어가는 경우

삽입된 표의 경우에는 코드 수정의 방법이 존재하는 것 같지만 각각의 태그마다 수정해주는 게 힘들고 적용이 안 되는 경우도 존재해서 캡처해서 이미지화하는 식으로 해결했습니다.

코딩을 통해 개별적으로 해결해 보고 싶으신 분들은 아래의 포스팅을 참조해 보시기 바랍니다.

 

itfix.tistory.com/377

티스토리 표만들기에 의해 만들어진 표 잘리는 현상 해결 방법

itfix.tistory.com/485

티스토리에서 좌측 정렬된 표 중앙 정렬 시키기

 

- 텍스트가 너무 작은 경우

포스팅의 일부분에 코드들이 엉키면서 의도하지 않게 폰트가 작아져 버린 부분들이 존재하는 포스팅이 몇개 존재했습니다. 이 경우에 본문을  복사해서 html 코드 페이지에서 붙여 넣기 하는 방식으로 코드가 엉키고 폰트가 작아진 부분을 해결하였습니다.

이 문제를 해결하는 과정에서 느낀 점이지만 html코드가 본문 제목 태그나 다른 태그들과 엉켜서 코드 페이지가 너무 지저분하게 돼버린 경우 현재의 스킨 설정에 맞게 단순화시켜서 정리 작업을 해주는 것도 필요한 작업인 것 같았습니다.

 

- 이미지의 가로폭이 너무 큰 경우

이전에는 이상없던 이미지가 스킨 변경 후에 사이드바에 걸쳐버린다든가 하는 문제가 발생하였습니다. 일일이 이미지를 수정했지만 양이 많을 경우에는 html 편집의 css탭에 아래의 태그를 추가로 집어넣으면 됩니다.

 

/*화면폭 겹칩 해결을 위한 코드*/
img {
  max-width: 100%;
  height: auto;
}
span.imageblock {
  max-width: 100%;
  height: auto;
}

/* 위의 코드 삽입에 따른 썸네일 이상현상 해결코드 */
#ttCanvas img {
  max-width: none;
}

 

- 태그의 문제

티스토리 태그가 검색어 기능을 하는 것이 아님은 이전 포스팅에서 설명한 바 있습니다.

내부적으로 카테고리에서 모두 잡아내지 못하는 부분에 대한 보조적인 케테고리 개념으로 해당 태그를 클릭해 그 내용에 관련된 글들을 모아 보는 기능이라고 설명드린 바 있습니다.

따라서, 복잡하고 긴 태그, 불필요하게 많이 들어간 태그 들은 정리가 필요할 수 있습니다. 

가능하면 띄어쓰기가 없고 간단한 단어로 너무 많지 않게 태그를 넣는 것이 좋다고 생각합니다. 이는 스킨변경후에 모바일 최적화 부분에서 문제를 일으킨 태그가 들어간 주소들에서 일어난 문제들을 해결하고 느낀 점입니다.