해당글은 hello 스킨을 기준으로 작성되었습니다.
서론
블로그의 스킨을 바꾸면 포스트의 이미지와 본문 폭이 안 맞는 경우가 있습니다.
이런 식으로 이미지가 본문폭을 벗어나 더 크게 나와서 가독성을 해치는 경우가 있습니다.
이런 경우 티스토리에서 기본 제공하는 <본문 폭 맞춤> 기능을 이용해서 이미지 사이즈를 조정할 수는 있지만,
포스트 작성 화면에서는 이미지가 본문폭보다 큰지 알 수 없어 미리 보기를 왔다 갔다 해야 한다는 번거로운 점이 있습니다.
그렇다고 모든 이미지를 일괄적으로 <본문 폭 맞춤>으로 지정하게 되면 크기가 본문폭 보다 훨씬 작은 이미지의 경우 강제로 크기가 커져 가독성을 해치게 됩니다.
그렇다면 항상 <가운데 정렬> 을 사용하면서 본문폭 보다 큰 사이즈의 이미지만 크기를 줄이도록 해야 합니다.
이미지 사이즈 조절을 위한 코드 수정하기
스킨 편집 > CSS 창을 엽니다.
image로 검색해 해당 부분을 찾아줍니다. 완전히 똑같지 않더라도 aligncenter을 검색하여 비슷한 부분을 찾습니다.
이런 형태일 수 도 있습니다.
{} 중괄호 안을 지우고 다음과 같이 수정해 줍니다.
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
다시 저장 후 새로고침을 하면 이제 본문폭에 맞게 이미지가 나오는 것을 확인할 수 있습니다.
만약 안된다면
위의 코드를 css에서 찾아서 수정 코드를 입력해 보기.
!!2024-01-05 이미지가 다시 본문폭을 벗어났음.!!
#content .contents_style figure.imageblock.alignCenter,
#content .contents_style figure.imagegridblock,
#content .contents_style figure.imageslideblock.alignCenter {
max-width: 100% !important;
height: auto;
margin-left: auto !important;
margin-right: auto !important;
display: block;
}
다시 수정 해보았습니다.
제대로 다시 적용된 것을 확인 했습니다.