워드프레스 블로그에서 글목록에 보이는 썸네일 이미지를 데스크톱 넓은 화면과 모바일 좁은 화면에서 각각 크기를 다르게 하는 방법이다. 각각의 개별 페이지에는 썸네일 (특성 이미지) 보이지 않게 하고, 글 목록에서만 나타나게 설정할 수 있다.
현재 이 워드프레스 블로그는 제너레이트프레스 테마를 프리미엄 유료버전으로 이용중이다. 무료에 비해 기능이 다양한 것은 사실이지만, 보다 정교하게 원하는 대로 다듬기 위해선 추가 CSS나 테마파일 편집기 이용도 필요하다.
워드프레스 본문 상단에 썸네일 (특성이미지) 숨기기
먼저 개별글에서 특성 이미지 (썸네일)을 지정했을 때 본문 최상단에 추가로 한 번 더 나타나는 것을 없애주는 방법이다.
제너레이트 프레스 테마를 무료버전으로 사용하는 경우와 프리미엄 유료버전을 구매한 경우 방법이 차이가 있어서 각각 설명한다.
제너레이트 프레스 무료버전
GP테마 무료버전 사용시 본문 상단에 썸네일 중복출력을 막는 방법은 다음 CSS 소스를 사용자 정의하기 > 추가 CSS 부분에 넣어주면 된다.
/* 썸네일 이미지 안나오게 */
.attachment-full {
display:none;
margin:0px;
padding:0px;
}
attachment-full 이라는 클라스명을 display:none으로 없애버리는 코드이다.
제너레이트프레스 프리미엄 유료버전
유료버전을 이용 중이라면 추가 CSS를 건드릴 필요 없이 설정 메뉴에서 지정할 수 있다
관리 메뉴 > 외모 > 사용자 정의하기 > Layout > Blog 로 들어간다.
Featured Images (특성 이미지) 항목에서 글목록 부분과 개별글 부분의 썸네일 설정을 각각 다르게 지정할 수 있다.
- Archives : 글 목록에서 보이는 특성 이미지
- Posts : 개별 글에서 보이는 특성 이미지
위처럼 Archives 에서는 Display로 체크하고 Posts에서는 체크박스를 해제해놓으면 글 목록에서는 뜨고 개별 글에서는 썸네일 지정된 이미지가 중복해서 나타나지 않게 된다.
썸네일 특성이미지 사이즈 모바일/데스크톱 따로 지정하기
다음은 이렇게 출력 여부를 설정한 썸네일 특성이미지의 사이즈를 모바일과 데스크톱에서 각기 다르게 지정하는 방법이다.
먼저 글목록에서 보여질 특성 이미지의 크기는 앞서 말한 메뉴로 진입해서 설정한다.
사용자 정의하기 > Layout > Blog > Featured Image > Archives > width, height 지정
그런데 이렇게 하면 데스크톱에서 보여지는 것과 모바일에서 보여지는 것이 동시에 적용이 되어서 어느 한 쪽이 마음에 들지 않게된다. 예를 들면 데스크톱에서 큼지막하게 해놓았더니 모바일에서는 세로폭이 불필요하게 커지게 되는 식이다.
화면이 넓은 데스크톱에서는 이미지도 크게 보이도록 하고, 화면이 작은 모바일에서는 썸네일 이미지도 작게 표시되도록 따로 지정해본다.
먼저 위에서 말한 메뉴에서 display padding around images 체크를 해제한 뒤, width는 숫자를 지워버리고 height만 180px로 지정하였다. 이렇게 하면 현재 보는 이 블로그와 같이 이미지 세로폭에 따라 알아서 화면 가로폭에 꽉 차게 출력이 된다.
/* 글목록 썸네일 디자인 */
.entry-content:not(:first-child), .entry-summary:not(:first-child), .page-content:not(:first-child) {
margin-top: 0em;
}
.inside-article .post-image{
margin-top:10px;
}
@media (min-width: 769px) {
.resize-featured-image .post-image img {
height: 350px;
-o-object-fit: cover;
object-fit: cover;
}
}다음으로 위 코드를 추가 CSS에 넣어주었다.
margin 부분은 모바일에서 보이는 글목록에서 여백을 줄이기 위해 지정해준 것이다. 모바일은 화면이 작으니 오밀조밀하게 알차게 배치하고 싶어서다.
핵심은 @media 이 부분인데, 769px이상의 화면폭을 가진 데스크톱 화면인 경우 css 서식이 적용되도록 해놓았다. 보면 데스크톱 화면에서는 썸네일 이미지의 세로폭을 350px로 해서 보다 큼지막하게 보이도록 하였다.
이렇게 하니 이제야 글목록에서 썸네일이 눈에 확 들어오게 강조되어 보이고, 모바일에서도 너무 듬성듬성이 아니라 글제목, 이미지, 요약글이 알차게 구성되어서 보인다.
