
이미지가 본문 폭을 벗어나는 문제

티스토리에서 hello 스킨을 적용해서 잘 쓰고 있는데, 이 스킨은 이미지가 본문 폭을 벗어났을 때 줄여주는 기능은 탑재하고 있지 않다.
그래서 블로그 스킨편집 창에서 손을 좀 봐 주어야 겠다고 생각했다.
일단 티스토리에서 width가 860보다 더 큰 이미지는 에디터에서는 무조건 860으로 보이게 해 놓은 거 같은데...
글을 발행하면 최대크기가 1100으로 되어 있는지 1100까지도 나온다

1. 본문 쪽 맞춤 기능
우선 스킨편집에서 html/css를 수정하지 않아도 본문 폭 맞춤 기능을 사용하면 이미지가 줄여지기는 한다.

하지만 에디터로 글을 작성할 때 이미지 크기랑 실제로 글을 발행하고 나서 보여지는 크기가 다르기 때문에 글 작성중에는 실제로 이미지 크기가 어느 정도로 나올지 예측 할 수가 없다. 그래서 글 발행 후 계속 수정 버튼을 눌러 발행된 글과 에디터를 왔다 갔다 하면서 손을 봐줘야 하는 번거로움이 있다.
그렇다고 올리는 모든 이미지마다 본문 폭 맞춤을 하면 처음부터 작은 이미지는 강제로 본문 폭에 맞추어 확대가 되기 때문에 화질구지..가 된다.
2. 이미지 크기조정
그래서 내가 쓰는 방법은 이미지 크기조정 버튼을 클릭 해 보는 것이다. 현재 860 사이즈로 뜨는데 이것을 650 이하로 줄이면 된다.
일단 내 경험칙상 witdh 가 650이 넘어가면 이미지가 무조건 본문 폭을 벗어난다.
(hello 스킨 기본값 기준)
650이 본문보다 약간 작으면서 양쪽에 20px정도 여백을 남겨 주기 때문에 650이 넘는 것들은 그냥 650 을 입력해 주면 된다.
이것은 티스토리 hello 스킨 기본값 기준이고
본문폭이 더 넓게 설정해놓으신 분은 700이든 800이든 취향껏 수정하시면 된다

3. 스킨 편집에서 CSS수정(비추천)
혹시 블로그 스킨에서 CSS 편집하면
이미지가 저절로 폭에 맞춰지는지 1시간째 구글링 해 보는중...
티스토리 블로그도 워낙 오래되서 중간에 리뉴얼이 많이 된 거라 비교적 최신 블로그들에서 해당문제를 어떻게 해결하고 있는지 찾아보았다.
결론적으로 말하면 스킨편집창에서 CSS를 수정해도 결국 본문 폭을 벗어나는 이미지는 에디터에서 이미지마다 본문 쪽 맞춤을 개별적으로 설정해 주어야 하는 거라서 고치는 의미가 없다.
블로그 관리 > 스킨편집 > html 편집 > CSS 창에 max-width 라고 검색

기존 코드에 아래 코드 추가
width-max: 100% !important;
margin-left: auto !important;
margin-right: auto !important

이렇게 해주고도 글을 발행할 때 이미지를 가운데정렬이 아닌 본문 폭 맞춤으로 발행해 주어야 한다.

무튼 내생각에 예전부터 이런문제로 골머리를 앓다가
티스토리에서 해결책으로 내놓은게
본문폭맞춤이랑 이미지 크기조정 이니 이 두개를 쓰는 방법 밖에는 없다 ㅋㅋㅋ
이미지 크기조절 눌러서 이미지가 650 넘어가는 것들은 다 본문 폭맞춤으로 하나 하나 바꿔주든지 크기변경 버튼을 눌러서 크기가 650보다 큰 경우 650으로 수동으로 설정하든지 중에 하나다.
결국 이런 식이면 CSS를 수정 해 주는 의미는 없다
'BlogCustom' 카테고리의 다른 글
| [블로그 커스텀] 티스토리 코드블럭 커스텀하기 (Feat. highlight.js) (19) | 2024.11.10 |
|---|---|
| [블로그 커스텀] 티스토리 hELLo 스킨 본문 너비(폭) 늘이기 (12) | 2024.11.09 |
| [블로그 커스텀] 티스토리 코드블럭 폰트 바꾸기 (Feat. Google Fonts) (10) | 2024.11.09 |
| [블로그 커스텀] 티스토리 코드블럭에 인라인 넘버 적용하기 (css, js 코드) (5) | 2024.11.09 |
| [블로그 커스텀] 티스토리 블로그 다크모드 자동선택 해제하는 방법 (5) | 2024.10.31 |