흰색 바탕의 테마를 이용할 경우 테두리 없이 이미지를 첨부하면, 본문 내용과 이미지의 구분선이 명확하게 보이지 않는 경우가 있습니다. (특히 첨부 이미지도 흰색인 경우)
플러그인을 설치해서 이미지에 테두리를 넣을 수도 있고, CSS를 이용하여 원하는 이미지에만 테두리를 넣을 수도 있습니다.
이번 글에서는 그 동안 작성된 글을 포함하여, 앞으로 작성될 글에 첨부된 이미지에 일괄적으로 테두리를 넣는 방법을 알아보도록 하겠습니다.
- CSS 입력 경로 : 홈 → 디자인 → 사용자 정의하기 → 추가 CSS
/* 모든 이미지 1픽셀 검은색 실선 테두리*/
.single .entry-content img{border: 1px solid #000000;}
위 CSS 코드를 입력하면 기존에 작성된 글은 물론 신규로 작성하는 글에 첨부된 이미지에 테두리가 적용되는 것을 확인할 수 있습니다.
또한 이미지 테두리의 굵기를 변경하고 싶으면 1px의 값을 변경하면 되고, 색상을 다른 것으로 바꾸고 싶으면 #000000 부분을 위 이미지를 참고하여 다른 색상 코드로 변경하면 됩니다.