워드프레스에서 발행된 이미지에서 테두리 효과가 없으면 게시글의 배경색인 흰색과 이미지의 흰색이 구분이 가지 않는다.
따라서 경계가 명확하게 구분이 되어있지 않아서 글을 읽을때 이미지를 휙 하고 넘길수가 있다. 포스팅을 하는 입장에서는 검색자에게 눈에 잘 띄도록, 명확하게, 내용을 전달해야할 필요와 의무가 있다.
이번 포스팅에서는 이미지의 테두리에 명확한 효과를 주어서 본문의 배경색과 이미지의 색(이미지가 흰색일때) 경계를 확실히 두어서 읽는 사람에게 더욱 쉽게 읽을수있는 경험을 주고자 한다.
또한 이미지 밑에 적힌 글이 너무 딱 붙게 되면 역시 가독성에 좋지 못하다. 이미지의 밑에 약간의 여백을 만들어서 이미지와 글의 간격을 두어서 사진과 글을 보기 쉽도록 만들어본다.
워드프레스 이미지 테두리 효과
아래의 코드를 워드프레스에서 디자인에서 사용자정의하기를 누르고 추가CSS버튼을 눌러서 아래 코드를 복사하면 이미지에 테두리 효과를 줄수가 있다.
아래 블록에서 테두리 효과를 조금 더 수정하려면 아래 포스팅을 참고 하면 된다.
/* 이미지에 음영 추가 */
img {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
}
이미지 아래의 글 여백 조절
이미지의 바로 밑에 글이 붙어 있으면 글이 이미지와 겹쳐지거나 거의 붙어서 잘 읽히지 않게 된다. 따라서 이미지의 바로 밑 부분에 따라 붙는 글과 약간의 여백을 두는것이 좋다.
여백을 만드는 방법 역시 아래의 CSS코드를 추가하면 된다.
참고로 25px가 가장 적당하다고 생각하여 넣어봤다. 참고로 이 사이트도 25px로 설정하였다.
/*이미지 밑에 여백 간격 조절*/
.entry-content img {
margin-bottom: 25px; /* 조절하고자 하는 간격(px) 입력 */
}