워드프레스 뉴스페이퍼 테마 사진 이미지 테두리 추가하기

워드프레스에서 글을 쓰고 발행 후

제가 작성했던 글을 보다가 마음에 안드는 부분을 발견했습니다.

위의 이미지 예시에는 사진 이미지 두장과 문장 2개가 들어가 있습니다. 여기서 제가 불만인 부분은

이미지나 글이나,

어느부분을 설명하는지 잘 집중이 되지 않는다는 겁니다.

특히 이미지가 많아질 경우

사진-글-사진이 되다보면 더 가독성이 떨어져 보였습니다. 그래서 이건 개인적인 생각입니다만, 사진에 테두리를 추가한다면 훨씬 좋지 않을까 생각이 들었습니다.

사진 이미지파일 테두리 추가하기

제가 현재 사용하는 테마는 뉴스페이퍼 테마입니다. 뉴스페이퍼에서 사진 이미지 파일에 테두리를 추가하려면 

.td-post-content img {
border: 1px solid #ddd;
padding: 5px;
}

다음 코드를 테마 디자인에서 사용자 정의하기 > 추가 CSS에 붙혀넣기 저장하면 적용할 수 있습니다.

코드의 일부분을 빨간색으로 체크한 이유는 테마마다 클래스 이름이 다르기 때문입니다.

뉴스페이퍼의 경우 (.td-post-content) 입니다.

뉴스페이퍼테마 테두리 코드

첨부한 코드를 복사해서 쓰면 됩니다.

border 1px : 테두리 두께를 조절합니다.

padding 5px : 테두리와 이미지의 여백을 조절합니다.

이제 테두리를 추가한 아까의 본문글 예시입니다. 뭔가 내용이 훨씬 집중되지 않나요?

만약에 본인 블로그에도 테두리 추가로 가독성을 높이고 싶다면 한 번 적용해 보시기 바랍니다.