강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

백현정님의 프로필 이미지
백현정

작성한 질문수

구글 애드센스 수익형 워드프레스 블로그 만들기

블로그 제작 상태 최종 점검하기

뉴스페이퍼 싱글템플릿 디자인 관련 상담 요청

작성

·

14

0

안녕하세요. 뉴스페이퍼 싱글 템플릿 디자인 관련하여 문의드립니다.

변경전 화면.jpg.webp

 

강의를 듣고 현재 뉴스페이퍼 테마로 하나 둘 씩 글을 작성해보고 있습니다.

싱글 템플릿(글 읽기 페이지)에서 왼쪽에 애드센스를 배치하다 보니, 전체 싱글 페이지 가 오른쪽으로 치우쳐 보여 본문 공간이 다소 좁게 느껴집니다.

기존에는 애드센스 30%, 본문 70% 비율이었는데, 제가 애드센스 25%, 본문 75%로 조정했습니다만.. 그럼에도 불구하고 여전히 본문이 다소 답답하게 느껴집니다.

가능하다면 본문이 화면 정중앙에 배치되고, 전체적으로 화면을 조금 더 넓게 사용할 수 있는 방법이 있을지 궁금합니다. 현재 화면상으로는 좌우 여백이 많은데, 실제 사용 가능한 본문 폭이 좁게 느껴져서요.

만약 뉴스페이퍼 템플릿 구조상 조정이 어렵다면, 본문을 정중앙에 배치하기 위해서는 왼쪽 스티키 애드센스를 제거해야 하는지도 함께 여쭙고 싶습니다.

비교를 위해 현재(as-is) 페이지와 참고하고 싶은(to-be) 페이지 링크도 함께 전달드립니다.

도움 요청드립니다. 감사합니다.

퀴즈

워드프레스 설치 후 불필요한 기본 데이터(테마, 플러그인 등)를 정리하는 주된 목적은 무엇일까요?

사이트 보안 취약점 제거

검색 엔진 최적화 점수 향상

웹사이트 로딩 속도 및 성능 개선

테마 구매 시 할인 적용

답변 2

0

아이티커넥트님의 프로필 이미지
아이티커넥트
지식공유자

안녕하세요.
아이티커넥트입니다.

확인해 본 결과 본문 영역의 경우, 뉴스페이퍼 테마에서 최대 너비 값을 1200px로 지정하고 있습니다.
해당 값을 수정하고 싶으신 경우, CSS 코드로 수정이 가능합니다.

워드프레스 좌측 메뉴에서 외모 > 사용자 정의 > 추가 CSS 부분으로 접속하신 다음에, 아래 코드를 넣어주시기 바랍니다. max-widht가 최대 너비 값으로, 현재 1200px을 1440px 로 바꾸는 코드 입니다.

.tdc-row.stretch_row_1200, .tdc-row-composer.stretch_row_1200 {

max-width: 1440px !important;

}

 

만약, 그럼에도 답답하게 느껴지신다면, 말씀하신대로 Layout 탭에서 좌측 스티키 영역을 제거하시고, 참고페이지와 같이 중앙 정렬하여 사용하시면 됩니다.

만약 그럴 경우, 본문 중간에 광고가 들어가거나 하단에 광고가 들어가는 방식으로 변경되어야 할 것 같습니다.

 

추가 궁금한 사항 있으시면 편하게 문의해 주세요!

감사합니다.

0

안녕하세요, 인프런 AI 인턴입니다. 백현정님.

뉴스페이퍼 테마를 사용하는 블로그에서 싱글 템플릿(글 읽기 페이지) 디자인을 조정하는 것은 화면 구성에 있어서 중요한 부분입니다. 백현정님이 언급해주신 대로 본문을 중앙에 배치하고, 사용 가능한 본문 공간을 넓게 활용하는 방법을 위해 몇 가지 옵션을 고려해볼 수 있습니다.

  1. CSS 통한 조정:

    • 특정 요소의 widthmargin을 조정하여 본문의 레이아웃을 중앙에 이동시킬 수 있습니다. 예를 들어, 왼쪽 애드센스를 포함한 사이드바의 폭을 줄이고, 본문의 width를 증가시키거나 margin 값으로 본문을 이동하는 방법입니다. 추가적으로 화면 해상도에 따라 반응형 CSS를 적용하여 다양한 기기에 최적화할 수 있습니다.
  2. 테마 설정에서 조정:

    • 뉴스페이퍼 테마는 커스터마이징 옵션을 많이 제공하므로, 테마 대시보드에서 “Layout” 및 “Single Post” 옵션을 확인해 보세요. 특정 설정에서 본문 영역의 폭을 조정할 수 있는 옵션이 있을 수 있습니다.
  3. 페이지 빌더 사용:

    • 뉴스페이퍼와 같은 테마는 페이지 빌더(예: Elementor, WPBakery 등)를 지원할 수 있습니다. 이러한 툴을 사용하여 개별 페이지마다 더 다양한 레이아웃을 시도해 볼 수 있습니다.
  4. 애드센스 위치 조정:

    • 백현정님이 말씀하신 것처럼, 애드센스를 다른 위치로 이동시키거나 제거하기도 좋은 방법일 수 있습니다. 사용자의 주의가 본문으로 좀 더 집중될 수 있게 하고, 공간 활용을 용이하게 할 수 있습니다.

이를 통해 비교를 위해 제공해주신 현재 페이지참고 페이지를 분석하여 백현정님이 원하는 레이아웃을 좀 더 정밀하게 구현할 수 있을 것입니다. 엘르 사이트는 확실히 넓고 본문이 중앙에 잘 배치된 예시로, 레이아웃의 차이를 벤치마킹하시면 도움이 될 수 있습니다.

다음 URL 링크들에는 유사한 질문에 대한 도움이 되는 답변이 포함되어 있으니 참고해 보시길 권장드립니다:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

백현정님의 프로필 이미지
백현정

작성한 질문수

질문하기