워드프레스 ‘사용자 정의하기’가 안 보일 때: PostBlog 테마에서 이미지가 레이아웃보다 클 때
큰 틀(테마·빌더)은 바꾸지 않고, 이 글 하나로 문제 원인 이해 → 즉시 해결 → 재발 방지까지 정리합니다.
핵심 한 줄
문제는 FSE 구조(PostBlog), 해결은 전역 CSS입니다. 이 글 맨 아래 “코드 복사”를 눌러 바로 적용하세요.
1) 무엇이 문제였나?
- URL로 삽입한 이미지를 포함해, 본문 이미지가 콘텐츠 폭을 넘어가며 깨짐
외모 → 사용자 정의하기(Customizer)메뉴가 보이지 않아 CSS를 넣을 곳이 없음- 사용 테마: PostBlog (블록/FSE 기반)
2) 왜 이런 일이 생기나? (원인 설명)
PostBlog는 최신 블록/FSE 기반 테마라서, 기존의 Customizer 대신 사이트 편집기(Site Editor) 중심으로 동작합니다. 그래서 관리자 메뉴에서 ‘사용자 정의하기’가 숨겨져 보일 수 있습니다. 이는 오류가 아니라 구조적 변화입니다.
3) PostBlog vs 플러그인(빌더·CSS)의 역할 차이
| 구분 | PostBlog(테마) | 페이지 빌더(Spectra/Elementor) | CSS 추가 플러그인(Simple Custom CSS & JS) |
|---|---|---|---|
| 역할 | 사이트 뼈대·디자인 시스템 | 페이지/섹션 레이아웃 도구 | 사이트 전역 스타일 주입 |
| 구조 | 블록/FSE, Customizer 축소 | 테마 위에서 동작 | 테마와 독립적으로 동작 |
| 이미지 넘침 대응 | 별도 CSS 필요 | 개별 섹션은 가능 | 전역으로 가장 확실 |
| 장점 | 가벼움·최신 구조 | 자유도 높음 | 빠르고 일관된 전역 수정 |
4) 당장 적용하는 해결책(5분)
- 관리자 → 플러그인 → 플러그인 추가 → Simple Custom CSS and JS 설치/활성화
- Custom CSS → 새로 추가 → 아래 코드 붙여넣기 → 저장
- 에디터에서 이미지 정렬은 기본/가운데, 크기는 Large/Medium 추천(‘전체폭’은 해제)
전역 CSS (이미지 넘침 방지 + 넓은폭 안전화)
.entry-content img,
.entry-content a img,
.wp-block-image img {
max-width: 100%;
height: auto;
display: block;
}
/* Gutenberg 넓은폭/전체폭이 레이아웃을 깨면 콘텐츠 폭으로 제한 */
.entry-content .alignwide,
.entry-content .alignfull {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
주의
외부 CDN이 width/height를 강제할 땐 아래처럼 !important를 보강하세요.
.entry-content img {
max-width: 100% !important;
height: auto !important;
}
FAQ
PostBlog 때문에 ‘사용자 정의하기’가 사라진 건가요?
맞습니다. FSE 구조라 사이트 편집기를 사용합니다. 오류가 아니라 정상 동작입니다.
페이지 빌더만으로 해결할 수 없나요?
개별 섹션은 가능하지만, 사이트 전역 일관성은 전역 CSS가 가장 확실합니다.
외부 URL 이미지에도 적용되나요?
네. 브라우저에서는 모두 <img>로 렌더링되므로 동일하게 적용됩니다.
테마를 바꿔도 설정이 유지되나요?
CSS 추가 플러그인은 테마와 독립적으로 작동하여 설정이 유지됩니다.
About the Author
