베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

GeneratePress 테마: 모바일 썸네일 위치 변경하기

Last Updated: 2021년 7월 12일 | 2개 댓글
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

워드프레스 GeneratePress 테마에서는 블로그 옵션에서 썸네일 위치를 설정할 수 있습니다. 하지만 Blog 옵션에서 특성 이미지 위치를 왼쪽으로 지정해도 모바일에서는 썸네일이 상단에 표시됩니다. 모바일에서도 썸네일이 왼쪽에 위치하도록 모바일 썸네일 위치를 변경하는 방법에 대해 살펴보겠습니다.

GeneratePress: 모바일 썸네일 위치 변경하기 (How to align thumbnails to the left on mobile devices in GeneratePress)

이 블로그에는 현재 GeneratePress 테마가 사용되고 있습니다. GeneratePress는 가볍고 속도가 빨라서 속도가 빠른 사이트나 심플하고 속도가 빠른 블로그를 만들고 싶은 경우 사용하기에 좋은 워드프레스 테마 같습니다.

제너레이트프레스 테마의 유료 버전(GP Premium)을 사용하는 경우 다양한 옵션과 기능을 사용할 수 있습니다.

모바일 기기에서 썸네일 위치를 왼쪽 또는 오른쪽으로 정렬하기

외모 > Layout > Blog 페이지에서도 다양한 옵션을 지정할 수 있습니다. Featured Images 섹션에서 Display featured image (특성 이미지 표시) 체크박스를 선택하고 Alignment (정렬)Left (왼쪽) 또는 Right (오른쪽)로 지정하면 블로그 아카이브 페이지와 카테고리 아카이브 페이지 등에서 썸네일이 왼쪽 또는 오른쪽에 표시됩니다.

GeneratePress: 모바일 썸네일 위치 변경하기

하지만 모바일 기기에서는 썸네일이 왼쪽이 아니라 위쪽에 표시됩니다.

워드프레스 GeneratePress 썸네일 위치

특성 이미지 크기를 크게 지정한 경우에는 왼쪽에 표시되어도 괜찮지만 지정한 특성 이미지 크기가 작다면 위의 그림처럼 모바일 장치에서 썸네일이 어색하게 보일 수 있습니다.

모바일 기기에서도 썸네일이 왼쪽(또는 오른쪽)으로 정렬시키고 싶은 경우 다음과 같은 CSS 코드를 사용할 수 있습니다.


/* GeneratePress 테마: 모바일 썸네일 위치 왼쪽 정렬 */
/* Align the featured images (thumbnails) to the left on mobile devices in GeneratePress */

@media (max-width: 768px) {
.post-image-aligned-left .post-image, .post-image-aligned-right .post-image {
    float: left !important;
     padding-right: 20px;
}
}

특성 이미지를 왼쪽 정렬로 지정한 경우에 사용할 수 있습니다. 오른쪽 정렬인 경우 padding-right 대신 padding-left 값을 지정하면 될 것입니다.

위의 코드를 외모 > 사용자 정의하기 > 추가 CSS 페이지의 맨 하단에 추가합니다. 그러면 다음과 같이 모바일에서도 썸네일이 왼쪽(혹은 오른쪽)으로 정렬될 것입니다.

워드프레스 GeneratePress 썸네일 위치 조정

변경 사항을 저장하고 모바일 기기에서 확인해보시기 바랍니다. 아직도 썸네일이 원하는 대로 표시되지 않으면 캐시 플러그인의 캐시를 삭제하고 브라우저의 캐시도 삭제한 후에 사이트를 새로 고침하면 제대로 표시될 것입니다.

마치며

이상으로 GeneratePress 테마를 사용한 경우 모바일 기기에서 썸네일 위치를 조정하는 방법에 대해 살펴보았습니다. 간단한 CSS를 사용하여 쉽게 썸네일 위치를 변경할 수 있습니다. GeneratePress 테마의 Site Library에서 Marketer와 같은 템플릿을 로드하여 사용하는 경우에도 본문에서 소개한 CSS 코드로 모바일 썸네일 위치를 왼쪽으로 이동시킬 수 있습니다.

기본적인 CSS를 익히면 수월하게 커스텀하는 것이 가능할 것입니다. 홈페이지 만들기에 대한 책에서 가장 먼저 다루는 분야가 HTML과 CSS입니다. 기본적인 CSS는 익히는 데 그리 많은 시간이 걸리지 않습니다. 시중에서 CSS 관련 책을 한 권 사서 보셔도 되고, 생활코딩과 같은 무료 강의를 통해 공부할 수 있습니다.

기본적인 사항을 익히고, 이후부터는 필요할 때마다 책이나 인터넷을 참조하여 응용할 수 있습니다. 모든 CSS 속성을 외울 필요는 없습니다. 그런 것이 있다는 정도를 이해하고 넘어가고 필요할 때마다 책을 참조하거나 구글링하여 응용하시면 될 것입니다.

※ 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

참고



2 개 댓글

Leave a Comment

  1. GeneratePress 썸네일 위치 조정하는 방법에 대한 글 잘 읽었습니다. CSS를 배우려면 책을 구입하는 것이 좋을까요? 아니면 무료 강의를 이용하는 것이 좋을까요?

    응답
    • 안녕하세요? 책을 사보셔도 되고, 인터넷에서 무료 강의를 보셔도 됩니다. 둘 다 함께 하셔도 되고요. 기본적인 내용을 익히기에 무료 강의로도 충분한 것 같습니다만, 무료 강의의 경우 무료라서 해도 그만, 안 해도 그만 이라는 생각을 가지고 시작한다면 중도에 포기할 가능성이 높을 것입니다. 찾아보시면 유료 인터넷 강의도 있을 것입니다.

      응답