모바일 기기에서 게시글을 확인하면 보통 콘텐츠 좌우에 여백이 있습니다. 좌우 여백이 너무 넓다면 여백을 조정하는 것을 고려할 수 있습니다. 원하는 경우 여백을 제거하여 콘텐츠가 전체 너비로 표시되도록 하는 것도 가능합니다. 이 글에서는 워드프레스 게시글에서 콘텐츠의 좌우 여백을 조정하는 방법에 대하여 살펴보겠습니다.
CSS를 사용하여 모바일 기기에서 콘텐츠 좌우 여백 조정/제거하기
모바일 기기에서 워드프레스 사이트를 방문하면 보통 콘텐츠 좌우에 여백이 있습니다.
여백이 적당하다면 보기 좋겠지만, 여백이 큰 경우 콘텐츠 폭이 좁아서 어색할 수 있습니다. 이런 상황에서 워드프레스 블로그의 게시글 콘텐츠 너비를 조정하는 것을 고려할 수 있습니다.
먼저는 콘텐츠의 좌우 여백(Padding) 값을 확인하도록 합니다. 이 블로그에 설치된 GeneratePress 테마의 경우 블로그 포스트에서 콘텐츠의 상위 요소에 30px의 Padding 값이 적용되어 있는 것 같습니다.
다음과 같은 CSS 코드를 디자인 » 사용자 정의하기 » 추가 CSS에 추가하면 콘텐츠 좌우 여백이 제거되어 전체 너비로 표시됩니다.
/* 워드프레스 게시글 콘텐츠 여백 조정하기 */
/* Removing Padding from Single Post Content in GeneratePress Theme */
@media (max-width: 767px) {
.single .entry-content {
margin-left: -30px;
margin-right: -30px;
width: calc(100% + 60px);
}
}@media (max-width: 767px) { // 스타일 }는 CSS 미디어 쿼리로서 기기 해상도가 767px 이하의 장치에만 스타일이 적용됩니다. GeneratePress 테마의 기기 해상도 분기점에 대하여 다음 글을 참고해보세요. (테마에 따라 조금씩 다르게 설정될 수 있습니다.)
상기 코드를 적용하면 다음과 같이 모바일 기기에서 콘텐츠의 좌우 여백이 제거됩니다.
이렇게 좌우 여백이 없으면 답답할 수 있으므로 약간의 여백을 추가할 수 있습니다.
@media (max-width: 767px) {
.single .entry-content {
margin-left: -15px;
margin-right: -15px;
width: calc(100% + 30px);
}
}숫자 값을 적절히 변경하여 콘텐츠 여백의 변화를 관찰하시기 바랍니다.
Astra(아스트라) 등 대부분의 워드프레스 테마에서 위의 코드를 적용할 수 있습니다. 다만, 실제 콘텐츠 여백 값은 테마에 따라 다릅니다. 뉴스페이퍼 등 일부 테마에서는 entry-content 대신 다른 클래스가 사용되므로 확인하여 응용할 수 있습니다.
텍스트는 그대로 두고 이미지만 좌우로 확장하기
참고로 텍스트는 그대로 두고 이미지만 좌우 여백을 제거하여 전체 너비로 표시하고 싶은 경우에는 다음과 같은 코드로 테스트해보시기 바랍니다.
/* Center the image within the wp-block-image class only on mobile devices */
/* 모바일 장치에서만 wp-block-image 클래스 내의 이미지를 가운데 정렬 */
@media (max-width: 767px) {
.entry-content .wp-block-image {
margin-right: -30px;
width: calc(100% + 60px);
position: relative;
left: 50%;
transform: translateX(-50%);
}
.entry-content .wp-block-image img {
max-width: 100%;
height: auto;
}
}margin 값은 적절히 조정하도록 합니다. 좌우 margin 값을 조정하면 width 값도 적절히 변경해야 합니다. (width 내의 60px는 좌우 여백값을 합산한 값으로 대체합니다.)
CSS에 대하여 조금 이해하면 원하는 대로 콘텐츠 너비를 조정할 수 있고 글자 크기, 컬러, 배경색 등 스타일을 자유롭게 변경할 수 있습니다.
상기 커스텀 CSS는 디자인 » 사용자 정의하기 » 추가 CSS에 추가하거나 차일드 테마 내의 스타일시트 파일(style.css)에 입력할 수 있습니다. 저는 차일드 테마 내의 스타일시트 파일에 추가하는 편입니다. (알림판의 사용자 정의하기에 CSS 코드를 추가하면 페이지의 헤더 섹션에 코드가 추가됩니다. 보통의 경우에는 문제가 되지 않지만 추가하는 CSS 코드가 많을 경우에는 바람직하지 않을 수 있습니다.)
댓글 남기기