티스토리 hello스킨 이미지크기가 본문영역을 벗어날때

hello스킨 이미지크기가 본문영역을 벗어남

티스토리글을 모바일에서 작성하는 경우는 거의 없기 때문에 사실 모바일버전의 환경에 항상 신경을 쓸 수가 없었습니다.

우연히 제 블로그를 모바일에서 접속하여 잘못된 기능이 없는지 확인을 하고있었는데 이미지의 크기가 본문영역의 크기보다 크면 아예 화면 범위 밖으로 비율이 커져서 이미지의 전체 부분을 확인할 수 없었습니다.

 

 

블로그 스킨편집

이미지에 관한 부분은 스킨에따라서 코드가 다르지만 hello스킨(4.13버전 사용중)에서는 간단하게 수정할 수 있습니다.

블로그 관리의 스킨편집으로 이동하여 css부분으로 이동해 주세요.

 

[변경 전]

#content .contents_style figure.imageblock.alignCenter,
#content .contents_style figure.imagegridblock {
  max-width: none !important
}

css에서 ctrl +f 단축키를 입력한 뒤 화면의 스타일을 검색해 주세요. 전체 코드를 복사하여 검색하는 것이 아닌 첫 번째 줄을 복사하여 붙여 넣으면 빠르게 찾을 수 있습니다

 

[변경 후]

#content .contents_style figure.imageblock.alignCenter,
#content .contents_style figure.imagegridblock {
  max-width: 100% !important;
  margin-left: auto!important;
  margin-right: auto!important;
}

찾은 스타일 부분의 코드를 위에처럼 변경해 준 뒤 적용버튼을 반드시 눌러주세요.

 

위에처럼 변경한 뒤 적용을 누른 뒤 모바일 환경의 페이지로 이동해 주세요.

 

 

이미지 크기 자동맞춤

기존에 최대 크기가 따로 설정되어있지 않는 코드였는데 css부분을 수정하고 모바일환경에서 페이지를 새로고침하니 본문폭에 맞춰서 이미지의 사이즈가 맞춰지는 걸 확인할 수 있습니다.