Onepress 테마 썸네일 크기 조절 삭제하는 방법입니다. 워드프레스 무료 테마인 원프레스 테마로 바꾸고 보니 썸네일 이미지 비율이 일정하지 않아 보기 좋지 않습니다. 썸네일의 크기 비율을 일정하게 맞추는 방법과 썸네일을 삭제하는 방법을 알아보겠습니다.
Onepress 테마 썸네일
워드프레스 원프레스 테마의 썸네일 비율이 일정하지 않아 비율을 일정한 크기로 맞추고 그 안에서 이미지가 잘리지 않게 넣으려고 합니다.
저는 기존에 사용하던 제너레이트프레스 테마보다 PageSpeed Insights 성능이 높게 나와서 테마를 바꿔보았습니다.
썸네일 크기 조절 방법
처음 원프레스 무료 테마로 바꾸고 나면 썸네일이 아래와 같이 나옵니다. 썸네일의 크기에 따라 제각각의 비율로 들어가서 보기 좋지 않습니다.
이것을 일정한 크기로 맞추기 위해 아래의 코드를 CSS 추가에 넣어주어야 합니다. 아래의 코드를 복사하여 관리자 페이지에서 모양 – 사용자 정의 – 추가CSS에 코드를 추가하여줍니다.
width (가로) height (세로) 사이즈는 원하는 사이즈로 변경하셔도 됩니다. object-fit : contain 은 정해진 사이즈 안에 이미지가 늘리거나 잘리는 부분 없이 비율에 맞게 들어가게 됩니다.
/* 썸네일이미지*/
.list-article-thumb img {
width: 225px;
height: 225px;
object-fit: contain;
}위의 코드를 입력하고 나면 아래와 같이 썸네일이 일정한 비율에 맞춰 정렬이 되고 글자도 정렬이 되어있습니다. 사진은 잘리는 부분없이 비율에 맞게 들어가게 됩니다.
썸네일 삭제 하는 방법
PageSpeed Insights 에서 블로그 성능을 측정 해보면 항상 썸네일 이미지가 너무 크다고 합니다. 줄이면 더 줄이라고 하고 용량도 Webp 확장자로 올려 더 줄일게 없는데도 줄이라고 합니다. 그래서 썸네일을 삭제도 해보았습니다.
/* 썸네일이미지*/
.list-article-thumb img {display:none;}위의 코드를 입력하면 썸네일 이미지가 삭제 되고 글자로만 보이게 됩니다. 모바일과 데스크톱 모두 썸네일이 삭제됩니다.
데스크톱 썸네일 이미지는 두고 모바일 썸네일 이미지만 삭제하기 위해서는 아래의 코드를 입력합니다. 768px 이하의 화면에서 썸네일 이미지를 삭제해서 패드와 폰 화면에서는 썸네일이 보이지 않습니다.
width:500px 로 바꾸어주면 패드에서는 썸네일이 보이고 폰에서는 썸네일이 보이지 않습니다.
@media (max-width: 768px) {.list-article-thumb img {display:none;}}
저는 위의 방법을 해보니 PageSpeed Insights 에서 모바일의 접근성 점수와 성능 점수가 떨어져서 썸네일은 보이도록 설정하고 비율만 맞춰주었습니다.
티스토리 블로그를 처음부터 사용 하다 보니 워드프레스 블로그도 티스토리 블로그와 비슷한 테마로 설정하게 되는 것 같습니다. 아직 더 고치고 싶은 부분이 많지만 꾸미는 것 보다 글을 많이 쓰는 게 중요하기 때문에 틈이 날 때 고쳐보도록 해야겠습니다.