메인, 본문 부분에 썸네일 이미지가 너무 크게 출력되어, 본문의 가독성을 해치고 있기 때문에 또다시 커스터마이징을 했다.

썸네일 이미지가 많이 중요한 글을 블로그에 올린다면 모르겠지만, 내 블로그는 주제나 내용의 특성상 그럴 일이 없다.

그래서 썸네일 이미지를 줄이는 대신, 글을 더 잘보이게 하는 방향으로 워드프레스 테마를 커스터마이징 하자.

*

wordpress.com 에서도 디자인 -> 편집기 기능을 지원한다.

이 편집기 기능으로 기본적인 디자인 설정은 다 할 수 있다.

메인화면의 썸네일 이미지 사이즈를 줄이고 커스터마이징 하는 것은 이 편집기 기능으로 충분하다.

중앙 정렬의 경우, wordpress.com 에서도 css 클래스를 추가해줄 수 있는 기능이 있기 때문에 이 것으로 해결하면 된다.

다만, 본문의 썸네일 이미지를 조절하는 것은 디자인 편집기만으로는 부족하다.

그래서 css 클래스를 사용자정의로 추가한 다음, 그에 맞는 css 코딩을 해 줘야 한다.

아래는 본문의 썸네일 이미지를 수정할 때 사용한 커스텀 css 코딩이다.

*

.zoahaza-custom-A1 {
border-top: 1px solid #333;
border-bottom: 1px solid #333;
position: relative;
height: 300px;
overflow: hidden;
}

.zoahaza-custom-A1 img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

내 블로그 글의 특성상 본문의 썸네일은 좀 많이 자르더라도, 디자인적인 형태만 조금 보일 정도면 충분하다.

내가 사용하는 썸네일은 SEO 측면에서 중요한 역할을 하는 거지, 독자가 내 블로그 글을 보고 이해하는 데 중요한 역할을 하지는 않는다.

그래서 과감하게 세로사이즈 300px로 잘라주고 썸네일의 중앙 부분만 보일 수 있게 처리했다.

이렇게 하면 모바일에서는 조금 잘리고, 데스크탑에서는 많이 잘릴 것이다.

세로사이즈 수치가 300px이어도 괜찮은 이유는, 아무리 작은 모바일 기기라도 가로 사이즈가 어지간하면 300px 이상이기 때문이다.

img 태그에 들어간 코드는 CSS3에 먹이는 기법이기 때문에, 익스플로러 구버전에서는 제대로 동작하지 않을 수 있다.

그럼에도 이 기법을 사용한 이유는 내가 사용하는 워드프레스 테마의 특성상 이 기법을 쓰는 것이 가장 무난하다고 판단했기 때문이다.

*

– 블로그 썸네일은 flaticon에서 제공받았습니다. –

2022년 10월 21일 작성.