워드프레스 사진이나 이미지에 박스 테두리를 설정하는 방법을 알아보겠습니다. 워드프레스 본문에 흰색 사진을 넣으면 테두리가 없어서 가독성이 떨어지는데요. 이럴때 사진에 테두리 박스를 해주시면 글에 가독성이 훨씬 좋아집니다.
이미지 박스 설정방법은 html을 건들지 않고 CSS를 추가해서 간단하게 해결할 수 있습니다. 우선 워드프레스 관리자 페이지에서 [외모] – [사용자 정의하기]에 들어가 주세요.
그럼 위에 같은 메뉴에서 맨 밑에 CSS를 눌러주세요. 테마마다 CSS를 설정하는 창은 사용자 정의하기에서 찾으시면 됩니다. 그리고 아래 CSS 코드를 추가해서 저장하면 끝입니다.
/* 워드프레스 이미지 박스 테두리 */
.single-post .entry-content img{
border: 1px solid #000;
}이건 심플하게 사진 이미지 테두리만 생기게 하는 코드입니다. 심플한걸 좋아하는 분들은 이걸 하시면 됩니다.
/* 워드프레스 이미지 그림자 박스 테두리 */
.single .entry-content img {
box-shadow: 0px 0px 4px #000;
-webkit-box-shadow: 0px 0px 4px #000;
-moz-box-shadow: 0px 0px 4px #000;
}위 코드는 그림자를 만들어서 이미지가 앞으로 나와보게 하는 CSS코드입니다. 본인이 원하는 코드로 삽입하시면 됩니다.
티스토리(https://www.tistory.com/) 이용자도 html편집에서 CSS에 추가하시면 워드프레스 처럼 사진에 박스 효과를 넣을 수 있습니다.
